Thank you for this very nice overview of web page rendering optimization. I only had some difficulty understanding 2 points:
1) the first graph under the § "How the browser renders the page": I don't understand why the JS scripts branch is grouped with the CSS branch. Why isn't it on its own separate branch?
2) I didn't quite grasp how layout is different from CSS? What do you mean by layout?
I also found this resource helpful: developers.google.com/web/fundamen...
I'm really glad you enjoyed my article and thank you very much for your questions.
1) The diagrams are for illustration purposes and only a high level overview of what happens. I put scripts below CSS because scripts have to wait for prior CSS to download and compute, they do then act on the CSSOM and DOM.
2) CSS is the rules for the styles, it gets used to create the CSSOM which gets combined with the DOM to form the Render Tree. The phase after that is called Layout, in which the browser takes all the elements and decides what their dimensions are and where to put them.
I hope this answers your questions.
Really nice post, easy to understand even for a backend dev. Is the CRP metrics in dev tools or did you use an extension?
Someone just pointed out to me that Google's Lighthouse actually does give you critical metrics, along with a tonne of other useful optimisation stuff. It is actually more geared towards progressive web apps but useful nonetheless for what you're asking about.
Thanks Francois! CRP is a way to help you understand what is affecting your page rendering and how to optimise it. I don't think it appears in DevTools but there may be an extension out there.
Fantastic write up Sanj! There's a great talk by one of my old colleagues about CSS and the critical path that's well worth a watch youtu.be/_0Fk85to6hA
Thank you Simon! I shall check that video out.
Thank you Sanjay, Beautiful article, explained in the most lucid way possible...
Could you please write an article on 'flushing HTML'...ie. how in code, do we flush only the 'Above the Fold' HTML while in the second round trip fetch the remaining 'below the fold' and the entire document as a whole..
I mean is there any function in PHP or some Wordpress function that could do the same..
Advice on this would be really helpful, or could I just write the CSS and JS inline until I hit Below the fold and then start requesting external files, would that be helpful instead of some weird buffer concept of flushing?
Once again thank you Sanjay, It was really a beautiful article, eagerly waiting for the next one..
Hey Subin, thanks so much for the feedback and questions, and my apologies for only seeing this now :)
What you're asking is something we've just done at work and seen a massive boost in our page scores, I may start working on a relevant article soon but it will take a while to research and write.
In the meantime I would advise you that yes it's really worth it to have above the fold content prioritised and then load the rest asynchronously.
In the broadest way, I would suggest inlining critical styles in the head. Defer as many scripts as possible. And use the loadcss git/npm package to then async load the below the fold styles.
If you actually want to send below the fold html async then look at something like how webpack can codesplit and write html files.
I have seen this article before
Probably on hackernoon on medium, that's where I first posted it :)
Use aria labels on elements Well as much as I appreciate WAI-ARIA, but the first rule is (loose interpreted) "Don't use WAI-ARIA". You should rather use the correct HTML5 elements than using WAI-ARIA labels. Just to add this :)
Use aria labels on elements
Thanks for the knowledge, always love it when people share :)
Thank you Sanjay!!! Such important concepts for digital marketers, devs, webmasters, etc. to be aware of. Will be referencing this a lot.
Keep up the incredible work.
Thanks Britney. I stand on the shoulders of giants :)
Hands down for this article
HI Sanjay, great article!
Greetings from Argentina.
Excellent article. Thank you.
Waiting for your next blog :).
Excellent post! You should include in this article the CSS property 'will-change', it's very important to use when animations are triggered, to avoid excessive rendering
We’re a place for programmers to stay up-to-date, learn new skills, and share ideas.
We’ll never post without your permission.