google-chromedompageload

Chrome: waiting for www.site.com, how to know which resource is delaying the page load?

When a site gets stuck in chrome with the 'loading www.site.com' status, Is there anyway to know which of the elements on the DOM is delaying the load? for example, it can be an external js file or image that is taking long time to load. I tried using the network tab in the DeveloperTools, but it only shows the elements already loaded and the time they took. I couldn't find a way to see which element is stuck.

Solution

  • I found a way that I'm not sure it works in all cases, but it did for me. I used the Timeline tab (now shown in the Performance tab), it's one of the tabs in Chrome Dev Tools.

    1. Open Chrome Developer tools (F12 or CMD + Alt + I in Mac) and click the Performance tab

    2. Make sure you drag the grey timeline bar all the way to the right, you want to see the most recent section of events so you can find what's getting stuck:

      Grey bar

    3. Check just down below the records sidebar. If you don't see this like in the capture below, try toggling the icons, there are different view modes. Now, going all the way down I found these. It doesn't look like that's going well. Obviously some kind of infinite loop in some random code:

      enter image description here

    I couldn't find out if it was an extension itself or some other bit of code. Clicking through I only could find // Copyright 2014 The Chromium Authors. All rights reserved..

    Checking in Incognito mode clear of extensions, the website loads just fine.

    I'd also advise to check the Console tab to see if there are were any errors that might cause the infinite loading thing. You'll often find clues there.