Skip to content

Critical CSS

Critical CSS is the minimum set of styles required to render the important content visible during the initial page load.

Critical CSS is the minimum set of styles required to render the important content visible during the initial page load.

It is used to reduce how much CSS the browser needs before displaying that content.

What It Means in Practice

A website may use one large stylesheet containing rules for:

  • The header
  • Footer
  • Forms
  • Modals
  • Galleries
  • Blog pages
  • Product pages
  • Components that do not appear on the current page

The browser may not need all of that CSS before rendering the top of one specific page.

Critical CSS focuses on the styles needed immediately.

How It Works

Critical styles may be placed directly in the initial document or otherwise prioritized for early loading.

Less important styles can then load separately.

This can shorten the critical rendering path by reducing the amount of CSS the browser needs before presenting the initial content.

Why It Matters

Stylesheets are often render blocking.

Large or poorly organized CSS can therefore delay visible content even when much of the file is not needed for the current page.

Common Problems

Common problems include:

  • Inlining too much CSS
  • Maintaining separate critical styles manually
  • Duplicating CSS between inline and external files
  • Generating different critical CSS incorrectly for dynamic pages
  • Focusing on critical CSS while ignoring much larger performance problems
  • Treating every stylesheet as equally urgent

How to Improve

Start by reducing unnecessary CSS generally.

Split very large bundles where the architecture supports it and identify the styles required for initial rendering.

Use critical CSS where the added complexity produces a measurable benefit.

Avoid turning an optimization technique into another maintenance problem.