A hole in the waterfall: observations on JavaScript delays

Many web performance analysis tools use waterfall charts to show the timing of HTTP requests within a page download. Here is an example from the HTTP Archive showing the first two dozen requests that an IE 8 browser made while loading the CNN home page.

My own work on web performance has been focused on the time spent waiting for the network – i.e., the length of the bars in the waterfall chart, the number of bars, and the staircase patterns that emerge when synchronous HTTP requests are queued on a small pool of connections. In this waterfall, though, another phenomenon stands out: there is a short interval of no network activity right before the browser starts downloading six images in parallel at the end.

The page source shows the reason for this delay: there is a <script> block near the top of the page. Modern web browsers can download external scripts in parallel with other content, but running a script is a serialized operation.

The interesting question is: how common is this pattern of a waterfall “stalling” due to script execution? I’m working on a study of the HTTP Archive data to measure how many websites are affected by this phenomenon, and I’ll post a follow-up when the results are ready.