Resource Waterfall zeichnet jede von der Seite gestellte Anfrage auf einer Zeitleiste auf, wobei jeder Balken in seine tatsächlichen Phasen unterteilt ist – Warteschlange, DNS, TCP, TLS, Warten und Herunterladen – mit Markierungen für FCP, LCP, DOMContentLoaded und Laden.
Wenn sich eine Seite langsam anfühlt, ist die Frage immer dieselbe: Worauf wartet sie? Die eigene Antwort des Browsers befindet sich im Netzwerkfenster. Das bedeutet, dass Sie DevTools öffnen, eine Schublade über der Seite, die Sie überprüfen, andocken und neu laden, um den Beginn des Ladevorgangs zu erfassen.
Resource Waterfall platziert diese Zeitleiste in einem schwebenden Bedienfeld neben der Seite. Jede Anfrage erscheint als Balken, der nach dem Startzeitpunkt positioniert und danach segmentiert ist, wo die Zeit tatsächlich vergangen ist: in der Warteschlange oder blockiert, DNS-Suche, TCP-Verbindung, TLS-Handshake, Warten auf den Server, dann Herunterladen. Ein langes blaues Segment ist ein langsamer Server; eine lange grüne Feile ist eine dicke Feile; Ein langes graues Symbol bedeutet, dass die Anfrage darauf wartete, an die Reihe zu kommen. Die Unterscheidung entscheidet darüber, was Sie reparieren sollten.
Gestrichelte Markierungen auf der Zeitleiste zeigen „First Contentful Paint“, „Largest Contentful Paint“, „DOMContentLoaded“ und „Loaded“, sodass Sie sehen können, welche Anfragen abgeschlossen sind, bevor der Benutzer etwas sieht, und welche danach noch ausgeführt werden. Render-blockierende Ressourcen und Cache-Treffer werden in jeder Zeile markiert, und ein einzelner Blockierungsfilter reduziert die Liste auf die Elemente, die das erste Malen tatsächlich verzögern.
Filtern Sie nach Typ, suchen Sie nach URL oder sortieren Sie nach dem langsamsten oder größten, um schnell den schlimmsten Täter zu finden. Klicken Sie auf eine beliebige Zeile, um deren vollständige URL, Protokoll, Übertragungs- und dekodierte Größen, Status und vollständige Phasenaufschlüsselung anzuzeigen. Anfragen, die eingehen, während das Panel geöffnet ist, werden direkt gestreamt, und Export JSON kopiert die gesamte Zeitleiste, einschließlich Meilensteine, sodass ein Leistungsbefund ohne Screenshot an jemand anderen weitergegeben werden kann.
Jeder Balken ist in „Warteschlange“, „DNS“, „TCP“, „TLS“, „Warten“ und „Download“ unterteilt, sodass ein langsamer Server, eine fette Datei und eine Anfrage in der Warteschlange sofort erkennbar sind.
Gestrichelte Linien für FCP, LCP, DOMContentLoaded und Load zeigen, welche Anforderungen abgeschlossen sind, bevor der Benutzer Inhalte sieht, und welche danach noch ausgeführt werden.
Mit einem Klick wird die Liste auf die Ressourcen reduziert, die tatsächlich die erste Farbe verzögern, mit der Gesamtzahl der Blockierungen in der Übersichtsleiste.
Aus dem Cache bereitgestellte Ressourcen werden markiert und beschriftet, anstatt als mysteriöse Null-Byte-Zeilen zu erscheinen, sodass Sie überprüfen können, ob Ihr Caching wirklich funktioniert.
Grenzen Sie nach Typ ein – Dokument, CSS, JS, Bilder, Schriftarten, XHR, Medien – suchen Sie nach URL oder sortieren Sie nach der langsamsten oder größten, um in Sekundenschnelle den schlimmsten Täter zu finden.
Kopieren Sie den gesamten Wasserfall als JSON, einschließlich Meilensteinen, Gesamtsummen und Phasen pro Anfrage, um ihn an ein Ticket anzuhängen oder mit einem späteren Lauf zu vergleichen.
Filtern Sie nach Ressourcen, die das Rendern blockieren, und sehen Sie sich die genauen Stylesheets und Skripte an, die zwischen Ihrem Besucher und sichtbaren Inhalten stehen.
Sortieren Sie nach den langsamsten und beobachten Sie, wie ein Analyse-, Schriftarten- oder Chat-Anbieter mit einer langen Wartezeit ganz oben erscheint, die nichts mit Ihrem Code zu tun hat.
Lesen Sie die Phasenfarben: Die mit dem Warten verbrachte Zeit ist ein Backend- oder CDN-Problem, die mit dem Herunterladen verbrachte Zeit ist ein Problem mit der Dateigröße. Die Lösung ist bei jedem anders.
Laden Sie die Assets neu und bestätigen Sie, dass sie aus dem Cache stammen und dass die Übertragungsgrößen weitaus kleiner sind als die dekodierten Größen, um zu beweisen, dass die Komprimierung tatsächlich aktiviert ist.
Exportieren Sie die Zeitleiste als JSON und hängen Sie sie an ein Ticket an, damit die nächste Person dieselben Zahlen sieht, anstatt zu versuchen, Ihre Sitzung zu reproduzieren.
Klicken Sie im DevSuite Pro-Dock auf das Resource Waterfall-Symbol. Alles, was die Seite bisher geladen hat, erscheint sofort auf der Timeline.
Laden Sie bei geöffnetem Bedienfeld erneut, um die Auslastung ab der ersten Anforderung zu erfassen, einschließlich des Dokuments selbst und der Malmeilensteine.
Drücken Sie auf den Blockierungschip, um nur Ressourcen anzuzeigen, die das Rendern blockieren, oder wählen Sie einen Typ wie js oder img aus. Sortieren Sie nach dem langsamsten, um den schlimmsten Täter ganz oben zu platzieren.
Klicken Sie auf eine beliebige Zeile, um deren vollständige URL, Protokoll, Größen, Status und eine phasenweise Aufschlüsselung in Millisekunden anzuzeigen – und kopieren Sie die URL, wenn Sie sie benötigen.
Durch den JSON-Export wird die vollständige Zeitleiste mit Meilensteinen und Gesamtwerten kopiert und kann in ein Ticket eingefügt oder als Vorher-Nachher-Aufzeichnung aufbewahrt werden.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 71+ Entwickler-Tools für Ihren Browser frei.
