high performance websites und google
DESCRIPTION
High Performance Websites und Google von Stefan Isak, kuehlhaus AG, am 3. Mai 2010 beim 4. Webmontag.talk in Manhheim.TRANSCRIPT
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 [email protected] www.kuehlhaus.com
Vielen Dank!