The latest and most up-to-date version of this post can be found here https://hackernoon.com/optimising-the-front-end-for-the-browser-f2f51a29c572
...
For further actions, you may consider blocking this person and/or reporting abuse
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...
Hi Olivier,
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.
Use aria labels on elementsWell 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 :)Thanks for the knowledge, always love it when people share :)
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.
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.
developers.google.com/web/tools/li...
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.
Hi Sanjay,
Just wondering, you said that in one trip, onlu 14kb is sent/received. Does this mean, if we have three js files with sizes: 8kb, 2kb, and 2kb, it's better to merge those? Because what I understand from your article, it will do 1 round trip instead of 3 round trips. Thanks before for the amazing article and replies!
Hello!
Because the total of the 3 files can fit into one request packet it only counts as one round trip in both cases. And only if they are blocking the loading of the DOM, they will not count against the critical path metrics if they are async, defer, or don't execute until after the DOM loads.
But in most cases you're better off bundling them into one, that will save on the workload the browser has to do, optimise networking and potentially save space on shared modules.
I have seen this article before
Probably on hackernoon on medium, that's where I first posted it :)
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!!! 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 :)
Great arcticle!
Cheers Philipp!
Hands down for this article
Thanks Tommaso!
HI Sanjay, great article!
Greetings from Argentina.
Thanks :)
Hi Sanjay,
Excellent article. Thank you.
Waiting for your next blog :).
Thanks,
Anil Pinto
Thanks Anil!
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