Martin Kliehm, Senior Frontend Engineer, namics ag Frankfurt an der SEO-Konferenz des Internet Briefings.
Website Anbieter berücksichten Web Performance Optimierung «WPO» noch relativ wenig.
Web Performance Optimierung
Empfohlene Lektüre:
2006 Steve Souders: High Performance Web Sites
2009 Steve Souders:
webpagetest.org: Das Tool visualisiert die zu ladenden Website-Elemente. Im Beispiel lädt das Backend in 514 ms, das Frontend aber nur in 5402 ms. JavaScript beansprucht weitere 1717 ms. Das Frontend beansprucht also 91% der Ladezeit.
JavaScript lädt sequenziell, deshalb gehört der Code an den Fuss des Files und nicht nach oben, wo es andere Elemente blockiert.
Je nach Browser werden 2-4 Bilder parallel geladen. Einige Browser laden aber auch nur 1 Bild auf einmal.
Case Studies:
Amazon verliert bei 100 Millisekunden Verzögerung 1% an Umsatz.
Google: 400 ms Verzögerung bedeuten 0.59 % weniger Suchen pro User
Bing: Eine 2 Sekunden langsamere Website bedeutet 4.3 % weniger Search-Umsatz
Mozilla: 2.2 Sekunden schneller –> 15% mehr Downloads
Google maps: Minus 30% Dateivolumen –> 30% mehr Kartenaufrufe
Netflix: Einsatz von gzip –> 13-25% schneller, 50% Datenvolumen gespart
Die (bekannten) 14 Optimierungsregeln
http://developer.yahoo.com/performance/rules.html#gzip
Tools zum Testen
– Yslow (Plugin für Firebug)
– Google Page Speed
– jsPerf (Performancevergleich von JavaScript)
– Boomerang: Code Schnipsel, das die Ladezeit beim User misst
1. Gzip einschalten
Ist einfach auf dem Server umzusetzen.
2. Add an Expires Header
Auf dem Server wird jeder Seite mitgegeben, wie lange eine Seite gecached werden soll. Ein CSS-File oder Fav-Icon kann lange gecached werden, HTML-Seiten sollen wenig gecached werden.
3. DNS Lookups reduzieren
– Ein DNS Lookup dauert ca 20-120 ms.
– Parallele Downlaods über verschiedene Domains sind zwar schneller, der Lookup kostet aber auch Zeit –> Kompromiss: 2-4 Domains. Bilder können z.B. unter eigener Domain geladen werden. Dort können auch Cookies unterbunden und damit die Ladezeit weiter verkürzt werden.
4. Redirects verhindern
– Sie verzögern den Aufbau der Seite
– Sie werden nicht gecahed
– Best Practice: 301 oder 302
– Vorsicht: fehlender Endslash erzeugt Redirect!
5. Weniger HTTP Requests einsetzen
– JavaScript- bzw. CSS-Dateien zusammenfügen
– CSS Sprites: Kleine Icons können in einem grösseren Bild zusammengefasst werden
– Früher print stylesheet, heute @media print im CSS einsetzen
Apache modcaoncat zum Aggregieren von CSS oder JavaScripts: Das Tool verwendet den neueren Header. JAWR ist das entsprechende Java-Tool, für PHP sind auch Tools verfügbar.
6. JavaScript und CSS sollen in externen Files gehostet werden
– Damit können die Dateien gecached werden
– Bonus-Tipp: Framework
7. JavaScript minimieren
– Google Page Speed Plugin für Firebug: Per save as stehen die minifizierten Files zur Verfügung
8. CSS soll am Anfang des Codes stehen
– Damit kann ein Browser die einzelnen Seitenelemente schon rendern
9. CSS Expressions in IE verhindern
– JavaScript im CSS werden sehr oft ausgeführt und bremsen den IE aus
10. Scripte sollen am Fuss des Codes stehen
– Da sie sequentiell laden
Ausnahme: Non-locking Scripts. In HTML 5 wird es ein ‹async› Attribut geben.
11. Duplizierte Scripts vermeiden
– Kommt öfters vor als man denkt
– JQuery wird oft verwendet
12. Content Delivery Network (CDN) verwenden
– Internationale Websites können stark davon profitieren
13. ETags konfigurieren
– Der Server baut sich ETags anhand von verschiedenen Faktoren zusammen
– FileETAG none:
14. AJAX soll cacheable gemacht werden
– mit einem Expires Header einsetzen
Weiteres Monitoring-Tool: Pingdom
Twitter: @kliehm
http://delicious.com/kliehm/performance
http://klie.hm/profile