Waterfall chart

Een waterfall chart, in het Nederlands watervalgrafiek, is een tijdlijn van alle verzoeken die een browser doet om een webpagina te laden. Elke regel is één bestand, zoals de HTML, een stylesheet, een script of een afbeelding, met een balk die laat zien wanneer het verzoek begint en hoe lang het duurt. Omdat latere bestanden steeds verder naar rechts starten, lijkt het geheel op een waterval.

Elke balk bestaat uit fases. In Chrome DevTools zie je onder meer DNS Lookup, Initial connection voor het opzetten van de verbinding inclusief TLS, Waiting (TTFB) voor de wachttijd tot de eerste byte en Content Download. Een lange wachttijd wijst meestal op een trage server of zware PHP-code, een lange downloadtijd op een groot bestand.

Zo vind je de oorzaak van een trage pagina. Een groot script dat alles erna laat wachten, een afbeelding van enkele megabytes of een externe dienst die seconden nodig heeft: in de waterval springen ze er meteen uit. WebPageTest toont dezelfde soort grafiek vanaf een testlocatie naar keuze. In Excel en financiële rapporten betekent waterfall chart overigens iets anders, namelijk een grafiek die laat zien hoe een beginwaarde stap voor stap stijgt en daalt.

Je opent een waterval zelf in Chrome met F12 of Ctrl+Shift+I (op een Mac Cmd+Option+I), kiest het tabblad Network en herlaadt de pagina. Begin bij de eerste regel, het HTML-document. Duurt Waiting (TTFB) daar langer dan 0,8 seconde, de grens die PageSpeed Insights als goed hanteert, dan zit de vertraging op de server en niet in de bestanden die daarna komen.