HAR-Datei-Wasserfall-Analysator
Laden Sie eine .har-Datei hoch, die aus den DevTools Ihres Browsers exportiert wurde, um einen echten Anfrage-Wasserfall zu sehen, der aus den eigenen Zeitdaten jeder Anfrage erstellt wird, plus Prüfungen auf fehlende Cache-Header, unkomprimierte Antworten und renderblockierende Skripte.
Ergebnis
Eine HAR-Datei (HTTP-Archiv) ist ein JSON-Export von allem, was das DevTools-Netzwerkfenster eines Browsers während des Ladens einer Seite aufgezeichnet hat: jeder Anfrage- und Antwortheader, die genaue Größe und der MIME-Typ jedes Antworttexts sowie eine Aufschlüsselung des Timings pro Anfrage. Sie können eine aus Chrome, Firefox, Edge oder Safari erstellen, indem Sie DevTools öffnen, die Seite auf der Registerkarte „Netzwerk“ neu laden, dann mit der rechten Maustaste auf die Anforderungsliste klicken und „Alle als HAR mit Inhalt speichern“ auswählen. Dieses Tool liest die exportierte Datei direkt – es wird nichts erneut abgerufen oder erneut angefordert.
Das Wasserfalldiagramm wird vollständig aus bereits in der Datei enthaltenen Daten erstellt: Das eigene Timing-Objekt jedes Eintrags unterteilt eine Anfrage in die Phasen Blockiert, DNS-Suche, Verbindung, SSL/TLS-Aushandlung, Senden, Warten (Zeit bis zum ersten Byte) und Empfangen, und jede Phase wird als eigenes farbiges Segment dargestellt. Gemäß der HAR-Spezifikation ist die SSL-Zeit auch in Connect enthalten, sodass sie zuerst wieder abgezogen wird – andernfalls würde der TLS-Anteil doppelt gezählt und die Balkenbreiten würden sich nicht mehr zur tatsächlichen Dauer der Anfrage addieren. Gestrichelte vertikale Markierungen zeigen DOMContentLoaded und Load an, die direkt aus den eigenen Seitenzeiten der Datei gelesen werden, sodass Sie genau sehen können, welche Anfragen abgeschlossen wurden, bevor die Seite interaktiv wurde.
Über das Diagramm hinaus führt das Tool drei Suchregeln für Felder aus, die das HAR-Format bereits aufzeichnet. Es markiert zwischenspeicherbare Antworten (Status 200, 203 oder 206), die weder einen Cache-Control- noch einen Expires-Header tragen, was bedeutet, dass sie bei einem erneuten Besuch von Grund auf neu heruntergeladen werden müssen. Es markiert Textantworten – HTML, CSS, JavaScript, JSON, SVG und ähnliches – größer als 1 KB, die ohne Content-Encoding bereitgestellt wurden, eine einfache Komprimierungsmöglichkeit, die die meisten Server mit einer Konfigurationszeile aktivieren können. Und es markiert CSS- oder JavaScript-Anfragen, die vor dem DOMContentLoaded-Offset der Seite gestartet wurden, der klassischen Signatur eines Rendering-blockierenden Assets.
All dies basiert auf Daten, die sich bereits in der von Ihnen hochgeladenen Datei befinden – es gibt keinen Netzwerkzugriff, keinen externen Suchdienst und kein erneutes Abrufen der Originalseite. Die HAR-Datei wird vollständig in Ihrem Browser-Tab gelesen, analysiert und gerendert und niemals irgendwo hochgeladen.