Question:
Please explain the meaning of the term Critical rendering path .
Answer:
Critical rendering path – the path that the browser takes before the page is rendered in the browser.
This path generally consists of the following steps (without detailing the work at the network level):
- Receiving a response from the server – HTML. Browser parses HTML to build DOM
- Building the CSS Object Model – CSSOM.
- Execution of scripts (therefore, in general, they should be placed at the end of the document).
- Building a render tree based on DOM and CSSOM.
- Page rendering.
If we consider this path in the context of CSS, then CSS is a render-blocking resource, i.e. if during parsing HTML the browser encounters a link to a CSS file, then progress along the path stops and the browser starts downloading the file and parsing it. To optimize this process, it is recommended to put CSS sufficient to display the first screen in the <head> inside the <style> – this way the browser will receive and start parsing the CSS along the path of parsing the entire HTML and will not stop downloading and parsing the external file.
Material at developers.google.com.