What is the critical rendering path of web pages?

This is a sequence of steps that the browser performs to display the page content on the screen, starting from receiving the HTML document. It includes:

1. Building the DOM (Document Object Model): Parsing the HTML code and creating a tree of objects representing the document structure.
2. Building the CSSOM (CSS Object Model): Parsing CSS files and inline styles to create a tree of objects representing the styles of elements.
3. Building the Render Tree: Combining the DOM and CSSOM. A tree is created only of the renderable elements with applied styles.
4. Layout (or Reflow): Determining the geometric sizes and positions of each element on the page.
5. Paint (or Repaint): Filling pixels on the screen based on the Render Tree and Layout data.

Optimizing the critical rendering path aims to make the browser display the first meaningful content (First Meaningful Paint) or interactivity (Time to Interactive) as quickly as possible. This is achieved by minimizing blocking resources (JS and CSS), optimizing resource sizes, and loading them at the appropriate moment.