High Performance Websites und Google

High Performance Web Sites Stefan Isak

http://www.flickr.com/photos/didier57/2423562782/

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

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 useUsability ...

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

http://www.flickr.com/photos/surroundsound5000/2713737042/

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

Warum ist High Performance wichtig?

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

NEU: Einfluss auf Google Suchergebnisse

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

Frontend Performance

Backend Performance

Server

Hardware

Datenbank

Programmcode

...

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

80%

20%

HTML-Dokument Komponenten (CSS, Javascript, Bilder, etc.)

Wo geht die Zeit verloren?

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

Zugriff: 02.05.2010, DSL 16.000 kbit/s, leerer Cache

~8%

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

~8% ~92%

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

Analyse Werkzeuge

Safari Web Inspectordeveloper.apple.com/safari/

Firefox Addon Firebugaddons.mozilla.org/de/firefox/

addon/1843

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

Analyse Werkzeuge

developer.yahoo.com/yslow/(benötigt Firebug)

code.google.com/speed/page-speed/(benötigt Firebug)

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

Frontend Performance - Analyse mit YSlowBeispiel - heise.de

heise.de 02.05.2010, DSL 16.000 kbit/s, voller Cache

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

Goldene Regel: weniger HTTP-Requests

Frontend Performance

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

Goldene Regel: weniger HTTP-Requests

Frontend Performance

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

Goldene Regel: weniger HTTP-Requests

Frontend Performance

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

Goldene Regel: weniger HTTP-Requests

Frontend Performance

CSS-Sprites - Beispiel

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

Goldene Regel: weniger HTTP-Requests

Frontend Performance

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

Goldene Regel: weniger HTTP-Requests

Frontend Performance

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

Goldene Regel: weniger HTTP-Requests

Frontend Performance

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

Goldene Regel: weniger HTTP-Requests

Frontend Performance

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

Weitere Regeln

Frontend Performance

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 SitesSteve Souders, O’REILLY

978-3-89721-850-5

Even Faster Web SitesSteve Souders, O’REILLY

978-0596522308

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

?

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

Stefan Isak

kuehlhaus AGN7, 5-6D-68161 Mannheim

Telefon +49.621.496083-0E-Mail info@kuehlhaus.comInternet www.kuehlhaus.com

Vielen Dank!