Critical Rendering Path

The Steps From HTML to Pixels

The critical rendering path is the sequence of steps a browser follows to turn HTML, CSS and JavaScript into the pixels on the screen. Anything that delays these steps delays the first visible content.

The browser handles these stages in order, although it overlaps some of the work:

• DOM construction. The browser parses the HTML into the Document Object Model (DOM), a tree of all the elements on the page.
• CSSOM construction. It parses the CSS into the CSS Object Model (CSSOM), a matching tree of style rules.
• Render tree. The DOM and CSSOM are combined into a render tree that contains only the visible elements and their computed styles.
• Layout. The browser calculates the size and position of every element in the render tree.
• Paint. The browser fills in the pixels for each element, and the layers are combined onto the screen.

How CSS and JavaScript Can Block the Path

The browser can read HTML in pieces, but it cannot draw a correct page until it knows the styles. CSS is therefore render blocking: the browser will not paint content that might change once a stylesheet arrives. Scripts add a second problem. When the parser meets a regular script tag, it stops building the DOM, downloads the script if needed and runs it, because the script could change the document. Only then does parsing continue. The details of this behavior are covered in the render-blocking resources article.

The result is a chain. A slow stylesheet at the top of the page delays the first paint, and a slow script in the middle of the HTML delays everything after it. Browsers look ahead for resources to fetch early, so the chain is often less obvious than it appears, but the dependency remains.

Why the Path Affects What Visitors See

The critical rendering path largely determines when the first content appears. A long chain means a blank screen for longer, which is why it is closely linked to metrics such as First Contentful Paint. It also affects when the main content is painted and how soon the page responds to input.

Not every page needs the whole path to finish before anything shows. Pages that deliver less blocking CSS and JavaScript up front can paint sooner, while pages that load large scripts before the content can show a white screen for seconds. The path explains why two pages with similar files can behave very differently.