Ladezeiten Check und Webseite optimieren

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.

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.
Fazit:
Bei meinem neuen Projekt EDVnews.de war ich in der Lage mit diesen drei Handgriffen den
Page Speed Score: von 87/100 auf Page Speed Score: 90/100 zu verbessern.
Vorausgesetzt man hat Zugriff auf den Webserver, kann gegebenenfalls Module nach installieren. Dann sind dies die Änderungen, die am schnellsten zum Erfolg führen.

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 JavaSkripts Dateien zu einer einzigen Datei.

4 Gedanken zu „Ladezeiten Check und Webseite optimieren“

  1. Moin Axel,

    alternativ kannst Du die Ladezeit direkt im Browser (FF) perfekt mit Firebug messen, das Addon „Lori“ ist auch sehr zu empfehlen…

    Zur Reduzierung der HTTP-Requests sollten alle grafischen Elemente auf einer großen Grafik zusammen gelegt werden, um dann über background-position innerhalb eines Containers nur den gewünschten Teil der Gesamtgrafik einzublenden.

    Viele Grüße
    Tom

  2. Firebug, Yslow und Pagespeed kenne ich auch, finde ich aber nicht so praktikabel weil die Plugins nicht unbedingt auf jedem Rechner verfügbar oder aktiviert sind. Ich Nutze die Browser Plugins wenn ich bei der Implementierung bin da geht ein neu laden echt schneller als den Webtest nochmal auszuführen.

    Das mit den CSS.Sprites (Alle Bildelemente in einer Grafik) überzeugt mich eben nicht ganz. Zwar ist die Download Zeit zwar geringer aber wie sieht es mit der Rendering Zeit aus die der Browser braucht um die Seite dann anzuzeigen?

  3. „Daten aus Google Analytics wirken sich wiederum auf die Positionen in Google aus.“

    Das würde ich jetzt aber nicht unterschreiben…
    Aber eine interessante Aufstellung von Maßnahmen, werde ich mal ausprobieren…

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.