Startseite BlogGoogle, OptimierungLadezeit einer Webseite messen und verbessern

Ladezeit einer Webseite messen und verbessern

16. August 2010 — Google Optimierung
Ladezeit einer Webseite

Seitdem Google die Ladezeit einer Webseite offiziell als Rankingkriterium angibt, fragen sich viele Webseitenbetreiber, wie kann ich überhaupt die Ladezeit meiner Webseite messen und ggf. verbessern? Wie schnell ist eine gute Ladezeit und welchen Einfluss hat die Ladezeit einer Webseite wirklich auf das Ranking? Dieser Beitrag beantwortet diese Fragen und zeigt Schritt für Schritt, wie man die Ladezeit (s)einer ganz normalen Webseite verbessern kann, ohne gleich ein CDN (dazu gleich mehr) einzusetzen?

Ladezeit einer Webseite messen

Bevor man an die Ladezeit einer Webseite herangeht, muss man die Ladezeit natürlich erstmal messen (können). Wichtig zu wissen ist, dass die Ladezeit variiert, je nachdem wie schnell der ausliefernde Server, die Internet-Leitung, der abfragene Computer, usw. gerade sind. Daher wird es nie einen absoluten Wert für die Ladezeit geben. Um die erreichten Verbesserungen aber zu werten, brauchen wir zumindest gleichbleibende Bedingungen. Es gibt zahlreiche Online-Tools zur Ladezeitmessung, von denen ich eigentlich nur Pingdom empfehlen kann. Dennoch sollte man Einflussgrößen reduzieren, so dass ich empfehle lokal zu messen.
Für die Firefox-Erweiterung Firebug lassen sich beispielsweise Page Speed von Google oder Y!Slow von Yahoo implementieren. Beides sehr nützliche Tools für unser Vorhaben.
Damit sieht man auch, welche Teile wie lange benötigen und erhält weitere Hilfen, dazu gleich.

Wieso überhaupt die Ladezeit verbessern?

Kein Internetsurfer wartet. Die Geduld dürfte je nach Thema und zu erwartendem Inhalt bei wenigen Sekunden liegen. Es ist einfach benutzerfreundlich, eine schnell ladende Webseite anzubieten.
Zweitens schont es den Webserver, der weniger ausliefern muss und besser ausliefern kann. Das wird zwar meistens egal sein, schaden kann es aber keinesfalls.
Drittens könnte es für’s Google-Ranking etwas bringen, oder?

Ladezeit ein Ranking-Faktor?!

Seit 2010 ist die Ladezeit einer Webseite offizieller Ranking-Faktor bei Google (Quelle). Allerdings ist das nur ein Faktor von über 200 und laut Matt Cutts von Google nur bei 1% der Suchanfragen für eine Ergebnisänderung verantwortlich.
In einigen Videos sagt Matt Cutts auch, dass lediglich die Sensibilität der Webmaster durch Aufnahme als Kriterium auf die Ladezeit gelenkt werden soll und nur wirklich lahme Seite einen Dämpfer bekommen.

Wie schnell ist eine schnelle Ladezeit?

Folglich zeigt Google in den Webmaster Tools (unter Google Labs, Website-Leistung) auch die Ladezeit der einzelnen Seiten an. Laut Google lädt eine Webseite dann schnell, wenn die Ladezeit unter 1,5 Sekunden liegt.

Ladezeit Beispiel in den Google Webmaster Tools

Ladezeit Beispiel in den Google Webmaster Tools

Schritt für Schritt die Ladezeit einer Webseite verbessern

Es gibt für Seiten mit sehr hohem Traffik eine gute Anleitung bei Yahoo. Für “normale” Webseiten dürften die wichtigsten Punkte bei überschaubarem Aufwand bereits wesentliche Verbesserungen erzielen (80/20 Prinzip).

1. HTTP-Zugriffe reduzieren

Jede Datei, die der Browser zur Anzeige laden muss, kostet Zeit. Dies ist der größte Einfluss-Faktor (dürfte über 80% der Ladezeit ausmachen). Jede CSS-Datei, jede JS-Datei, jede Grafik usw. kosten allein durch den zusätzlichen Aufruf Zeit, richtig Zeit.

Alle überflüssigen Zugriffe raus

Schaut einfach in den Quelltext und fragt Euch, ob man wirklich jede Datei benötigt. Vielleicht macht irgendeine Toolbar gar keinen Sinn etc. – raus damit (vgl. einfacheres Blog-Design).

Dateien zu einer zusammenfassen

Weiter sollte man alle CSS-Dateien in eine einzige Datei zusammenfassen. Dazu noch ein CSS für den Druck – macht zwei CSS-Dateien im head der Webseite.
JavaScript-Dateien gehören ans Ende, da diese meist zur korrekten Anzeige nicht erforderlich sind und der Besucher die Seite schon im oberen Bereich sieht, wenn noch die JS-Datei lädt. Die eine JS-Datei. Alle JS-Angaben in einer Datei zusammenfassen. Das kann bei schlechten WordPress-Plugins oder Frameworks wie jQuery etc. ordentlich Zugriffe und Zeit sparen.
So kann man JavaScript auch asynchron laden, so dass es erst nach komplettem Laden der Seite selbst geladen wird. Wer Google Analytics nutzt, dem bietet Google einen solchen Code neu an. Einbauen! Damit kann Analytics auch aus diesem Grund keinen Einfluss auf das Ranking haben.

CSS-Sprites

Manche Aufrufe sind versteckt und im Quelltext so nicht direkt zu sehen. So sind die CSS-Anweisungen ja in eine Datei sinnvollerweise ausgelagert. Darin werden aber auch Hintergrundgrafiken geladen. Jede solche Grafik verursacht einen HTTP-Zugriff und damit Ladezeit. Daher versucht man, solche Grafiken zu möglichst wenigen zusammenzufassen und jeweils nur den passenden Ausschnitt im Hintergrund anzuzeigen (CSS Sprites). Bei sehr hoch frequentierten Seiten kann man das gut sehen, da diese das natürlich bis zum Extrem betreiben (müssen).

Beispiele CSS Sprites:
CSS Sprites von XINGCSS Sprites von Youtube

diagonale SpritesDer Einfachheit halber könnte man drei Grafiken machen: horizontale, vertikale und statische Hintergründe. Je nach Sichtbarkeit wird dann eine der drei eingesetzt. Ein neuer, recht kreativer Ansatz schlägt diagonale Sprites vor.

Content-Delivery-Networks (CDN)

Da Browser nur eine begrenzte Anzahl von Dateien vom selben Host parallel laden, kann man beispielsweise alle Inhaltsbilder auf einen anderen, schnellen Server oder eine Subdomain (CDN) auslagern und so mehrfach parallel die Seitenbestandteile laden, also mehr Zugriffe zur geichen Zeit erreichen. Aus meiner Sicht ist das aber für normale Seiten wegen des Aufwands und der meist zusätzlichen Kosten übertrieben. Einzig die Subdomain für statische Inhalte kann im Üblichen Rahmen andenken, diese sollte dann aber keine Cookies ausliefern. Da Cookies meist domainweit gelten, muss man da aktiv werden. So kann man beispielsweise Google Analytics mit _gaq.push(['_setDomainName', 'blog.netprofit.de']); auf eine (Sub)Domain begrenzen oder WordPress in der wp-config.php per define('COOKIE_DOMAIN', 'blog.netprofit.de'); einschränken.
So oder so kann man beispielsweise sehr einfach jQuery und andere Standardbibliotheken über Google (in komprimierter Form) laden. Dies ist schnell, ein externer Host und vielleicht schon im Browser-Cache des Besuchers. Also durchaus clever.

2. Komprimieren

Bilder lassen sich meist in geringerer Auflösung ohne sichtbaren Qualitätsverlust anzeigen. Das spart richtig ordentlich Dateigröße und damit Ladevolumen. Nur wo liegt die Grenze? Hier helfen Tools wie Y!Slow, das via Smush It einem die Arbeit ganz ordentlich abnimmt. Das kann man auch isoliert online nutzen: www.smushit.com
So kann man ganz einfach nochmal richtig Dateigröße sparen, ohne sichtbare Einschränkungen für den Besucher. Daher Bilder auch nicht per CSS oder HTML skalieren, sondern gleich in passenden Dimensionen speichern. Das können mittlerweile alle besseren CMS ganz gut.

Auch HTML, CSS, JS, … sind komprimierbar. Kompression spart durchschnittlich 70%. So kann man die Klartext-Dateien schon reduzieren, indem man Kommentare, Leerzeilen etc. entfernt. Im CSS kann man Shorthand verwenden und beispielsweise die abschließenden ; entfernen. Zusätzlich kann man diese Dateien komprimiert an den Browser ausliefern, was die Übertragunsgröße enorm mindert. Das Entpacken und Anzeigen kostet dann zwar Rechnerleistung beim Anzeigenden, an der es aber ja meist nicht mangelt.
Diese Dateien kann sollte man mit gzip komprmieren und abspeichern. Per .htaccess kann man dann je nach Dateiformat die .gz-Versionen ansteuern lassen. Hat der Apache-Server das Modul mod_deflate geladen, kann man auch einfach per .htaccess ein AddOutputFilterByType DEFLATE erreichen.

3. Cache erlauben

Viele Dateien einer Webseite ändern sich sehr selten. Ein Teil der Besucher dürfte also bei weiteren Besuchen theoretisch die identischen Dateien sehen, die sein Browser schon einmal (in den Zwischenspeicher) geladen hatte. Wieso also idese Dateien nochmal vom Server holen, wenn der Besucher die schon auf dem Rechner hat?
Dazu muss man serverseitig den Expires-Header (und Cache-Control) jeder Datei übertragen, damit der Browser das auch erkennt. Dazu muss der Apache Server das Modul mod_expires aktiviert haben. Dann lässt sich per .htaccess je nach Dateityp ein Gültigkeitszeitraum einfach festlegen.
Ändert man aber die CSS-Datei muss man auch deren Namen ändern, um ein Laden der alten CSS-Datei bei diesen Besuchern zu vermeiden.

4. Sonstige Bremsen vermeiden

  • Sehr viele Redirect-Anweisungen in der .htaccess beeinträchtigen die Ladezeit extrem. Also versucht man diese soweit wie möglich zu vermeiden.
  • Weiter sind oftmals externe Zugriffe auf Twitter-Buttons, Bookmark-Buttons, Statistik-Codes, Feedleser sehr, sehr ladezeitintensiv. Da diese Dienste sehr viele Anfragen beantworten müssen, reagieren diese oftmals sehr, sehr langsam. Daher sollte man solche Grafiken (in Sprites) lokal speichern und die Werte ggf. lokal zwischenspeichern und nur alle paar Stunden aktualisieren.
  • 404-Fehler vermeiden. Werden zu ladende Dateien nicht gefunden, kann das die Ladezeit etxrem verlängern. Selbst wenn nur irgendein kleines Icon fehlt, das dauert! Also prüfen, da sich das sehr leicht beheben lässt.

Wenn selbst dann die Ladezeit der Webseite wegen zu vieler Besucher zu langsam ist, erst dann kommt die Tim Taylor-Methode als Lösung in Betracht: More Power! Für den Großteil der Webseiten dürfte es bei Ladezeitproblemen aber reichen, die obigen Schritte abzuarbeiten. Dann muss auch kein stärkerer Server her.

Weiterlesen

Empfehlenswert ist die Serie High Performance von Netways, Details zur Dateikomprmimierung bei Bildern von Webstandards, Möglichkeiten bei WordPress von Frank und Diskussion zum Rankingfaktor bei SEO United.

NETPROFIT Blog

Im Blog schreibt         über CMS, SEO & Webdesign. Kontakt →

Kategorien

Trackback-URL: http://blog.netprofit.de/ladezeit-webseite-messen-verbessern.html/trackback

5 Kommentare zu Ladezeit einer Webseite messen und verbessern

Sehr guter Artikel, werde demnächst auch die Ladezeit messen, um die Website zu verbessern. Danke für die wertvollen Tipps dazu!

Gravatar von Marcus Schoeberichts - via garvatar.org Marcus Schoeberichts →
Kommentar 1
17. August 2010 um 10:05 Uhr

Danke für die “Checkliste” ;)
Hab zunächst meine Seite mit Pingdom getestet, aber bei drei Tests drei verschiedene Ergebnisse bekommen. Demnach lag die Ladezeit zwischen 0,4 und 1,3 Sekunden. Beides zwar recht gute Werte, aber irgendwie gefällt mir das nicht.
Lade gerade Firebug runter und werde dann mal die anderen beiden Tools ausprobieren :)

Gravatar von R. Böhme - via garvatar.org R. Böhme
Kommentar 2
17. September 2010 um 19:55 Uhr

Also irgendwie komme ich hier immer auf die Zahlen, die mir auch Google Webmaster Tools anzeigt. Vielleicht schwankt es ja irgendwann mal, aber gestern wars bei Pingdom und Google gleich.
[Anm. Admin: wer so heißt, hat keine Webseite, Link entfernt]

Gravatar von Gebäudereinigung Frankfurt - via garvatar.org Gebäudereinigung Frankfurt
Kommentar 3
22. September 2010 um 16:25 Uhr

Danke für das kleine Manual,

ich hab das ma alles ordentlich durchgeackert und siehe da. Da kann man schon noch einiges finden um die Seiten schneller und besser zu machen.

Ganz wichtig ist meiner Meinung nach die Geschichte mit den CSS-Sprites.

TX
Daniel

Gravatar von Daniel - via garvatar.org Daniel →
Kommentar 4
19. Juni 2011 um 17:30 Uhr

Ich nutze auch das JQuery von Google. Da es aber 185kB groß ist, wird die Ladezeit von allen Analyse-Tools immer als “mangelhaft” erachtet. Was kann man da tun?!

Gravatar von Admin - via garvatar.org Admin →
Kommentar 5
21. Juli 2011 um 17:46 Uhr

Kommentar schreiben zu Ladezeit einer Webseite messen und verbessern

Kommentare werden erst nach manueller Freischaltung sichtbar.

Kommentar

KommentatorIn

(erforderlich)

(erforderlich, wird nicht angezeigt)

(optional)

Theresienstraße 28
D-94032 Passau

Tel.: +49 (0)851/ 966 31-31
Fax: +49 (0)851/ 966 31-41
E-Mail:

©  2001 − 2014  NETPROFIT  | Kontakt | AGB | Impressum