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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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