Watervaldiagram
Wat is een watervaldiagram?
Een watervaldiagram, in het Engels een waterfall chart, is een grafiek die laat zien hoe elk bestand van een pagina wordt geladen, in de volgorde en op het moment waarop het gebeurt. Elke regel is een verzoek en elke horizontale balk toont hoeveel tijd dat verzoek kostte.
Je ziet een watervaldiagram in de ontwikkelaarstools van je browser en in veel snelheidstests. Het laat ook zien welke bestanden elkaar in de weg zitten. Een browser vraagt sommige bestanden pas op nadat hij een ander bestand heeft gelezen. Die afhankelijkheden zijn vaak belangrijker dan de grootte van één bestand.
Welke fases zie je in een balk?
Een balk bestaat uit meerdere fases:
- DNS-lookup: de browser zoekt het IP-adres bij de domeinnaam.
- Verbinding: de browser legt verbinding met de server, bij een beveiligde site inclusief de SSL-handshake.
- Wachten: de browser wacht op het eerste antwoord van de server. Dit deel komt sterk overeen met de TTFB.
- Downloaden: de tijd die nodig is om het bestand binnen te halen.
Niet elk verzoek heeft alle fases. Een bestand uit de cache kan vrijwel meteen klaar zijn. De fase die het langst duurt, vertelt je meestal waar het probleem zit.
Welke patronen wijzen op vertraging?
Een paar patronen komen vaak voor:
- Een lange lege start voor het eerste verzoek wijst op een trage DNS-lookup of verbinding.
- Een lange wachtbalk bij het eerste document wijst op een trage server of een zware backend.
- Een rij bestanden die achter elkaar starten wijst op een afhankelijkheidsketen, bijvoorbeeld een stijlbestand dat een ander stijlbestand inlaadt.
- Veel kleine balken van externe domeinen wijzen op scripts en diensten van derden.
Een diagram van één test is een momentopname. Herhaal de test om te zien of een patroon terugkomt. Meer over hoe het gewicht van een pagina de laadtijd bepaalt, lees je bij paginagewicht en aantal requests.
Veelgestelde vragen
Wat is het verschil tussen wachten en downloaden in een watervaldiagram?
Wachten is de tijd tussen het versturen van je verzoek en het eerste antwoord van de server. Downloaden is de tijd die het kost om het bestand binnen te halen. Een lange wachttijd wijst meestal op de server, een lange downloadtijd vaak op een groot bestand of een trage verbinding.
Waarom staan sommige bestanden pas later in de rij?
Meestal omdat de browser ze pas ontdekt nadat hij een ander bestand heeft gelezen. Een stijlbestand kan bijvoorbeeld pas later een lettertype of afbeelding aanvragen. Ook kan de browser niet onbeperkt tegelijk verzoeken doen. Daardoor ziet een diagram er vaak trapsgewijs uit.