How to analyzing Page Speed in Chrome Dev tools

Question

I'm trying to get my head around the Network Tab in Chrome Dev tools to understand how long the page is taking to load and the difference between DomContentLoaded, Load and Finished at the bottom of the Network Tab.

From the users perspective when is the page ready for reading, viewing, interacting with etc? Is it DomContentLoaded, Load or Finished?

Also what about from an SEO perspective what event is Google using to measure page speed?

DOMContent loaded

As I understand it DOMContent loaded means the WebPages HTML document has been downloaded and parsed by the browser but assets such as images, css & javascript may still have to be downloaded, is this correct?

From the user visiting the webpage is it ready at this time?

Does render-blocking JavaScript and CSS delay this event?

In the Chrome network tab above why is DOMContentLoaded 1.97s at the bottom in blue text yet the blue line in the timeline is just before the 3 second mark?

Load Event

I imagine this event is fired once everything is finished downloading and has been fully rendered, what colour line is this represented by as again the red line is at the 2s mark but at the bottom of the Network tab it says Network 2.95s in Red!?

Is this a good point to consider the page is ready to view for the user. If you look at amazon.co.uk this isn't till about 14 seconds and the Finished time goes all the way up to 3.5 min which I suppose are Ajax requests. Which makes me think neither of these events really represent when the Page is ready for the user to view.

Answer 1

What's happening in the browser after you press enter?

• the browser downloads the file
• the browser parses the file
• the browser calculates javascript events and rendering operations

From a technical point of view:

DomContentLoaded:

The DomContentLoaded event is fired when the initial HTML document has been completely downloaded and parsed.

Please consider that:

if you have a <script src="test.js"></script>:
1. Browser download and parse index.html and test.js
2. Browser parse and evaluate script
3. Browser will fire a DomContentLoaded

if you have a <script src="test.js" async></script>:
1. Browser download and parse index.html
2. Browser will fire a DomContentLoaded
and in the mean while is download the js

Load:

The Load event is fired when on fully load page, so when HTML and the BLOCKING resources are downloaded and parsed.

The BLOCKING resources are CSS and Javascript. The NOT BLOCKING is async javascript.

Finished:

The Finished event is fired when HTML + BLOCKING + NON BLOCKING resources are downloaded | parsed and all the XMLHttpRequest() and Promise are completed.

In case you have a loop that is checking for updates you'll keep seeing updating this value.

From the javascript perspective:

The only two events you care about are DOMContentLoaded and Load because it's when the browser will run your js.

consider this:

DOMContentLoaded == window.onDomReady()
Load == window.onLoad()

From a user perspective:

So, as a user when I feel the page fast? What's the secret?

Well, to answer this question you have to open the Timeline panel. On the capture line select: Network, Screenshot and Paint. (Those are not really mandatory, but they help to understand).

Refresh the page.

You will see 3 vertical lines:

• 1 blue line: DomContentLoaded event
• 1 red line: Load event
• 1 green line: First Paint

Now, What's the First Paint? What does it mean?

It means that Chrome it starts to render something to the user. If you check the screenshots, you'll be able to see when the user has a minimal version of the page to interact with.

From a UX perspective, it's important the user start to see something (even the page rendering) as soon as possible. Google has 300ms (Finish 800ms), Amazon is around 1.6s (Finish 41s)

For the SEO:

For the SEO no worries. It's much easier. Use the PageSpeed Insights and follow the suggestions.

References:

• DOMContentLoaded vs Load
• Ludicrously Fast Page Loads