Definition

The critical rendering path is the sequence of steps a browser performs to convert HTML, CSS and JavaScript into rendered pixels on the screen. Optimising it means prioritising the content needed for the current view so it displays sooner.

The path involves building the DOM from HTML, the CSSOM from CSS, combining them into a render tree, then laying out and painting the page. Resources like CSS and synchronous JavaScript can block this process, delaying first render. Reducing the number, size and order of critical resources helps content appear faster, which supports metrics such as First Contentful Paint and Largest Contentful Paint.

Examples

• Blocking CSS

  A page loads a large stylesheet in the head that must download and parse before anything paints. Inlining the critical CSS shortens the critical rendering path so the header appears sooner.

• Deferring scripts

  A site adds the `defer` attribute to scripts that aren't needed for first paint so they no longer block the critical rendering path, letting the browser paint content earlier.

Sources

• web.dev — Critical rendering path

Related terms

• Render-Blocking Resources
  Resources — typically CSS and synchronous JavaScript — the browser must fetch and parse before it can paint the first frame of a page.
• Page Speed
  How quickly a web page loads and becomes interactive, measured by metrics such as Largest Contentful Paint, Interaction to Next Paint, and Time to First Byte.
• Largest Contentful Paint
  A Core Web Vitals metric measuring how long the largest visible content element on a page takes to render after loading begins.

Where QueryCatch uses this

• SEO Audit
• Page Optimisation