Render-Blocking Resources

When a browser loads a webpage, it needs to process various resources like HTML, CSS, and JavaScript. Sometimes, certain resources must be fully processed before the browser can start showing any content to the user.

These are called render-blocking resources. They prevent the browser from rendering the page until they are dealt with, delaying the 'First Contentful Paint'.

To display a page, the browser goes through a series of steps called the Critical Rendering Path. Key steps include:

• Parsing HTML: Builds the Document Object Model (DOM).
• Parsing CSS: Builds the CSS Object Model (CSSOM).
• Combining: Creates the Render Tree (DOM + CSSOM).
• Layout: Calculates positions and sizes of elements.
• Paint: Draws pixels on the screen.

Both the DOM and CSSOM are needed before the Render Tree can be built, making CSS a critical part of rendering.