HAR-bestand-watervalanalyser

Een HAR-bestand (HTTP Archive) is een json-export van alles wat de DevTools-netwerktab van een browser tijdens het laden van een pagina heeft geregistreerd: elke request- en response-header, de exacte grootte en het mime-type van elke response-body, en een per request uitgesplitste timing. Je kunt er een maken vanuit Chrome, Firefox, Edge of Safari door DevTools te openen, op de netwerktab de pagina te herladen en dan met de rechtermuisknop op de requestlijst te klikken en ‘Alles opslaan als HAR met inhoud’ te kiezen. Deze tool leest dat geëxporteerde bestand rechtstreeks in — er wordt niets opnieuw opgehaald of aangevraagd.

De watervalgrafiek wordt volledig opgebouwd uit gegevens die al in het bestand zitten: het eigen timingobject van elk item splitst een request in de fasen blocked, DNS lookup, connect, ssl/tls-negotiatie, send, wait (time to first byte) en receive, en elke fase wordt getekend als een eigen gekleurd segment. Volgens de HAR-specificatie is de ssl-tijd ook inbegrepen in connect, dus die wordt er eerst weer van afgetrokken — anders zou het tls-deel dubbel geteld worden en zouden de balkbreedtes niet meer optellen tot de werkelijke duur van het request. Gestreepte verticale markeringen geven DOMContentLoaded en Load aan, rechtstreeks uit de page-timings van het bestand, zodat je precies kunt zien welke requests voltooid waren voordat de pagina interactief werd.

Naast de grafiek voert de tool drie vondstregels uit op velden die het HAR-formaat al registreert. Het markeert cachebare responses (status 200, 203 of 206) die noch een Cache-Control- noch een Expires-header bevatten, wat betekent dat een volgend bezoek ze helemaal opnieuw moet downloaden. Het markeert tekstuele responses — html, css, javascript, json, svg en vergelijkbaar — groter dan 1 KB die zonder Content-Encoding zijn verstuurd, een makkelijke compressieverbetering die de meeste servers met één configregel kunnen inschakelen. En het markeert css- of javascript-requests die begonnen zijn vóór de DOMContentLoaded-offset van de pagina, het klassieke kenmerk van een renderblokkerende bron.

Dit alles draait op gegevens die al in het bestand staan dat je uploadt — er is geen netwerktoegang, geen externe opzoekservice en geen heropvraging van de oorspronkelijke pagina. Het HAR-bestand wordt volledig in je browsertabblad gelezen, geparset en weergegeven en wordt nooit ergens naar geüpload.