How to Analyze Page Speed in Chrome Dev Tools
I'm trying to make out the Networking tab in Chrome Dev tools to understand how long it takes for the page to load and the difference between DomContentLoaded, Load and Finished at the bottom of the Networking tab.
From a users' point of view, when is the page ready to read, view, interact with, etc.? Is it DomContentLoaded, Load or Finished?
Also, from an SEO perspective, what event does Google use to measure page speed?
DOMContent loaded
As I understand it, loaded DOMContent means the web page's HTML document has been loaded and parsed by the browser, but resources such as images, css and javascript might have to be loaded, is that correct?
From the user visiting the webpage, is he ready at this time?
Does this event cause JavaScript and CSS blocking to render ?
In the Chrome network tab above, why is DOMContentLoaded 1.97s at the bottom in blue text, but the blue line in the timeline is just before the 3 second mark?
Load event
My guess is that this event will be fired as soon as everything is complete and it will be fully displayed which color line is represented as again the red line is at 2s and at the bottom of the Network tab it says 2.95s network in red! ?
Is this a good point to consider if the page is ready for the user to view. If you look at amazon.co.uk it doesn't go to about 14 seconds, but Done goes all the way to 3.5 minutes, which I assume are Ajax requests. This leads me to think that none of these events actually represent when the page is ready for the user to view.
source to share
What happens in the browser after pressing enter?
- the browser downloads the file
- the browser parses the file
- browser computes javascript events and render operations
From a technical point of view:
DOMContentLoaded:
The event is DomContentLoaded
fired when the original HTML document has been fully loaded and parsed.
Please note that:
if you have <script src="test.js"></script>
:
1. Download and parse the browser index.html and test.js
2. The browser will parse and evaluate the script
3. The browser will runDomContentLoaded
if you have <script src="test.js" async></script>
:
1. Loading and parsing browser index.html
2. Browser will launch DomContentLoaded
and on average while js is loaded
Load:
The event is Load
fired when the page is fully loaded, so when the HTML and BLOCKING resources are loaded and parsed.
BLOCKING resources are CSS and Javascript. NOT BLOCKING is asynchronous javascript.
Completed:
Event Finished
triggered when loading HTML + BLOCKING + NON BLOCKING resources | disassembled and all XMLHttpRequest()
and Promise
completed.
If you have a loop that checks for updates, you will continue to update this value.
From a javascript perspective:
The only two events you care about are DomContentLoaded
and Load
because this is when the browser will run your js.
consider the following:
DOMContentLoaded == window.onDomReady ()
Load == window.onLoad ()
From a user perspective:
So, as a user when I quickly feel this page? What's the secret?
Okay, to answer this question you need to open the panel Timeline
. On line, select the capture: Network
, Screenshot
and Paint
. (This is not required, but it helps 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?
This means that Chrome starts rendering something to the user. If you check the screenshots, you can see when the user has the minimum version of the page to interact with.
From a UX perspective, it is important that the user sees something as soon as possible (even the rendering of the page). Google has 300ms (finish 800ms), Amazon is about 1.6s (finish 41s)
For SEO:
For SEO, don't worry. It's much easier. Use PageSpeed Insights and follow the guidelines.
Literature:
source to share