Search code examples
firebug

Gaps in FireBug waterfall chart

When testing performance of various web pages on my web application I noticed that there are some gaps in net tab (waterfall chart) in firebug. In some cases these may take up half of the time for the whole request.

What usually causes these gaps and how can they be removed?

enter image description here

Solution

  • The main reason this happens is for files that are loaded by scripts and CSS files.

    • For example: CSS, background images won't start loading until a small delay after the CSS file that links to them loads.

    • Many JS libraries also load images, CSS, and/or other files. These loads won't start until the calling JS is loaded, plus a small processing delay.

    • Libraries, or inline JS, may also fire off loads at the DOMContentLoaded event (the purple line) or the load event (red line).

    • Finally, obviously, JS can execute AJAX that fires after any manner of delays/intervals.