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.