HAR Dateien zur Problem-Analyse

Owned by Sebastian Schulz
Last updated: Feb. 27, 2024 by Dirk Münker
6 min read

Technischer Hintergrund

HAR steht für ”HTTP ARchive Format”. Eine HAR-Datei beschreibt die Interaktionen zwischen dem Browser und einem Web-Auftritt zum Zeitpunkt und für den Zeitraum der Generierung der HAR-Datei.

Folgende Probleme können mittels HAR-Datei analysiert werden:

  • Performance - z.B. lange Ladezeiten oder Abbrüche durch sogenannte Timeouts

  • Ausgabe - z.B. falsche Ausgabeformate oder unvollständige Dokumente bzw. Übertragungen

Dieser Leitfaden dient dazu, dem Support Team oder anderen Entwicklern zu helfen Probleme mit einem Web-Auftritt einfacher zu durchschauen.

Bevor man loslegt

Server, die von Konmedia gehostet werden, sind generell Teil der Unterstützten Plattformen für die Erstellung von HAR-Dateien in den gängigen Browsern.

Es lohnt sich bei einer Analyse mehrere HAR-Dateien zu erstellen und diese zu vergleichen, da man damit einfacher Schwankungen im Verkehr und der Auslastung aus der Analyse als Faktoren ausschließen kann. Ein guter Grundsatz ist hier:

  1. Erst eine HAR-Datei für einen generell performanteren Bereich des Auftritts zu erstellen, z.B. einem Dashboard oder einer einfachen Landingpage oder Detail-Seite.

  2. Anschließend eine HAR-Datei für den Bereich zu erstellen, der gerade z.B. von Performance-Einbrüchen oder vorzeitigen Abbrüchen geplagt ist.

Lösungen

Es folgen Beschreibungen zur Generierung von HAR-Dateien in gängigen Browsern.

Es wird vorgeschlagen für die Generierung von HAR-Dateien grundsätzlich Google Chrome zu verwenden, da dieser Browser die sogenannte Developer-Toolbar, die zur Generierung nötig ist, von Haus aus mit bringt. Eine Dokumentation seitens Google finden Sie hinter folgendem Link: DevTools

  1. Stellen Sie sicher, dass die Developer Tools aktiv sind.
    Sie sollten die Developer-Toolbar dann wie folgt öffnen können:

  • Per Tastenkombination (⌘⌥I auf OS X, Ctrl + Shift + i auf Linux, F12 auf Windows)

  • Per Klick auf das Options-Menü (die drei vertikal angeordneten Punkte oben-rechts) und auf die Punkte “Weitere Tools” und “Entwicklertools”

6842295f-c9b9-4739-84dd-f8a3cd2737b7.png

  1. Im “Network” Tab der Developer-Toolbar sollte dann das Caching deaktiviert werden um sicher zu gehen, dass hier keine veralteten Daten oder Dokumente erneut Verwendung finden und das Ergebnis verfälschen.

image-20240213-144619.png

  1. Anschließend einmal die zu analysierende Seite des Auftritts neu laden (z.B. Tasetndruck auf “F5”). Nun sollte bereits die Messung stattfinden und die Ergebnisse im “Network” Tab aufgelistet werden.

  1. Führen Sie die Schritte aus, bei denen Sie den Performance-Einbruch am stärksten erfahren oder bei denen es zu einem Abbruch kommt.

  2. Nun einen Rechtsklick in den Analyse-Bereich und wählen Sie hier die Option “Save all as HAR with content” und speichern die Datei an einem Ort wo Sie sie einfach wiederfinden und z.B. an ein Ticket oder eine Mail hängen können.

Hinweis zur Privatsphäre und Datensicherheit: Bevor Sie die HAR-Datei erstellen lohnt es sich noch mal zu prüfen welche analysierten Interaktionen zwischen Browser und Server private, bzw. kritische Daten enthalten könnten, da diese mit gespeichert werden. Diese Interaktionen können aus der Liste gelöscht werden und landen dann nicht in der HAR-Datei.

  1. Klicken Sie auf die Optionen (drei Striche oben-rechts) und dort auf “More Tools” und “Web Developer Tools”.

  2. Klicken Sie in der Developer-Toolbar auf den “Network” Tab und dort aktivieren Sie bitte “Disable Cache”.

  3. Laden Sie die zu testende Seite erneut, z.B. mit Tastendruck auf “F5”.

  4. Führen Sie die Schritte durch, die Performance-Probleme bereiten oder in Abbrüche laufen.

  5. Klicken Sie rechts in den nun gefüllten Analyse-Bereich und auf die Option “Save All as HAR”. Legen Sie die Datei an einem Ort ab an dem Sie diese wiederfinden und an ein Ticket oder eine Mail hängen können.

Hinweis zur Privatsphäre und dem Datenschutz: Bitte entfernen Sie vor dem Speichern der HAR-Datei die Interaktionen, von denen Sie denken, dass diese private oder anderweitig kritische Daten enthalten könnten, da diese ebenfalls in der HAR-Datei gespeichert werden.

  1. Klicken Sie auf die Optionen (drei Pünktchen oben-rechts) und dort auf “Weitere Tools” und “Entwicklungstools”.

  2. Klicken Sie in der Developer-Toolbar auf den “Netzwerk” Tab (abgekürzt mittels WiFi/WLAN-Icon) und dort aktivieren Sie bitte “Cache deaktivieren”.

  3. Laden Sie die zu testende Seite erneut, z.B. mit Tastendruck auf “F5”.

  4. Führen Sie die Schritte durch, die Performance-Probleme bereiten oder in Abbrüche laufen.

  5. Klicken Sie rechts in den nun gefüllten Analyse-Bereich und auf die Option “Alles speichern als HAR mit Inhalt”. Legen Sie die Datei an einem Ort ab an dem Sie diese wiederfinden und an ein Ticket oder eine Mail hängen können.

Hinweis zur Privatsphäre und dem Datenschutz: Bitte entfernen Sie vor dem Speichern der HAR-Datei die Interaktionen, von denen Sie denken, dass diese private oder anderweitig kritische Daten enthalten könnten, da diese ebenfalls in der HAR-Datei gespeichert werden.

  1. Klicken Sie auf die Optionen “Safari”, “Eigenschaften” und “Erweitert”.

  2. Aktivieren Sie die Checkbox “Entwicklermenü in Toolbar anzeigen”.

  3. Das Entwicklermenü aufrufen und dort “Zeige Web Inspector” anklicken.

  4. Starten Sie die Aufzeichnung der Timeline.

  5. Laden Sie die zu testende Seite erneut, z.B. mit Tastendruck auf “F5”.

  6. Führen Sie die Schritte durch, die Performance-Probleme bereiten oder in Abbrüche laufen.

  7. Klicken Sie auf “Speichern” (das Icon mit einem Kreis und einem Pfeil nach unten). Legen Sie die Datei an einem Ort ab an dem Sie diese wiederfinden und an ein Ticket oder eine Mail hängen können.

Hinweis zur Privatsphäre und dem Datenschutz: Bitte entfernen Sie vor dem Speichern der HAR-Datei die Interaktionen, von denen Sie denken, dass diese private oder anderweitig kritische Daten enthalten könnten, da diese ebenfalls in der HAR-Datei gespeichert werden.

Analyse der HAR-Dateien

Die HAR-Dateien können nach der Erstellung z.B. via HAR Viewer oder HAR Analyzer analysiert werden.

Performance Probleme analysieren

Bei Klick auf einen Eintrag im HAR Viewer wird einem die Zeitstempel zu dieser jeweiligen Interaktion aufgelistet. Daraus erkennt man dann z.B. kritische Themen wie Ladezeit oder Server-Antwortzeit.

Hier ein Beispiel aus dem HAR Viewer:

Zeitstempel-Typen können hier sein:

  • Request Start - Zeit, die seit dem ersten Aufruf in der Interaktion vergangen ist

  • Waiting - Zeit, die zum Antworten benötigt wurde

  • Receiving - Zeit, die zum Verarbeiten benötigt wurde

  • DOM Loaded - Zeit, die zur Ausgabe benötigt wurde

  • Page Loaded - Zeit, die zum Laden aller benötigten Dateien (z.B. JS, CSS bei einfachen Web-Aufrufen) gebraucht wurde

  • Size - Das Datenvolumen, welches bei der Interaktion ausgetauscht wurde

Ausgabe Probleme analysieren

Es können die Rückgabe-Daten des Servers so wie die Eingabe-Daten des Browsers analysiert werden. Der Server antwortet zudem mit einem sogenannten “HTTP Code”, der ausdrücken soll in welche Probleme oder Begrenzungen oder Verweise der Request lief.

HTTP Codes können z.B. sein:

  • 200 - Erfolgreich, keine Einschränkungen

  • 404 - Seite nicht gefunden bzw. sogenannte “Bad Requests”

  • 401 - Nicht für den Aufruf autorisiert

  • 403 - Aufruf generell Verboten

  • 304 - Unverändert (der Cache wurde bemüht)

  • 500 - Interner Server Fehler

Eine ausführliche Liste zu HTTP Codes finden Sie hinter diesem Link: HTTP/1.1: Status Code Definitions

Abschluss

Wenn Sie damit also nun zuverlässig ein extrem langsames oder unzuverlässiges Verhalten nachstellen konnten und in der HAR-Datei festhalten konnten, stellen Sie die HAR-Datei bitte unserem Service-Team oder anderen Entwicklern bereit, damit wir das Problem schnellstmöglich und zielgenau lösen können. Danke.