Find the reason of long gap in performance waterfall?

293 Views Asked by At

In this report https://gtmetrix.com/reports/www.datanumen.com/tFIOxtvx/, there are long gap between the requests, as below:

enter image description here

In https://gtmetrix.com/blog/how-to-analyze-a-waterfall-chart/#long-empty-gaps and Gaps in FireBug waterfall chart, it is explained as the execution/loading of the JS/CSS resources. However, how to know which JS/CSS resource cause the gap?

1

There are 1 best solutions below

4
mpmcintyre On

On a Chrome or Firefox browser press F12 to access the developer tools. Go to the network tab, clear any recording active with the cancel button, then press the record button , refresh the page and stop the recording once it has loaded. You should now see your waterfall. You can now navigate to the performance tab to see what operations were taking place.

Looking at the waterfall of the site under developer tools the wait occurs around the 80ms mark and resumes at around 93ms (on this particular page load)

Developer tools waterfall

In the performace tab we can see that is around the same time the browser loads additional JS content. So yes, it is js related and a blocking operation caused by the elements being loaded and repainting the screen (Lazy load, theme, and something I suspect being a library).

Performance tab Zoom and enhance

Here are the recources

A B C