Wie verwende ich die Netzwerkansicht in den Dev Tools?

In der Netzwerkansicht kannst du die Netzwerkanforderungen sehen und analysieren, die jede einzelne Page Load innerhalb der Session eines:einer einzelnen Benutzer:in ausmacht. Du kannst diese Ansicht verwenden, um die Ursachen für langsame Seiten zu untersuchen und Performance-Bugs zu identifizieren.

Netzwerkanfragen: Die Grundlagen

Wenn wir im Zusammenhang mit der Netzwerkansicht von „Anfragen“ sprechen, meinen wir die zeilenweisen Aufrufe der Dateien, die eine Webseite aufbauen oder Informationen vom Browser an ein anderes System senden. Jede bestimmte Webseite in der Session deines:deiner Besucher:in kann Anfragen stellen für: 

• HTML (das Dokument, das die Struktur und den Inhalt einer Webseite festlegt)
• Schriftarten (Typografie und Symbolsätze)
• CSS (Stile)
• JavaScript (Skripte, die die Seite interaktiv machen oder Daten an andere Systeme senden)
• Medien (Bilder und Videos)

Sie kann auch Daten zwischen Datenbanken oder APIs hin- und her senden (Systeme, die es deiner Website ermöglichen, Daten mit Tools von Drittanbietern zu teilen).

Wenn du die Netzwerkansicht noch nie in deinem eigenen Browser ausprobiert hast, solltest du es versuchen!

In gängigen Web-Browsern wie Google Chrome oder Firefox kannst du mit der rechten Maustaste klicken und dann auf „Untersuchen“ oder „Element untersuchen“ klicken, um die Entwicklertools in deinem Browser zu öffnen.

Navigiere dann in den Entwicklertools zu „Netzwerk“ und lade die Seite neu. Wenn du dies tust, solltest du alle Anfragen, aus denen der Page Load besteht, auf einer Zeitleiste sehen. Dies ist die Netzwerkansicht, die allgemein als Wasserfalldiagramm bezeichnet wird. Sie ist hilfreich, um zu verstehen, wie schnell eine Website geladen wird.

_{Hier siehst du die Netzwerkansicht in einem Google-Chrome-Browser.}

Das Öffnen der Netzwerkansicht in Fullstory ähnelt dem Öffnen der Netzwerkansicht in gängigen Web-Browsern.

Die Netzwerkansicht in Fullstory

Klicke in einer beliebigen Session auf Dev Tools > Netzwerk , um die Netzwerkansicht für eine einzelne Seite innerhalb einer einzelnen Session zu öffnen.

Navigieren in der Netzwerkansicht für Sessions mit mehreren Seiten

In Fullstory kann die Session eines:einer einzelnen Kund:in Navigationen zu mehreren Seiten enthalten, aber die Registerkarte „Netzwerk“ und das Wasserfalldiagramm beziehen sich auf eine einzelne URL – nicht auf die gesamte Session. 

Wenn die Netzwerkansicht geöffnet ist, werden blaue Seitensymbole auf der Zeitachse angezeigt, um auf Ereignisse hinzuweisen, bei denen der:die Kund:in eine neue Seite geöffnet hat. Verwende bei Sessions mit mehreren Seiten das blaue Symbol „–“, um das Wasserfalldiagramm für eine Seite zu reduzieren, und das blaue Symbol „+“, um ein Wasserfalldiagramm für eine Seite zu öffnen.

Seiten in der Netzwerkansicht entsprechen den Navigationsereignissen „Besuchte Seite“, die im Ereignis-Stream angezeigt werden. 

Hinweis:

• Du kannst für jede Seite auf der Ereigniskarte der Seite auf „HAR herunterladen“ klicken, um den Inhalt des Wasserfalldiagramms der Netzwerkansicht im HAR-/JSON-Format zu erhalten. Dies ist hilfreich, um sie zum Debuggen an Entwicklungsteams weiterzuleiten oder zur weiteren Analyse oder Berichterstellung an andere Systeme weiterzugeben.
• Bei Sessions in Single Page Apps ist es üblich und zu erwarten, dass einige Navigationen zwischen Zuständen nicht als neue Seiten im Sinne des Startens einer neuen Netzwerkansicht oder eines Wasserfalldiagramms gelesen werden. Möglicherweise stellst du fest, dass Anfragen noch lange nach dem Erreichen des Meilensteins „Page Load“ geladen werden.

Hinweis: Wenn du Elemente von der Erfassung blockierst oder ausschließt, werden die URLs für die Assets, die sich innerhalb dieser Elemente befinden, in der Netzwerkansicht in Dev Tools als „--blocked--“ angezeigt.

Lesen des Wasserfalldiagramms

Die Netzwerkansicht zeigt jede Anfrage für die Seite auf einer Zeitachse, die wie ein Wasserfalldiagramm aussieht. Jeder rechteckige Balken stellt die Zeit für den Abschluss einer Anfrage dar.

Gestapelte Anfragen

Wenn Balken gestapelt sind (auf der linken Seite ausgerichtet), bedeutet das, dass die Anfragen gleichzeitig gestartet wurden. Es ist üblich, dass der Browser mehrere offene Verbindungen hat, um Anfragen stapelweise zu empfangen. Deshalb kann es sein, dass dein Wasserfalldiagramm wie eine Treppe aussieht, wenn du in der Ansicht nach unten scrollst.

Untersuchen langer Anfragen

Wenn die Balken lang sind (von links nach rechts), bedeutet das, dass die Anfrage länger gedauert hat (relativ) als die anderen Anfragen in Bezug auf die Ausführungszeit, gemessen in Millisekunden. Hinweis: In der Netzwerkansicht von Fullstory passt sich die Zeitleiste an, wenn du nach unten scrollst. Ein langer Balken, den du am Anfang deiner Liste von Anfragen siehst, ist also möglicherweise nicht so bedenklich, wie er scheint. Weitere Informationen findest du in der Zeitleiste.

Bedeutung von Lücken

Wenn es lange Lücken zwischen Balken gibt, bedeutet dies, dass zu diesem Zeitpunkt keine Anfragen stattfanden – normalerweise, weil JavaScript oder ein anderer Prozess auf der Seite ausgeführt wurde.

Suchen nach Fehlern

Wenn in Fullstory ein Balken für eine Anfrage rot angezeigt wird, weist dies auf einen Fehler hin, bei dem die Anfrage fehlgeschlagen ist. Sieh dir die Statusspalte an oder klicke auf diese Anfrage, um weitere Informationen darüber zu erhalten.

Lesen der Spalten in der Netzwerkansicht

In der Netzwerkansicht findest du für jede Anfrage die folgenden Informationen:

• Status – Dies bezieht sich auf die HTTP-Statuscodes für jede Anfrage. Im Allgemeinen bedeutet ein HTTP-Statuscode im Bereich 2xx–3xx, dass die Anfrage erfolgreich war („200 OK“ bedeutet, dass die Anfrage erfolgreich war, während „307 Temporary Redirect“, heißt, dass die Anfrage nach der Umleitung geladen wurde, weil sich die Datei nicht im erwarteten URL-Pfad befand). Ein HTTP-Statuscode im Bereich 4xx–5xx bedeutet, dass die Anfrage fehlgeschlagen ist („404 Page Not Found“, wenn der URL-Pfad ins Leere führt, oder „500 Internal Server Error“, wenn der Server auf eine unerwartete Bedingung gestoßen ist, die dazu geführt hat, dass die Anfrage fehlgeschlagen ist). Wenn Fullstory einen bestimmten HTTP-Statuscode vom Browser abrufen kann, wird dieser Code in der Statusspalte für diese Anfrage angezeigt. Wenn Fullstory keinen bestimmten HTTP-Statuscode erhalten kann, zeigt Fullstory möglicherweise „2xx–3xx“ für erfolgreiche Anfragen oder „4xx–5xx“ für nicht erfolgreiche Anfragen an.
• Type – Dies bezieht sich auf den MIME-Typ für jede Anfrage, der dem Browser mitteilt, welche Art von Datei zu erwarten ist – ob es sich dabei um HTML, Text, ein Bild, ein Video oder etwas anderes handelt.
• Name – Dies zeigt den spezifischen Namen der Datei und ihrer Erweiterung an. Beispielsweise heißt das Bild, das unter dem URL-Pfad https://fruitshoppe.firebaseapp.com/images/bluebs.jpg gehostet wird, „bluebs“ und ist im JPG-Format gespeichert. Wenn ich mir eine Seite ansehe, auf der das Bild „bluebs“ geladen wurde, sehe ich diese Bildanfrage mit dem Namen „bluebs.jpg“ in der Netzwerkansicht.
• Time – Dies ist die Zeit in Millisekunden, die eine bestimmte Anfrage benötigt, um abgeschlossen zu werden. Ist die Anfragezeit niedrig, bedeutet das allgemein, dass sie schneller abgeschlossen werden konnte – und je schneller, desto besser. Allerdings sind nicht alle Anfragen gleich. Es kann in Ordnung sein, wenn das Laden einer Anfrage etwas länger dauert, wenn diese Anfrage das Rendern oder die Interaktivität der Seite nicht in irgendeiner Weise blockiert.

Filtern von Netzwerkanfragen nach Typ oder Name

Suchst du etwas Bestimmtes? Du kannst Anfragen in den Typ-Tabs filtern …

… oder etwas im Filtertextbereich eingeben, um deine Suche nach Text einzugrenzen, der im Namen enthalten ist.

Auffinden weiterer Anfragedetails und Anfragephasen

Sobald du eine interessante Anfrage identifiziert hast (unabhängig davon, ob sie langsam aussieht oder fehlschlägt), kannst du in der Netzwerkansicht auf die Zeile der Anfrage klicken, um das Detailfenster der Netzwerkanfrage zu öffnen.

In diesem Bereich siehst du weitere Informationen zur Anfrage, einschließlich:

• Method – Dies bezieht sich auf die HTTP-Anfragemethode, unabhängig davon, ob die Anfrage „GET“, „POST“ oder etwas ganz anderes ist.
• Timing Summary – Dies ist eine Aufschlüsselung der Anfrage nach Phasen.
• Bodies – In diesem Abschnitt werden die Anfrage- und Antwort-Bodys angezeigt, falls zutreffend und auf der Allowlist.

Anfragephrasen in der Timing Summary

• Stalled – Wartezeit, weil es in der Warteschlange Anfragen mit höherer Priorität oder keine offenen Verbindungen mehr gab
• DNS Lookup – Zeit, die der Browser benötigt hat, um die IP-Adresse aufzulösen (Hinweis: Verlangsamung in dieser Phase könnte ein Hosting-Problem darstellen)
• Initial Connection – Zeit, die für die Herstellung der ursprünglichen Verbindung aufgewendet wurde (falls zutreffend)
• SSL – Zeit, in der ein SSL-Handshake (Secure Sockets Layer) stattfindet, der ausgetauscht wird, um die Sicherheit einer Verbindung zu prüfen (falls zutreffend)
• Send & Wait – Anfänglicher Hin- und Rückweg der Anfrage (Hinweis: Verlangsamung in dieser Phase könnte mit der geografischen Entfernung oder einem Problem mit einem CDN zusammenhängen)
• Recieving – Zeit nach Start der Anfrage, die für den Empfang der restlichen Daten vom Remote-Server aufgewendet wurde (Hinweis: bezieht sich im Allgemeinen auf die Größe der Datei)

Mit den Details aus der Netzwerkansicht hast du alles, was du brauchst, um eine langsam ladende Anfrage zu untersuchen oder mit einem Technikteam zusammenzuarbeiten, um weitere Fehler zu beheben.