Ladezeit einer Website messen mit Firefox oder Chrome

Die Entwicklertools lassen sich unten, rechts, links oder im eigenen Fenster anzeigen. Möchten Sie die Ansicht ändern, klicken Sie auf die drei Punkte auf der rechten Seite und treffen Sie Ihre Auswahl.

Ist die Ansicht wie gewünscht, klicken Sie auf den Reiter "Netzwerk", "Netzwerkanalyse" oder "Network". Der Name variiert je nach Browser und Spracheinstellung. Im Übrigen sind die Entwicklertools in Chrome seit einiger Zeit auch auf Deutsch verfügbar. Die Sprache kann hier direkt in den Entwicklertools gewählt werden, unabhängig von den Spracheinstellungen des Browsers. Beim Firefox hingegen richtet sie sich nach den allgemeinen Browsereinstellungen.

Checkbox "Disable Cache" aktivieren

Vor der Messung des Pagespeeds muss der Haken bei "Disable Cache" / "Cache deaktivieren" gesetzt werden. Das hat zur Folge, dass in dem Tab, in dem die Entwicklertools geöffnet sind, der Browsercache deaktiviert wird. Damit beeinflussen keine gecachten Informationen oder Dateien die Ergebnisse beim Testen. Sobald die Entwicklertools geschlossen werden, lädt der Browser die Daten wieder aus dem Cache. Beim nächsten Öffnen sollte die Checkbox "Disable Cache" / "Cache deaktivieren" weiterhin aktiviert sein. Um sicher zu gehen, werfen Sie einen kurzen, prüfenden Blick darauf. Wenn Sie die Entwicklertools das erste Mal aktiv nutzen, setzen Sie den Haken und aktualisieren Sie die Seite (zum Beispiel mit der Taste F5).

Time To First Byte

Die Entwicklertools sind geöffnet und alle Einstellungen vorgenommen. Im Anschluss wurde die Seite noch einmal aktualisiert. Daraufhin erhalten Sie das Ergebnis der Messung für die Ladezeit im Firefox oder Chrome. Die Anzeige erfolgt in einer Liste und wird durch ein übersichtliches Wasserfall-Diagramm ergänzt. Worauf sollten Sie jetzt achten? Was sind die wichtigen Angaben? Grundsätzlich lässt sich die Ladezeit einer Webseite in verschiedene Messwerte einteilen. Insgesamt gibt es vier:

• Time To First Byte (TTFB): Die TTFB umfasst den Zeitraum vom Aufruf der Webseite durch den User bis zum ersten vom Webserver geladenen Byte.
• First Contentful Paint (FCP): Hier handelt es sich um den Zeitpunkt, an dem der Browser die einzelnen Elemente (zum Beispiel Bilder) anzeigt.
• First Meaningful Paint (FMP): Der FMP wird erreicht, wenn der User den Eindruck hat, dass die Ladezeit der Webseite abgeschlossen ist.
• Time To Interactive (TTI): Zu diesem Zeitpunkt hat sich die Webseite so weit aufgebaut, dass eine Interaktion möglich ist.

Die TTFB ist der erste Wert im Wasserfall-Diagramm und die anderen kommen in der Abfolge. Es handelt sich dabei um das "HTML Dokument" - Typ "html". Die Zeitangabe in dieser Zeile ist die TTFB. Dieser Wert zeigt an, wie lange der Server brauchte, um Ihre Seite auszuliefern. Neben dem Server beeinflussen auch die für die Website verwendete Software und deren Konfiguration diesen Wert. Sprechen wir als Hoster von einem schnellen Server, dann liegt dieser Aussage die TTFB zugrunde.

Analyse der Ladezeit

Die Ergebnisse der Analyse werden untereinander aufgelistet. Ist nichts anderes eingestellt, erscheinen die Elemente in der Reihenfolge, in der sie geladen werden. Die Liste gibt an, um welches Element es sich handelt, den Typ, die Größe und die Ladezeit. Rechts befindet sich ein übersichtliches Wasserfall-Diagramm. Dieses bietet einen visuellen Blick auf die Ladezeiten der einzelnen Elemente. Unter der Liste gibt es drei Werte, die eine erste Aussage zur Ladegeschwindigkeit einer Webseite zulassen:

• Anfragen / Requests: Jedes Element auf der Webseite stellt einen Request dar und kostet Ladezeit. Es sollten demnach so wenig Requests wie möglich erfolgen. Ist diese Zahl relativ hoch, wirkt sich das auf die Ladezeit aus. Versuchen Sie in dem Fall die Requests zu verringern.
• Datenmenge: Schauen Sie auf die Größe der zu übertragenden Datenmenge. Ein hohes Datenvolumen geht ebenfalls zulasten der Ladezeit. Reduzieren Sie die Größe der Bilder und anderer Dateien auf der Webseite so weit wie möglich.
• DOMContentLoaded: Dieses Event wird ausgelöst, wenn das HTML-Dokument vollständig geladen wurde. Das DOMContentLoaded gibt an, wann eine geladene Seite komplett zu erkennen ist. Dieser Wert steht demnach nicht für die Serverleistung.

In Edge weichen die Bezeichnungen hier etwas ab, liefern Ihnen jedoch die gleichen Informationen wie Chrome und Firefox.

Listenansicht und Detailansicht

Die Listenansicht gibt eine Übersicht über alle Elemente, die beim Seitenaufbau geladen werden. Für jeden einzelnen Punkt lassen sich Details anschauen und prüfen. Dafür klicken Sie in die Zeile, die Sie betrachten möchten und wählen hier den Reiter "Zeit" oder "Timing". In der Ansicht, die sich öffnet, zeigt beispielsweise der Wert "Warten", wie lange es bis zur TTFB dieses Elements dauert. Die Detailansicht gibt außerdem Aufschluss darüber, ob durch DNS-Abfragen oder TLS-Konfigurationen Verzögerungen in der Ladezeit dieses Elements entstehen. Diese ersten Angaben zeigen, bei welchen Elementen eine Optimierung möglich ist. Außerdem finden Sie dort Hinweise auf sogenannte Blocker, worauf wir im nächsten Punkt noch näher eingehen.

Probleme bei der Ladezeit erkennen

Bei der Messung der Ladezeit mit Firefox und Chrome lassen sich Elemente mit einer sehr langen Ladezeit schnell identifizieren. Scrollen Sie durch das Wasserfall-Diagramm. Sie sehen auf einen Blick, welche Elemente eine überdurchschnittliche Ladezeit im Vergleich zu den anderen Elementen haben. Es kann sich dabei zum einen um einen Bestandteil auf der eigenen Seite handeln. Zum anderen stecken dahinter oftmals Angebote von Dienstleistern, Plugins von Drittanbietern, Cookies, Analytics, ein Live-Chat oder ähnliche Faktoren. Wo das jeweilige Problem liegt, können Sie sich direkt mit einem Klick auf die Zeile in der Detailansicht anschauen (siehe Screenshot unten).

Auf dem Screenshot sehen Sie in der Detailansicht einen sogenannten "Blocker". Diese werden häufig verursacht, wenn im Browser alle verfügbaren Verbindungen belegt sind. Alle weiteren Versuche eine Verbindung aufzubauen, werden dann "blockiert". Eine weitere Ursache für Blocker können Plugins sein, deren Abfrage auf dem externen Server sehr lange dauert. Blocker beeinflussen die Ladezeit negativ und sollten natürlich vermieden werden. Das könnte durch das Entfernen des Elements möglich sein (wenn möglich) oder durch asynchrones Laden der Webseite.

Die Untersuchung der Ladezeit im Firefox oder Chrome ermöglicht somit eine sehr detaillierte Untersuchung auf Basis der einzelnen Elemente. Mit einer Optimierung der einzelnen Elemente verbessert sich gegebenenfalls auch die Gesamtladezeit. Im nächsten Punkt haben wir noch weitere Tipps für Sie parat.

OnPage Optimierung

Als Hoster sorgen wir für schnelle Server, die zu einer geringen Time To First Byte führen. Die Website- oder Shop-Konfiguration liegt nicht mehr in unserer Hand. Hier gibt es für Betreiber von Shops und Websites viel Potenzial die Ladezeit zu verbessern. Dafür kann die eben beschriebene Detailanalyse in Firefox und Chrome genutzt werden. Doch es gibt noch weitere OnPage-Faktoren, die die Ladezeit beeinflussen. Werden diese angepasst, bringt das aus unserer Erfahrung heraus einen positiven Effekt. Daher möchten wir eine Auswahl vorstellen.

• Shop-Version oder CMS: Haben Sie eine alte Shopversion im Einsatz oder handelt es sich um ein altes CMS? Prüfen Sie bitte, ob die Möglichkeit besteht, ein Update durchzuführen. Neuere Versionen geben meist einen Schub für die Ladezeit und oft auch für die Sicherheit, da neuere Versionen entsprechende Verbesserungen mit sich bringen.
• PHP-Version: Ältere Versionen von Shops und CMS sind nicht mit neueren PHP-Versionen kompatibel. Neuere PHP-Versionen haben aber eine verbesserte Ladezeit. Sobald Sie also das Shopsystem oder CMS updaten, können Sie auch eine neue PHP-Version einsetzen. In Kombination entsteht somit ein doppelter Effekt.
• Plugins: Das Verwenden von Plugins kann das Arbeiten mit einem Online-Shop oder CMS deutlich vereinfachen. Die zusätzliche Funktionalität sorgt aber auch für erhöhten Rechenaufwand und kann so die Ladezeit verschlechtern. Daher sollten Sie bei jedem Plugin prüfen, ob es tatsächlich notwendig ist.
• HTTP/2: Die Protokolle HTTP/1 und HTTP/1.1 sind die Vorgänger. Hier musste der Browser meist für jede einzelne Datei eine eigene Verbindung aufbauen. HTTP/2 wickelt die Kommunikation zwischen Browser und Server über eine einzige Verbindung ab und ist dadurch viel schneller. Bei uns ist HTTP/2 auf den Servern von Haus aus dabei und kann auf Wunsch einfach aktiviert werden.
• Serverseitige Komprimierung: Wenn die Website-Daten vor der Übertragung an den Browser komprimiert werden, wirkt sich das positiv auf den Pagespeed aus. Dazu stellen wir auf unseren Servern die beiden Kompressionsverfahren Brotli und gzip bereit.

Fazit: Ladezeit messen mit Firefox oder Chrome

Das waren jetzt einige Aspekte, die über das Messen der Ladezeit in Firefox oder Chrome dargestellt werden und in Edge in gleicher Form zu finden sind. Ein guter Ausgangspunkt ist es, die TTFB zu ermitteln und die Gesamtladezeit zu betrachten. Ziehen Sie die TTFB von der gesamten Zeit ab, bleibt die Ladezeit, die durch die Website verursacht wird. Diese liegt nicht in der Hand des Hosters und lässt sich meist durch OnPage-Optimierungen verbessern. Wichtig ist ein Blick auf die Anzahl der Requests und diese gering zu halten. Die Größe der Gesamtdatenmenge sollte so minimal wie möglich sein. Verschaffen Sie sich über das Wasserfall-Diagramm einen Überblick über die Probleme auf der Webseite.

Richtig eingesetzt, bieten die Browser Firefox und Chrome eine schnelle Möglichkeit die Ladezeit der Webseite zu messen. Durch die Detailansicht lassen sich vor allem Probleme auf der Ebene der einzelnen Elemente gut erkennen. Damit erhalten Sie sehr konkrete Tipps zur Optimierung. Durch das Wasserfall-Diagramm werden Issues bei der Ladezeit auf einen Blick identifiziert. Und das Beste: Sie springen für die Anlayse nicht zwischen zwei Tabs hin und her, sondern führen diese direkt im geöffneten Browserfenster durch.