Messen der Website-Leistung mit den Google Chrome Developer Tools

In diesem Artikel wird beschrieben, wie Sie mit den Entwicklertools von Google Chrome die Leistung einer Website messen und überwachen.

Verwenden der Chrome-Entwicklertools

Der Google Chrome-Webbrowser enthält Entwicklertools, eine Funktion, mit der Webentwickler Probleme mit HTML, CSS und JavaScript beheben können:

• Um auf Entwicklertools unter Microsoft Windows oder Linux zuzugreifen, drücken Sie Strg+ Umschalt+I.
• Um auf Entwicklertools unter Apple Mac OS X zuzugreifen, drücken Sie Wahl + Befehl+I.

In der folgenden Abbildung werden die auf der Google-Startseite geöffneten Entwicklertools angezeigt:

Auf der Registerkarte Netzwerk im Bereich Entwicklertools listet Chrome alle Verbindungen für die aktuelle Seite auf. Um eine bestimmte Seite zu testen, öffnen Sie die Entwicklertools und navigieren Sie zu der Seite, die Sie testen möchten. Alternativ, wenn Sie die aktuelle Seite testen möchten, aktualisieren Sie einfach die Seite.

Chrome zeigt Informationen für jede Seitenressource und ihre Anforderung an:

Name: Der Name oder die URL der angeforderten Ressource.

Methode: Die HTTP-Methode (GET oder POST).

Status: Der vom Server zurückgegebene HTTP-Statuscode.

Type: Der MIME-Typ der Ressource.

Initiator: Der an den Server gesendete Referer; dies ist normalerweise die URL der Seite, die Sie anzeigen.

Größe: Die Größe der vom Browser empfangenen Ressource (wenn die Seite vom Server komprimiert wurde, ist dieser Wert kleiner als die tatsächliche Dateigröße).

Zeit: Die Gesamtzeit zum Abrufen der Ressource, einschließlich DNS-Suche und Downloadzeit.

Zeitleiste: Die Zeitleiste ist eine “Wasserfall” -Zeitrafferansicht jeder Anfrage. Wenn Sie den Mauszeiger über einen Balken auf dem Wasserfall bewegen, wird ein Tooltip mit einer detaillierten Aufschlüsselung der Downloadzeit angezeigt:

• Blockieren: Dies beinhaltet die Zeit für die DNS-Suche, den SSL-Handshake und das Herstellen einer Verbindung zum Server.
• Senden: Dies beinhaltet die Zeit, um die Anforderung mit allen Anforderungsdaten an den Server zu senden und eine Bestätigung vom Server zu erhalten, dass die Anforderung empfangen wurde.
• Warten: Dies umfasst die Zeit, die der Server benötigt, um den zu servierenden Inhalt zu rendern und an den Browser zu senden.
• Empfangen: Dies beinhaltet die Zeit, die zum Herunterladen des Inhalts benötigt wird.

Die Kombination von Warte- und Empfangszeiten ist der wichtigste Faktor bei der Bestimmung der Site-Geschwindigkeit. Die Geschwindigkeit der Internetverbindung kann sich jedoch auch auf die Leistung auswirken, daher sollten Sie beim Einrichten von Site-Performance-Benchmarks immer die Zeiten vom selben Standort aus vergleichen.

Am unteren Rand der Registerkarte Netzwerk befindet sich eine Zusammenfassung des Seitenladevorgangs. Diese Zusammenfassung enthält die Gesamtzahl der Anforderungen, die Gesamtgröße der gesamten Seite einschließlich ihrer Ressourcen und eine Aufschlüsselung der Zeit, die für das Rendern der Seite im Browser aufgewendet wurde.

Der Wert first time ist die Gesamtzeit, die für das Laden des gesamten Inhalts der Seite aufgewendet wurde. Dieser Wert enthält Inhalte, die von JavaScript geladen werden, nachdem die Seite gerendert wurde.

Die beiden Zeitwerte in den Klammern sind Ereignisse, die für die Site-Optimierung wichtig sind:

• laden: Dieses Ereignis ist die Zeit zum Laden der Seite, einschließlich aller JavaScript-, CSS- und Bilddateien, die sich im ursprünglichen HTML-Dokument befinden. Dieses Ereignis dauert im Allgemeinen länger als das DOMContentLoaded-Ereignis.
• DOMContentLoaded: Dieses Ereignis stellt die von einem Benutzer wahrgenommene Zeit zum Laden der Seite dar. Es ist die Zeit, die Seite wie im Originaldokument beschrieben zu rendern, bevor JavaScript zusätzliche Ressourcen anfordert. Diese Zeit wird gespeichert, wenn der Browser das DOMContentLoaded Ereignis in JavaScript auslöst. (Ein Beispiel für eine Ressource, die außerhalb des DOM angefordert wird, ist Google Analytics.)