How to analyzing Page Speed in Chrome Dev tools
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.