What is the Critical Rendering Path?

Back to learning

The Critical Rendering Path is the steps a browser goes through to display a website page and its associated CSS, Fonts, and JavaScript on a screen.

The critical rendering path includes building the Document Object Model (DOM), which is a parsed representation of the HTML document, building the CSS Object Model (CSSOM) which contains all the styles of the page, generating the render tree, and finally determining the layout based on the screen size.

The path happens as follows:

1. The document object model is created as the main HTML document of a page is parsed.
2. As the HTML is parsed it may reference JavaScript, which may alter the DOM.
3. The HTML can also reference CSS, either inline or as an external stylesheet, which in turn builds the CSS object model.
4. The browser then combines the DOM and CCSOM to create the Render Tree which allows the browser to determine the size and location of everything on the page.
5. Once layout is determined, the page is displayed on the screen.