High Performance Websites und Google von Stefan Isak, kuehlhaus AG, am 3. Mai 2010 beim 4. Webmontag.talk in Manhheim.

1. High Performance Web Sites
Stefan Isak
http://www.flickr.com/photos/didier57/2423562782/

2. Was bedeutet Web Site Performance?
Text
Response-Zeit
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

3. Warum ist die Performance wichtig?
 User experience
 Joy of use
 Usability
 ...
 Erfolgsfaktor
http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html
http://www.stevesouders.com/blog/2009/07/27/wikia-fast-pages-retain-users/
http://www.strangeloopnetworks.com/files/Webinars/Performance_Impact_Webinar.m4v
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

4. NEU: Einfluss auf Google Suchergebnisse
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010
http://www.flickr.com/photos/surroundsound5000/2713737042/

5. Warum ist High Performance wichtig?
NEU: Einfluss auf Google Suchergebnisse
 Bis jetzt < 1% für englische Anfragen auf google.com
 Relevanz wird steigen
http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

6. Warum ist High Performance wichtig?
Google Webmaster Tools
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

7. Web Site Performance
Backend Performance
Server
Frontend Performance
Hardware
Datenbank
Programmcode
...
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

8. Wo geht die Zeit verloren?
20%
80%
HTML-Dokument Komponenten (CSS, Javascript, Bilder, etc.)
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

9. Wo geht die Zeit verloren?
Ein Beispiel - heise.de
Zugriff: 02.05.2010, DSL 16.000 kbit/s, leerer Cache
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

10. Wo geht die Zeit verloren?
Ein Beispiel - heise.de
~8%
Zugriff: 02.05.2010, DSL 16.000 kbit/s, leerer Cache
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

11. Wo geht die Zeit verloren?
Ein Beispiel - heise.de
~8% ~92%
Zugriff: 02.05.2010, DSL 16.000 kbit/s, leerer Cache
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

12. Analyse Werkzeuge
Safari Web Inspector Firefox Addon Firebug
developer.apple.com/safari/ addons.mozilla.org/de/firefox/
addon/1843
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

13. Analyse Werkzeuge
developer.yahoo.com/yslow/ code.google.com/speed/page-speed/
(benötigt Firebug) (benötigt Firebug)
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

14. Frontend Performance - Analyse mit YSlow
Beispiel - heise.de
heise.de 02.05.2010, DSL 16.000 kbit/s, voller Cache
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

15. Frontend Performance
Goldene Regel: weniger HTTP-Requests
106 Request für 1 Seite bei leerem Browser Cache
heise.de 02.05.2010, DSL 16.000 kbit/s, leerer Cache
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

16. Frontend Performance
Goldene Regel: weniger HTTP-Requests
103 Request für 1 Seite bei vollem Browser Cache
heise.de 02.05.2010, DSL 16.000 kbit/s, voller Cache
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

17. Frontend Performance
Goldene Regel: weniger HTTP-Requests
CSS-Sprites
 mehrere Bilder zu einem Einzigen zusammenfassen
 Bilder die hauptsächlich dem Layout/Design dienen sind
für CSS-Sprites gut geeignet
 ACHTUNG: Bilder die zum Inhalt gehören nie in einen
Sprite
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

18. Frontend Performance
Goldene Regel: weniger HTTP-Requests
CSS-Sprites - Beispiel
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

19. Frontend Performance
Goldene Regel: weniger HTTP-Requests
mehrere Javascript Dateien kombinieren
27 Javascript Dateien für die Startseite
heise.de 02.05.2010, DSL 16.000 kbit/s, voller Cache
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

20. Frontend Performance
Goldene Regel: weniger HTTP-Requests
mehrere Stylesheets kombinieren
heise.de 02.05.2010, DSL 16.000 kbit/s, voller Cache
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

21. Frontend Performance
Goldene Regel: weniger HTTP-Requests
Expires Headers einsetzen
 Komponenten bekommen ein “Verfallsdatum”
 Der Browser kann die Komponente bis zum
Verfallsdatum aus dem Cache laden
 Spielt keine Rolle beim ersten Besuch einer Webseite.
Beispiel Konfiguration für Apache
<FilesMatch “.(png|gif|jpg|js|css)$”>
ExpiresDefault “access plus 2 years”
</FilesMatch>
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

22. Frontend Performance
Goldene Regel: weniger HTTP-Requests
Expires Headers einsetzen
Komponente wird aus dem Cache geladen.
Dennoch ist ein HTTP-Request nötig um zu
prüfen, ob die Komponente verändert wurde.
Mit Expires Headers entfallen diese Requests.
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

23. Frontend Performance
Weitere Regeln
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

24. Weitere Informationen
developer.yahoo.com/performance/ code.google.com/speed/
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

25. Bücher
High Performance Web Sites Even Faster Web Sites
Steve Souders, O’REILLY Steve Souders, O’REILLY
978-3-89721-850-5 978-0596522308
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

26. ?
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010

27. Vielen Dank!
Stefan Isak
kuehlhaus AG
N7, 5-6
D-68161 Mannheim
Telefon +49.621.496083-0
E-Mail info@kuehlhaus.com
Internet www.kuehlhaus.com
High Performance Web Sites, Stefan Isak, Webmontag 03. Mai 2010