Defer non-critical CSS

Demián Renzulli
Demián Renzulli
X GitHub

CSS files are render-blocking resources: they must be loaded and processed before the browser renders the page. Web pages that contain unnecessarily large style sheets take longer to render.

Learn how to defer non-critical CSS to optimize the Critical Rendering Path and improve First Contentful Paint (FCP).

Suboptimal CSS loading

The following example contains an accordion with three hidden paragraphs of text, each of which is styled with a different class:

This page requests a CSS file with eight classes, but not all of them are necessary to render the "visible" content.

The goal of this guide is to optimize this page so only the critical styles are loaded synchronously, while the rest (including the paragraph styles), are loaded in a non-blocking way.

Measure

Run Lighthouse in DevTools to review impactful metrics.

  1. Open the demo in Chrome.
  2. Open Chrome DevTools.
  3. Select the Performance panel.
  4. From inside the panel, reload the page.

The report shows the First Contentful Paint metric with a value of "1s", and the opportunity Eliminate render-blocking resources, pointing to the style.css file:

Lighthouse report for unoptimized page, showing FCP of '1s' and 'Eliminate blocking resources' under 'Opportunities'
The Lighthouse report suggests simplifying your style sheet to make your page load faster.

In the resulting trace, the FCP marker is placed immediately after the CSS finishes loading: