Pagespeed optimieren

Schnelle und optimierte Webseiten tragen dazu bei, Interesse, Verweildauer und Conversions der Besucher zu erhöhen. Google PageSpeed Service dient dazu, die Anwendung leistungssteigernder Best Practices auf Ihre Website zu automatisieren, um diese zu beschleunigen.

Als SEO und Web-Entwickler werde ich auf Veranstaltungen öfters gefragt, ob die Ladezeit einer Webseite sich auf die Position in Google auswirkt und wie man diese optimieren kann.

Gleich vorweg zur ersten Frage: Ich kann im Moment nicht bestätigen, dass eine Optimierung der Ladezeiten sich direkt auf die Positionen in Google auswirkt. Wozu sollte ich dann überhaupt optimieren? Weil es Sinn macht! Der Aufwand hält sich meistens in Grenzen und man kann mit wenigen Handgriffen leicht 20% bessere Ladezeiten rausholen. diese wirken sich dann auf das Verhalten der Benutzer aus. Bessere Ladezeiten führen meistens zu einer geringeren Bounce-Rate und zu mehr Seitenaufrufe pro Benutzer. Diese Daten fließen dann meistens in die Google Analytics Auswertung und die Daten aus Analytics, der Google Toolbar und das Zurückspringen des Benutzers zurück zu den Google Ergebnissen  wirken können sich wiederum auf die Positionen in Google auswirken.

Ebay konnte in 2020 seine Konversion steigern durch eine 100ms Optimierung.

Als erstes sollte man die Ladezeiten der bestehenden Webseite messen. Am einfachsten geht dies mit dem Tool von Webpagetest.org. dort gibt man einfach die Internetadresse seiner Startseite an, wählt den Standort Deutschland und den aktuellen Browser IE 8 aus.

Nach circa 30 Sekunden steht die Auswertung über die Ladezeiten der Webseite zur Verfügung. Ich gehe jetzt nicht auf alle Möglichkeiten der Optimierung ein, sondern zeige nur, womit sich am schnellsten gute Ergebnisse erzielen lassen.

Gzip Komprimierung aktivieren
Am einfachsten ist es die Gzip Komprimierung auf dem Server zu aktivieren. Dafür muss auf einem Apache Server das Modul mod_deflate aktiviert sein. Mit der folgenden Anweisung in der .htaccess Datei, wird der Webserver angewiesen Textdokumente wie HTML Seiten, Stylesheet (CSS) und Javascript Dateien komprimiert auszuliefern wenn dies vom Browser unterstützt wird.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain text/html text/css text/php text/xml
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

Wie kann ich prüfen ob die Dateien jetzt komprimiert ausgeliefert werden? Mit einem HTTP Kompression Test kann man leicht prüfen, ob die Dateien jetzt komprimiert ausgeliefert werden. Am besten ist es jeweils eine CSS, eine Javascript und eine HTML bzw. PHP Datei einzeln aufzurufen und auf Komprimierung zu testen.

ETags ausschalten
Als nächstes sollte man die ETags , ebenfalls über die .htaccess, deaktivieren. Seltsamerweise dienen ETags eigentlich dazu eine caching Anweisung zu übermitteln, da diese jedoch häufig falsch implementiert wird, ist es ratsam die ETags nicht einzuschalten. Diese Ausnahme sollte man nur brechen wenn man genau weiss, was man tut.

<IfModule mod_headers.c>
Header unset ETag
FileETag None
</IfModule>

Expire Header setzen
Der nächste Schritt besteht darin dem Browser zu erlaubten statische Elemente im Cache abzulegen. Beim erneuten Aufrufen der Seite, zum Beispiel wenn der Benutzer eine Unterseite lädt oder von einer Teaser-Seite auf einen Unterartikel klickt, werden statische Elemente wie runde Ecken aus dem Layout, CSS Dateien oder gar Skriptselemente nicht erneut geladen. Bildelemente aus dem Layout ändern sich in der Praxis höchstens ein paar Mal im Jahr. Es macht keinen Sinn dort immer die aktuelle Version vom Browser anfordern zu lassen.

<IfModule mod_expires.c>
## enable expirations
ExpiresActive On
#A31556926 expire after a year in the client's cache
ExpiresByType image/png A31556926
ExpiresByType image/gif A31556926
ExpiresByType image/jpg A31556926
ExpiresByType image/jpeg A31556926
ExpiresByType text/css A31556926
ExpiresByType text/html A31556926
ExpiresByType text/js A31556926
ExpiresByType application/x-javascript A31556926
</IfModule>

Durch die Abfrage IfModule wird sicher gestellt, dass es keine Probleme beim Aufrufen der htaccess gibt und der Server trotzdem immer noch die Seiten anzeigt. Wenn du Module allerdings nicht installiert sind, merkt man auch nichts von der verbesserten Ladezeit.
Sollten die Module nicht verfügbar sein, müssen diese im Apache nachinstalliert werden. Die kann man je nach Server selber machen oder muss sich an den Support werden.

Weitere Optimierungsmöglichkeiten:
Überprüfen der Dateigröße einzelner Bilder. Nicht selten werden Bilder aus dem Grafikprogramm in höchster Qualität abgespeichert und direkt auf dem Webserver abgespeichert. Dabei wird oft vergessen die JPEG Komprimierung einzuschalten was meistens zu doppelt oder dreifach so großen Bildern wie nötig führt. Unter der Webpage Testseite im Bereich Performance Review -> Compress Images wird eine Liste der geladenen Grafiken und deren Dateigröße ausgegeben. Dort kann man nachprüfen, ob man nicht unnötig große Bilder ausliefert.
Zusammenführen von CSS-Dateien um weniger HTTP Request auszulösen.
Zusammenlegen von mehreren JavaScripts Dateien zu einer einzigen Datei.

Pagespeed verstehen

Das Thema ist ziemlich komplex und lässt sich leider nicht sehr einfach auf einzelne Zahlen reduzieren. Eine Sehr gute Anleitung zum Analyse Tool Webpagetest, das lesen von Waterfall-Charts und nicht dokumentierten Funktionen findet man in den zwei Videos der Velocity Konferenz WebPagetest Power Users – Part 1 & II. Jetzt könnte man natürlich argumentieren dass die Vorträge schon ein paar Jahr alt sind, aber enthalten Informationen sind immer noch aktuell und dort sind wirklich einige gute Tipps enthalten.

Wer sich erstmal nur einen Überblick verschaffen will kann auch die 55 Folien der Slideshare Presentation überfliegen: