How to find which script is causing my website to keep loading

Question

When loading my website in Google Chrome, I sometimes have the issue that the website just keeps loading. I think it has something to do with a request to Google Ads, but I'm not sture.

I thought I could just find the slow script in the 'Network' tab of the Chrome Dev Tools, but the script doesn't appear there (possibly because it never finishes loading?). How can I check which request is causing the eternal load?

Answer 1

Use the below links to find out which scripts/resources are taking longer time to load:

Notes: These are performance tests for your webpage.

https://developers.google.com/speed/pagespeed/insights/

Under Google Page Speed Insights, if you take the request URL and run it, you would be able to identify which resources are taking longer time to load. Attached Screenshot is a reference to identify: (This uses lighthouse to do the testing, you can also request an API key to perform the same task on the total website)

https://gtmetrix.com/

This provides insights on what resources are making your webpage take time to load. Attached Screenshot gives an example of my website:

** If you could share your URL or run the above tests, you can easily know which resources are taking time to load, do the fixes accordingly to solve your problem.

Answer 2

There are a number of things that could cause this, and they are not necessarily a problem:

1. Streaming media (videos, audio, etc.) on your page. This can add to the overall load time, as until it's finished streaming, the loading time keeps counting.
2. Lazy loaded images. Like streaming media, if you're lazy-loading images as the user scrolls, this can keep adding time to the page load - if you load the page, then wait a while before scrolling you'll see that the wait time is included in your page load time.
3. Other delay loaded resources. If you've got some script that fires after an interval and loads further resources (like a survey or interrupt) then the delay will be included in the page loads.

If you use the "Network" tab of Chrome or Firefox's Developer Tools, set to "All" you should be able to see something like this:

You can see the bulk of this site loaded in 560ms, but the total load time was 2.9 minutes, and there are a couple of outliers between 10 and 20 seconds, and then a much longer delay before the final images - you should be able to identify what's loading either slowly (with a long bar) or just being called very late.

If you find that a particular resource is taking a long time to load, hovering over it will reveal more information about that particular request:

Which might help you identify ways to improve the performance. For example if there's a large delay between a request being queued and it actually starting, you are making too many simultaneous HTTP/1 requests to a single server, and should consider bundling if possible, while if your waiting (TTFB) or content download seem high for the size of the request, you might want to consider caching strategies.