Unter der Ladezeit versteht man die Zeit, die gebraucht wird bis eine Webseite ab dem Aufruf braucht, bis sie vollständig geladen ist. Seit dem rasanten Anstieg der Handynutzung wurde die Ladezeit ein immer wichtiger Faktor. Seit 2010 ist diese ein offizieller Rankingfaktor.
Man unterscheidet dabei zwischen TimeToFirstByte (TTFB oder First-Byte) und der gesamten Übertragungszeit. Bei dem Messwert TimeToFirstByte wird die Antwortgeschwindigkeit des Servers gemessen, bzw. die Zeit, die vergeht, bis das erste Byte vom Server zurückgeliefert wird. Dabei wird die Downloadgeschwindigkeit von Dokumenten außen vor gelassen. Braucht der Server länger als eine Sekunde, bis er das erste Byte überträgt, sollte man den Server überwachen. Es kann sein, dass er zum Zeitpunkt des Messvorgangs nicht performant, also leistungsfähig genug war. Bei der gesamten Übertragungszeit misst man die Zeit, bis die Webseite komplett geladen hat. Eine Webseite mit einer Ladegeschwindigkeit zwischen 1 und 3 Sekunden ist in einem guten Normbereich.
Einflussfaktoren der Ladezeit
Es gibt verschiedene Einflussfaktoren, die die Ladezeit der Webseite beeinflussen können. Die Geschwindigkeit, mit der ein Server die Seite bereitstellt, hängt von der Berechnung der Anfrage auf dem Server ab. Zusätzlich hängt der Pagespeed von der Größe einzelner Seitenbestandteile ab. Alle eingebunden Ressourcen, wie Daten, Dokumente und Bilder, verbrauchen Übertragungszeit. Auch sonstige eingebundene Elemente, z.B. Plug-Ins und Skripte, haben einen großen Einfluss auf den Pagespeed und sollten daher optimiert werden. Des Weiteren kann man den Quelltext, bzw. den HTML-Code stark optimieren.
Website Ladezeit optimieren
Mit vielen Tricks und Komprimierungen kann man die Ladezeit um einige Sekunden verkürzen. Die Datenkomprimierung führt zu einer Verringerung des Datentraffics, was für Webmaster, deren Hoster den monatlichen Datentraffic beschränken, ein Vorteil ist. Bei der Messung der Ladezeit kann man nach dem Messwert TimeToFirstByte oder der gesamten Übertragungszeit gehen (oben beschrieben).
Optimierung nach TimeToFirstByte (TTBT)
Unter den Bereich fallen die HTML- und Bilder-Komprimierung, das Caching, das Auslagern von CSS- und JavaScript-Dateien und der Verzicht auf große Dateien.
Bei der HTML-Komprimierung löscht man alle Leerzeichen und unnötigen Meta-Informationen, die nicht mehr benötigt werden. Bei der Komprimierung der Bilder reicht es nicht im Quellcode die Bild-Maße zu verkleinern. Um das Bild so gut wie möglich zu komprimieren, sollte man das Bild so klein komprimieren, wie es später auf der Webseite angezeigt werden soll. Es ist nutzlos ein 600 x 600px großes Bild auf den Server hochzuladen, wenn man es später kleiner skaliert. Man sollte daher auf eine sinnvolle Abmessung achten und unterschiedliche Ausgabeformate, wie JPEG, PNG oder GIF, testen.
Bilder so klein wie möglich komprimieren – Jedes Byte zählt!
Zusätzlich kann man jedem Bild die Werte „width“ und „height“ zuweisen, da der Browser den angegeben Platz auf der Webseite schon beim Laden reserviert, ohne das Bild schon zu haben. Das Bild lädt dann mit einer kurzen Verzögerung nach. Zum einen können so die Bild-Elemente schneller geladen werden und zum anderen verbessert das erheblich das Nutzerempfinden, da der Nutzer die Ladegeschwindigkeit schneller erlebt.
Mit Css-Sprites meint man Grafikdateien, die Symbole, Bilder und Icons beinhalten. Mit dem Sprit kann man die Ladezeit von Webseiten minimieren. Die einzelnen Elemente der Css-Sprite kann man mit Css-Befehlen ein und ausblenden. Die Bildelemente sind dann statisch in der Webseite integriert und laden erheblich schneller, als wenn man sie einzeln laden würde.
Für die Verringerung von CSS- und JavaScript-Dateien verwendet man IDs, die den Bereich in der HTML-Datei kennzeichnen, auf den man zugreifen möchte. Zudem kann man mit Tag-Definitionen innerhalb der IDs arbeiten. Für wiederkehrende CSS-Anwendungen können statt der IDs Klassen vergeben werden und auf diese wiederholt zugreifen. Innerhalb der HTML-Datei sollte man auf CSS Befehle, zum Beispiel style-Attribute, verzichten (inline CSS). Css- und JavaScript-Dateien werden grundsätzlich ausgelagert, da einzelne Style-Befehle oder Scripte viel Zeit zum Laden brauchen. Für eine noch schnellere Ladegeschwindigkeit komprimiert man die ausgelagerten Styles und Scripte. In regelmäßigen Abständen sollten die Dateien kontrolliert werden, zum Beispiel darauf, ob man alte Befehle oder auskommentierte Felder löschen kann.
Auf die Einbindung von großen Inhalten, wie Flash, sollte man zu Gunsten des Pagespeeds verzichten. Flash braucht eine lange Ladezeit und in der Zeit der mobilen Endgeräte können viele Webseitenbesucher Flash oft nicht laden oder haben Flash geblockt. Ebenfalls sollte auf DNS-Abfragen (Dateien von anderen Domains abfragen) weitestgehend verzichtet werden, da sie viel Zeit und Ressourcen kosten. Man sollte lieber auf allgemeine Ressourcen verweisen, die wahrscheinlich schon einmal geladen wurden und im Cache gespeichert wurden.
Nicht so: <script type=”text/javascript” src=”/js/jquery.min.js”> </script>
Lieber so: <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”> </script>
Mit dem Caching werden Ressourcen, wie Bilder, Dateien und Dokumente, beim erstmaligen Laden in dem Cache zwischengespeichert. Die Zwischenspeicherung ist zeitlich begrenzbar. Wenn die Seite zu einem anderen Zeitpunkt erneut vom Webseitenbesucher geladen wird, wird der gespeicherte Cache geladen und die zuvor geladenen Ressourcen sind ohne eine erneute Serveranfrage vorhanden. Je mehr Daten aus dem Cache geladen werden können, desto mehr wird der Server entlastet. Das Laden vom Cache ist schneller als die Abfrage beim Server, daher wird die Webseite bei dieser Methode schneller geladen. Ein Anstieg des Pagespeeds steigert das Nutzererlebnis besonders hoch und die Besucher kehren gerne auf die Webseite wieder zurück. Das Caching kann dabei auf verschiedenen Arten erfolgen.
Optimierung nach der gesamten Übertragungszeit
Um die gesamte Übertragungszeit zu optimieren, muss der Server optimiert werden. Dies beinhaltet die Optimierung des Codes, der Datenbank und der Leistung.
Im Code (Quellcode) steckt ein hohes Einsparungspotenzial. Bei der Erstellung sollte weitestgehend auf HTML-Kommentare verzichtet werden. Solch auskommentierte Bereiche und unnötige Leerzeichen sollten gelöscht werden, jedoch darf die Lesbarkeit des Codes nicht darunter leiden. Neue Templates und Frameworks können mit einem Relaunch der Webseite erstellt werden. Veraltete Befehle im Code, z.B. veraltete HTML-Tags oder Attribute, können dabei aktualisiert werden. Ebenfalls sollte auf Tabellen verzichtet werden. Diese können extern erstellt und als komprimiertes Bild eingefügt werden. Die Bilder werden in einem zentralen komprimierten Ordner abgelegt (ausgelagert) und einzeln darauf zugegriffen. Css-Styles haben im HTML-Dokument nichts zu suchen. Die CSS-Befehle werden in eine CSS-Datei zusammengefasst und ausgelagert. Dies spart Platz im Code und man benötigt nur einen http-Request für das gesamte CSS-Dokument.
Kleiner Tipp: Wichtige Inhalte auf der Webseite sollten grundsätzlich zuerst geladen werden. Oben im Code stehen dabei die relevanten Inhalte und die Platzreservierungen für die Bilder oder anderen medialen Inhalte. Diese Methode bewirkt ein positives Nutzererlebnis.
Die Datenbank wird mit regelmäßigen Backups und Komprimierungen optimiert. Mit der Caching-Methode entlastet man die Datenbank enorm. Die Webseiten können dank Caching schneller Laden und der Benutzer surft länger auf der Webseite als bei einer langsamen Ladezeit.
Um die Leistung zu optimieren, müssen die HTTP-Request reduziert werden. HTTP-Request werden auch Datenübertragungsprotokoll genannt. Sie übertragen Daten vom Server aus dem Internet zu einem Client mittels Browser. Wenn viele Daten abgerufen werden müssen, wie CSS-Styles, Scripts oder Bilder, werden viele HTTP-Requests benötigt, die für eine längere Ladezeit sorgen. Jede Datei muss mit einem Request angefragt und übertragen werden. daher ist es ratsam, so wenige Request wie möglich für die vollständige Webseite zu benötigen.
Request-Anzahl ermitteln:
- Im Chrome Browser Rechtsklick
- Klick auf „Element untersuchen“
- Den Reiter „Network“ wählen
- Dokument/Webseite neu laden
- Unten Links wird die Anzahl der HTTP-Requests für die Webseite angezeigt
Auswirkungen der Ladezeit auf SEO
Der Pagespeed ist zwar kein großer und offiziell erst seit 2010 ein Rankingfaktor, jedoch hat er in Bezug auf den SEO-Bereich große Auswirkungen. Die Auswirkungen kann man in die technischen Auswirkungen bezogen auf das Ranking und in die psychologischen Auswirkungen bezogen auf das Userverhalten (User Experience) unterteilen. Zukünftig wird der Rankingfaktor Ladezeit immer mehr an Bedeutung gewinnen. Daher gilt es ihn immer weiter und regelmäßig zu optimieren.
Technische Auswirkungen
Ist die Ladezeit der eigenen Webseite schlechter, als die der Konkurrenten, werden sie vor der eigenen Webseite in den SERPs gelistet. Die Wahrscheinlichkeit, dass deren Webseite eher von den Usern angeklickt wird, ist um einiges höher, als die eigene Klickrate stärken zu können. Suchmaschinen, wie Google, bestrafen Webseiten mit einer sehr langsamen Ladezeit, indem die Webseiten automatisch nach hinten in die SERPs verbannt werden. Eine lange Ladezeit beeinflusst das Usererlebnis negativ und Google möchte, dass die User schnell die gewünschten Suchergebnisse finden. Diese Auswirkung kann man besonders bei News-Seiten beobachten. Wenn 20 News-Seiten über das gleiche Thema berichten, spielt der Faktor Ladezeit eine große Rolle. Wenn sich Webseiten wie in diesem Fall ähneln, wird Google immer die mit der schnelleren Ladezeit bevorzugen, um das Nutzererlebnis nicht zu gefährden.
Ein weiterer Vorteil einer schnellen Ladezeit ist der Kostenersparnis-Faktor. Vor allem große Suchmaschinen Betreiber sparen hohe Kosten, wenn die Webseite eine schnellere Ladezeit hat, da sie schneller und effizienter vom Suchmaschinen-Roboter gecrawlt werden kann. Die Roboter können Web-Dokumente schneller crawlen, wenn die Ladezeit gut ist. In dem Fall spricht man auch von einer guten Crawlability.
Psychologische Auswirkungen
Ein guter Pagespeed der Webseite wird heutzutage immer wichtiger, da immer mehr mit dem Handy und anderen mobilen Endgeräten im Internet surfen. Lange Ladezeiten bewirken besonders dort ein schlechtes Usererlebnis, da die Nutzer je nach Empfang schon eine Verzögerung haben. Lädt die Webseite hingegen schnell, bewirkt dies ein besseres Nutzererlebnis (User Experience), eine längere Verweildauer auf der Webseite (Time on Site) und eine geringere Absprungsrate (Bounce Rate). Schlechte Usersignale, wie eine hohe Absprungsrate, werden von Google gemessen und fallen stark in das Webseiten-Ranking ein. Bei Online-Shops wirkt sich eine gute User Experience positiv auf die Konversionsrate aus, d.h. die Besucher der Webseite werden eher zu einem Kunden, wenn sie mit der Ladezeit der Webseite zufrieden sind. Das liegt daran, dass sie bei schnellen Ladezeiten von neuen Seiten und Bildern gerne weitersurfen und allgemein zufriedener gestimmt sind. Daher ist es neben einem responsive Layout wichtig, dass man wichtige Inhalte und die Platzhalter für die Bilder zuerst lädt.
Optimierung mit Google
Google bietet allen Webmastern kostenlos die Möglichkeit, die eigene Seite zu optimieren, da Google selber möchte, dass stets die besten Webseiten oben in den SERPs gelistet sind. Den Pagespeed der eigenen Webseite kann man zum einen mit Google Analytics und Google PageSpeed Insights kontrollieren.
Mit Google Analytics kannst du unteranderem die Ladezeit der eigenen Webseite prüfen. Da die Ladezeit in einigen Fällen von den Browsern beeinflusst wird, kann man sich in der Ansicht alle vorhandenen technischen Probleme, die die Ladezeit beeinflussen, sortiert nach den Browsern anzeigen lassen. Außerdem berechnet Google die Ladezeit aller Seiten einzeln, so dass man sich konkret alle Fehler und Optimierungsvorschläge (z.B. Inhalte minimieren, Bilder komprimieren) zu den Seiten anschauen kann. Zusätzlich bietet Google Analytics viele Tipps und Vorschläge, wie man den Pagespeed steigern kann.
Dauert einem die Anmeldung und Analyse bei Google Analytics zu lange, kann man online mit dem Google Insights Tool nur anhand der Internetadresse sich die Ladezeit jeder Webseite berechnen lassen. Das Google-Tool führt dabei einen Live-Check durch und prüft die Ladegeschwindigkeit an mobilen Endgeräten und Desktop-Systemen. Die maximale Punktzahl ist 100. Mit der Liste der Prüfkriterien und allen Optimierungsvorschlägen kann man systematisch die Webseite optimieren.
