Ladezeit einer Website messen mit Firefox oder Chrome

Ladezeit einer Website messen mit Firefox oder Chrome

Wer die Ladezeit seiner Website messen möchte, findet eine Menge kostenfreier Tools auf dem Markt. Dazu gehören unter anderem Pagespeed Insights, Pingdom oder GTmetrix. Doch Firefox und Chrome bieten direkt im Browser eine gute Möglichkeit, die Ladezeit einer Website zu messen. Wie das geht und worauf Sie achten sollten, erfahren Sie in diesem Beitrag.

Die Entwicklertools in Firefox und Chrome zum Messen der Ladezeit einer Website unterscheiden sich kaum in Darstellung und Handhabung. Nehmen Sie daher ihren favorisierten Browser zum Messen der Ladezeit. Öffnen Sie im Firefox oder Chrome die zu untersuchende Webseite und starten Sie mit der Taste F12 die Entwicklertools. Oder wählen Sie das passende Tastaturkürzel.

Tastaturkürzel zum Öffnen der Entwicklertools

Windows Tastenkombination macOS Tastenkombination
  • Chrome: STRG + ⇧ + I
  • Firefox: STRG + ⇧ + I
  • Beide: F12
  • Chrome: ⎇ + ⌘ + I
  • Firefox: ⎇ + ⌘ + I
  • Beide: F12

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 "Netzanalyse", "Netzwerkanalyse" oder "Network". Der Name variiert je nach Browser und Spracheinstellung.

Wählen Sie Netzanalyse (bzw. Netzwerkanalyse, Network).

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).

Checkbox bei "Disable Cache" aktivieren.
Seite noch einmal aktualisieren (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 gucken? 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.

Die Time to First Byte (TTFB) zeigt an, wie lange der Server brauchte, um Ihre Seite auszuliefern.

Analyse der Ladezeit

Die Ergebnisse der Ladezeit werden untereinander aufgelistet. Ist nichts anderes eingestellt, erscheinen sie 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 Ladezeit der einzelnen Elemente. Unter der Liste gibt es drei Werte, die eine erste Aussage zur Ladezeit 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.

Listenansicht und Detailansicht

Die Listenansicht gibt eine Übersicht über alle Element, 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öglich 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 für die Ladezeit.

  • 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, 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.
  • 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 bei Wunsch einfach aktiviert werden.

Fazit: Ladezeit messen mit Firefox oder Chrome

Das waren jetzt einige Aspekte, die über das Messen der Ladezeit in Firefox oder Chrome dargestellt werden. Ein guter Ausgangspunkt ist es, die TTFB zu ermitteln und die Gesamtladezeit zu betrachten. Ziehen Sie die TTFB von der gesamten Ladezeit 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.

Testen Sie uns 14 Tage kostenlos Jetzt testen