Website Ladezeiten testen: die 5 besten Tools & Tipps
Um User nicht zu frustrieren, müssen Webseiten schnell sein. Um die Ladezeit von Webseiten zu optimieren, nutzt man unterschiedliche Online-Dienste. Tools wie PageSpeed Insights, Lighthouse und Co. sind beim Testen von Website Ladezeiten hilfreich.
In diesem Beitrag listen wir die derzeit besten Tools für das Testen von Website Ladezeiten auf und geben Tipps zur Optimierung.
Inhaltsverzeichnis
Warum muss man Website Ladezeiten testen?
Regelmäßige Tests der eigenen Website sind wichtig, um erhöhte Ladezeiten rechtzeitig zu erkennen und die Gründe dafür zu identifizieren. Langsame Webseiten erhöhen die Absprungrate der Webseitenbesucher. Auch die Platzierung bei Google verschlechtert sich.
Die Absprungrate (Bounce Rate) gibt an, wie viele Prozent der Besucher die Webseite in kürzester Zeit wieder verlassen.
Ein Hauptgrund für dieses Verhalten sind zu lange Ladezeiten. Mittlerweile werden die meisten Webseiten über Smartphones aufgerufen. Auf Smartphones laden Webseiten langsamer als auf Desktop-Geräten. Der Grund dafür sind meist schlechtere Internet-Verbindungen.
Die meisten User springen nach spätestens 2 Sekunden ab, wenn eine Webseite nicht schnell genug geladen wird. Und genau das erhöht die Bounce Rate.
Das Problem dabei: eine erhöhte Absprungrate (mehr als 70%) wirkt sich negativ auf SEO (Suchmaschinenoptimierung) und das Ranking der Webseite bei Google aus.
Merkt Google, dass immer mehr User die Webseite schnell verlassen weil sie langsam lädt, wird Google die Webseite nicht mehr in den besten Suchergebnissen anzeigen. Und das führt zu schlechten Rankings.
Schlechte Rankings führen Umsatzrückgängen (Beispiel: Webshop). Potenzielle Kunden finden die Webseite nicht mehr oder es wird die Webseite der Konkurrenz bevorzugt.
Vorteile einer schnellen Webseite
Eine schnelle Webseite hat gleich mehrere Vorteile. Das Nutzererlebnis ist besser, die Absprungrate sinkt und das Ranking bei Suchmaschinen wird verbessert.
Verarbeitet Google eine Suchanfrage (z.B. „Fahrräder kaufen“) sucht es nach den passendsten Ergebnissen (= optimierte Webseiten mit dem passenden Inhalt) in der jeweiligen Region des Users.
Gibt es mehrere passende Anbieter entscheidet sich Google für den schnelleren. Im Zweifelsfall gewinnt also die schnellere Webseite.
Ein einfaches Beispiel sind Online-Shops: ein Shop der langsam lädt verärgert User und wird schrittweise von Google benachteiligt.
Es ist wichtig zu verstehen, dass die Ladezeit einer Webseite heute ein absolutes Schlüsselkriterium für jedes Unternehmen ist.
Der Unterschied von nur 1 Sekunde (Quelle: Original von shopify.com)
Und es ist keine einmalige Aufgabe eine Webseite zu programmieren und zu optimieren.
Da sich die Technik, Googles Kriterien und die Endgeräte der User ständig verändern, muss man in regelmäßigen Abständen prüfen ob die eigene Webseite im Vergleich zur Konkurrenz oder dem Branchendurchschnitt noch mithalten kann.
Im Idealfall optimiert man die Ladezeit einer Webseite systematisch mindestens einmal pro Jahr und bringt sie auf den neuesten Stand.
Das CMS (Content Management System) oder das verwendete Theme muss dazu meistens nicht geändert werden. Oft reicht es, problematische Plugins zu identifizieren, die Caching-Technik auf den neuesten Stand zu bringen und Dateien auszumisten, die das Rendering der Webseite blockieren.
Welche Werte sind gute Richtwerte?
3 Werte sind für die Optimierung der Ladezeit einer Webseite besonders wichtig: Die Antwortzeit des Servers, der Startzeitpunkt des Renderings und die Dauer für die Darstellung der Inhalte above the fold.
Antwortzeit des Servers
Die Antwortzeit des Servers steht für die Zeitdauer die der Server – also der Computer auf dem die Bestandteile der Webseite gespeichert sind – benötigt um zu reagieren und Dateien zur Verfügung zu stellen.
Die Antwortzeit des Servers hängt stark davon ab wie viele Webseiten gleichzeitig auf einem Server gespeichert und ausgeliefert werden.
Sehr viele Angebote von Billig-Hostern weisen leider schlechte Antwortzeiten auf. Das liegt daran, dass auf einem Server bis zu 200 Kunden und Webseiten gespeichert werden.
Die Antwortzeiten sind dann meistens hoch, was schlecht für die Ladezeit einer Webseite ist.
Lange Antwortzeiten lassen sich mit einem selbst verwalteten Server und guter Rechenleistung verringern.
Das ist die Optimal-Vorgabe von Google selbst. In der Praxis ist das sehr schwer zu schaffen. Von guten Werten kann daher auch um die 400-600 ms gesprochen werden.
Rendering Start
Rendering bezeichnet die grafische Darstellung der Seite, also den schrittweisen Aufbau von Text und Bildern, Farben und Elementen.
Das Rendering startet nachdem der Server geantwortet hat und die wichtigsten Dateien der Webseite geladen und verarbeitet wurden. Dann weiß der Browser (Chrome, IE, Firefox) des Users was zu tun ist und startet mit der Visualisierung der Webseite.
Je schneller das passiert, desto schneller sieht der User, dass sich auf der Webseite etwas tut. Würde der User 4 Sekunden lang nur einen weißen Bildschirm sehen ist die Wahrscheinlichkeit für einen Absprung sehr hoch.
Auch dieser Wert ist schwer zu schaffen – in der Praxis sind Werte unter 1,4 Sekunden ebenfalls sehr gut.
Visualisierung von above the fold Inhalten
Die Bezeichnung „above the fold“ steht für den Bereich, den der User beim Aufrufen der Webseite auf seinem Bildschirm als erstes sieht ohne dass er scrollen muss.
Above the fold ist der Bereich, der auf den ersten Blick sichtbar ist
Beim Rendering der Webseite gilt: Die zuerst sichtbaren Inhalte müssen bevorzugt und schneller visualisiert werden. Das ist eine der Hauptaufgaben der professionellen Optimierung von Ladezeiten.
Die restlichen Inhalte laden während der User die ersten Inhalte betrachtet. So entsteht für den User ein noch besseres Nutzererlebnis.
Es gibt natürlich noch eine Vielzahl anderer Kennzahlen, die für die Optimierung von Ladezeiten wichtig sind. Wir beschränken uns hier auf die 3 beschriebenen.
Top 5 Tools zum Testen der Ladezeit von Webseiten
Um die beschriebenen Kennzahlen zu ermitteln und Probleme bei den Ladezeiten von Webseiten zu identifizieren, nutzt man Online-Tools. Die besten 5 stellen wir hier vor.
testmysite.withgoogle.com: einfach und intuitiv für mobile Webseiten
Mit dem testmysite-Tool von Google verschafft man sich einen ersten Überblick. Man gibt dazu einfach die URL der Webseite ein und Google testet die mobile Variante der Webseite für Smartphones.
Dazu werden unter anderem unterschiedliche WLAN-Geschwindigkeiten ausprobiert.
Am Ende erhält man eine Ladezeit in Sekunden inkl. einer Einschätzung wie viele % der eigenen User aufgrund von langen Ladezeiten abspringen könnten.
Ergebnisse und Branchenvergleich der Webseite www.we-go-wild.com mit dem Dienst testmysite.withgoogle.com
Außerdem ist der Branchenvergleich sehr hilfreich. Google zeigt uns mit testmysite wie unsere Webseite im Vergleich zum Mitbewerb abschneidet.
Ein weiteres Feature: man kann – wenn man möchte – einen Bericht mit Verbesserungsmaßnahmen anfordern.
Pro: schnell, unkompliziert, Branchenvergleich
Contra: nur für mobile Webseiten
PageSpeed Insights: Googles Website Ladezeiten Tester
Der nächste Schritt ist eine Prüfung mit Googles PageSpeed Insights Tool. PageSpeed Insights ist umfangreicher als das testmysite-Tool. Hier erhält man detaillierte Auswertungen zu den Ladezeiten der Website auf Smartphones und Desktop-Geräten.
Für Laien ist das Tool etwas überfordernd, für SEO-Experten und Webentwickler allerdings bietet es schön aufbereitete Verbesserungspotenziale und -empfehlungen für die analysierte Website.
Eine unserer Webseiten (www.immobilienexperten.at) schneidet bei PageSpeed Insights sehr gut ab
Auch hier gibt man die URL der Website ein. Danach misst Google die Geschwindigkeit mit Seitenaufrufen. Dabei werden Kennzahlen (u.a. Server-Antwortzeit, Bildergrößen, Rendering Dauer uvm.) geprüft und ausgewertet.
Am Ende erhält man eine Bewertung zwischen 0 und 100 für Mobile und für Desktop.
Pro: hoher Detailgrad, priorisierte Verbesserungsempfehlungen
Contra: für Laien überfordernd, sehr technisch
Lighthouse: direkt in Google Chrome integriert
Das Lighthouse Tool ist direkt im Google Chrome Browser integriert. Zum Öffnen drückt man die Taste F12. In den Developer / Entwickler Tools wählt man den Punkt „Audit“ aus.
Die geöffnete Webseite wird mit dem Lighthouse Tool auf Performance, Zugänglichkeit und SEO getestet.
Das Analysetool Lighthouse wird direkt in den Entwicklertools von Chrome geöffnet
Lighthouse ist eine Eigenentwicklung von Google und wird auch für die PageSpeed Insights Tests herangezogen.
Pro: sehr hoher Detailgrad, direkt im Browser integriert, optimal für Entwickler
Contra: für Laien überfordernd, sehr technisch
Webpagetest.org: Detailanalyse der Websitegeschwindigkeit
Webpagetest.org ist eines unserer Tools der Wahl wenn es um sehr genaue Analysen und Standort abhängige Ladezeiten-Tests geht.
Das Projekt wird von mehreren prominenten IT-Firmen unterstützt – unter anderem von Google – und bietet sehr gute Auswertungen. Pro Testprozess werden 3 Durchgänge absolviert.
Webpagetest.org stellt die Ergebnisse übersichtlich in einem Wasserfallmodell dar
Die Reihenfolge, in der Dateien (JS, CSS, Bilder etc.) geladen werden, zeigt das Wasserfall-Modell. Damit wird es schnell deutlich welcher „Übeltäter“ die Webseite ausbremst.
Pro: sehr hoher Detailgrad, optimal für Entwickler, Wasserfall / Timing Darstellung
Contra: für Laien überfordernd, sehr technisch, Wartezeiten
GTmetrix: so genau, dass es weh tut
GTmetrix ist Webpagetest.org sehr ähnlich. Wie bei Webpagetest.org muss man auch hier mit kurzen und auch manchmal langen Wartezeiten rechnen.
Die Tests sind sehr genau und die Auswertung ist schonungslos. Bei diesen Tests Höchstwerte zu erreichen ist außerordentlich schwierig.
Setzt man externe Tools ein wie Google Analytics, Google Tag Manager oder Einbindungen von Werbepartnern, sind Bestwerte nur noch mit hohem Aufwand möglich.
GTmetrix zeigt die Performance einer Webseite übersichtlich auf einem Blick
Trotzdem hilft die genaue Aufschlüsselung dabei das Nutzererlebnis in punkto Ladezeiten zu verbessern – und das ist es, worum es schlussendlich geht.
Pro: sehr hoher Detailgrad, optimal für Entwickler, Wasserfall / Timing Darstellung
Contra: für Laien überfordernd, sehr technisch, Wartezeiten
Analyse erledigt – und jetzt?
Je nach Analyseergebnis sollte man mit der Optimierung beginnen. Die meisten Tools schlagen konkrete Maßnahmen dafür direkt vor.
Unsere Empfehlung ist, sich hier direkt an die Vorgaben von Google zu halten. Diese werden bis ins kleinste Detail (technisch) beschrieben. So kann man Step by Step dafür sorgen, dass die eigene Webseite schneller lädt.
Die größten Ladezeiten-Bremser
Grundsätzlich sind Elemente, die das Rendering – also das Laden des ersten sichtbaren Inhalts für den User – blockieren, die wichtigsten Baustellen für die Optimierung von Ladezeiten.
Zu den häufigsten Verursachern zählen:
Langsame Webserver
Ein bessere Hardware hilft natürlich so gut wie immer. Unsere Empfehlung: Billig-Anbieter beim Hosting meiden wenn man schnelle Webserver haben möchte. Hier spart man am falschen Platz.
Nicht optimierte Bildgrößen
Die Ladezeit erhöht sich durch Bilder die in hohen Auflösungen verwendet werden. Speziell Bilder mit Dateigrößen jenseits der 300kb sind ein Problem.
Sehen Sie den Unterschied? Wir auch nicht – Google allerdings schon! Links ist das Bild unkomprimiert mit 335 kb, rechts komprimiert mit 51,3 kb. Für das menschliche Auge ist der Unterschied kaum sichtbar.
Unsere Empfehlung: mit Bildbearbeitungsprogrammen wie Photoshop die Bilder auf max. 1200 x 1200 Pixel (oder darunter) skalieren und Ladezeiten einsparen. Die Bilder können zusätzlich noch mit Online-Tools wie compressjpeg.com komprimiert werden und sollten erst danach auf der Webseite eingefügt werden.
Responsive Webdesign hilft Bilder nur in der Größe geladen werden, in der sie tatsächlich am Display sichtbar sind. Hierzu hilft auch unser Beitrag zu den Webdesign Standards 2018.
Rendering-blockierendes Javascript Dateien
JavaScript ist für interaktive Funktionen notwendig. Die meisten größeren Webseiten benötigen JavaScript und das ist auch völlig OK.
Wichtig ist darauf zu achten, dass große JavaScript-Dateien das Rendering nicht blockieren. Ist eine eingebundene JavaScript Library (z.B. jQuery) groß, dauert es seine Zeit bis sie geladen ist.
Während dieser Zeit kann der Browser keine Inhalte für den User visualisieren.
Unser Tipp: JS-Dateien asynchron laden oder das „defer“ Attribut setzen. Nicht-kritische JS-Dateien werden dann erst geladen, wenn alles andere geladen wurde.
Nicht optimiertes CSS
CSS Dateien sind für die Anordnung von Webseiten-Elementen, Farben und vielem mehr zuständig.
Auch sie können schnell sehr groß werden. Unser Tipp: CSS-Dateien minifizieren (minify). Das ist sehr einfach mit Online-Tools wie cssminifier.com möglich.
Zusätzlich wichtig: CSS Dateien ausmisten und nur die wichtigsten Styling-Regeln verwenden.
Die Coverage-Auswertung in den Chrome Entwicklertools zeigt welche Styling-Regeln tatsächlich notwendig sind.
Rendering-blockierende CSS Dateien
Wer so richtig aufs Gaspedal treten will, der kann auch das unbedingt notwendige CSS („Critical Path CSS“) identifizieren und es im head der Seite laden.
Das restliche CSS kann später asynchron nachgeladen werden um das Rendering nicht zu blockieren.
Fehlendes Caching und Komprimierung (gzip, Cache, CDN)
Caching steht für das Zwischenspeichern von Dateien. Beim zweiten Aufruf einer Webseite, sind die Ladezeiten meistens deutlich kürzer. Warum? Weil Dateien zwischengespeichert wurden.
Fehlendes Caching (meistens eine Server-Einstellung) und Komprimierung (meistens in der htaccess Datei – zumindest bei Apache Servern – zu machen) führen zu erhöhten Ladezeiten.
Ein Gespräch mit dem Hosting-Partner oder der Webagentur des Vertrauens zahlt sich aus!
Was man selbst machen kann
Bildgrößen lassen sich selbst sehr gut optimieren.
Steigt man von Billig-Hostern auf professionelle Webspace Anbieter um, erhält man schnellere Server.
Wofür man Profis braucht
Profis benötigt man insbesondere für technische Arbeiten.
Hierzu zählen vor allem JS- und CSS-Optimierungen, Caching und Server-Einstellungen.
P.S.: Wir helfen gerne weiter: hello@webpunks.at
Hinweis: Im Titelbild wird ein Icon von Freepik von www.flaticon.com (CC 3.0 BY Lizenz) genutzt.
