Performance-Optimierung am Beispiel: betamode.de
Published 2012-03-22, 20:07
Ich habe mich ein wenig mit Performance Optimierung von Webseiten beschäftigt. In den nächsten Tagen und Wochen werde ich einige Beiträge dazu veröffentlichen. Den Anfang macht diese Beschreibung des Optimierungsvorgangs von betamode.de:
Beispielseiten für Optimierung
- http://betamode.de
- http://betamode.de/2011/07/31/server-data-monitoring-graphing/
Ausgangssituation
- http://www.webpagetest.org/result/120318_NC_3MJ57/
- http://www.webpagetest.org/result/120318_GB_3MJ59/
Erste Beobachtungen und Auswertung
- urchin.js – uralter Google Analytics Code?
- Mehrere kleine GIFs, sollten sich einfach spriten lassen
- First Byte Time ist sehr hoch
- Kein Caching der statischen Ressourcen
- Kein CDN
Optimierung
Anwendbare Regeln aus High Performance Website Sites:
Rule 1 – Make Fewer HTTP Requests
Folgende Bilder können zusammengefasst werden:
- http://betamode.de/wp-content/themes/betamode/images/suche.gif
- http://betamode.de/wp-content/themes/betamode/images/clock.gif
- http://betamode.de/wp-content/themes/betamode/images/comments.gif
- http://betamode.de/wp-content/themes/betamode/images/xml.gif
Schritte:
- Bilder von <img> auf background-images umbauen
- Bilder als Sprite zusammenfassen: http://betamode.de/wp-content/themes/betamode/images/sprite.gif
- Sprite als background-image einbauen
- Da sich bg.gif nicht mitspriten lässt wird es als data-base64 direkt ins CSS eingebunden
Ergebnis
- http://www.webpagetest.org/result/120318_NM_3MJST/
- http://www.webpagetest.org/result/120318_C2_3MJSV/
Rule 3 – Add an Expires Header
Mit W3 Total Cache lässt sich sich das wunderbar erschlagen.
Ergebnis
- http://www.webpagetest.org/result/120318_0K_3MJY7/
- http://www.webpagetest.org/result/120318_4C_3MJZ0/
Rule 6 – Put Scripts at the Bottom
Das Analytics-Script ist zwar schon ganz unten, aber noch das alte synchrone. Also mal das neue besorgen und einbauen.
Ergebnis
- http://www.webpagetest.org/result/120318_B3_3MJZY/
- http://www.webpagetest.org/result/120318_TS_3MJZZ/
Rule 10 – Minify JavaScript (+ HTML + CSS)
Javascript gibt es keines, aber für Minify von HTML und CSS kann einfach W3 Total Cache konfiguriert werden, fertig.
Ergebnis
- http://www.webpagetest.org/result/120318_C4_3MK1C/
- http://www.webpagetest.org/result/120318_6G_3MK1D/
Dann zum Abschluss noch ein bisschen serverseitiges Caching um DB-Anfragen und so weiter zu minimieren mit W3 Total Cache.
End-Ergebnis
- http://www.webpagetest.org/result/120318_57_3MK1Z/
- http://www.webpagetest.org/result/120318_XM_3MK22/
Tadaa, schnell.
Zum Artikel Performance-Optimierung am Beispiel: betamode.de sind noch keine Kommentare vorhanden. Deine Meinung wäre jedoch willkommen!