中文
devexamples
← Recipes

阅读中文版本

Reduce Render-Blocking CSS

Inline critical CSS, defer the rest, and split stylesheets so the first paint is not blocked by a large global stylesheet.

~30 minperformancefrontendcss

Task

Split and defer CSS so the initial render does not wait on a large stylesheet.

When to use this

First contentful paint is delayed because a single large CSS file blocks rendering.

Prerequisites

  • A build pipeline for CSS
  • A way to identify critical styles
  • Lighthouse or WebPageTest

Steps

1. Inline above-the-fold CSS and defer the rest.

<style>/* critical above-the-fold styles */</style>
<link rel="stylesheet" href="/styles/app.css" media="print" onload="this.media='all'">

Expected output: The first paint uses inline critical CSS while the rest loads non-blocking.

2. Provide a no-JS fallback.

<noscript><link rel="stylesheet" href="/styles/app.css"></noscript>

Expected output: Users without JavaScript still receive the full stylesheet.

Troubleshooting

Problem

Flash of unstyled content

Solution

Inline enough critical CSS so the above-the-fold area renders correctly immediately.

Problem

Critical CSS guess wrong

Solution

Generate it from real page renders rather than by hand.

Limitations

  • Inline CSS increases HTML size and hurts caching.
  • Critical CSS must be regenerated per template.
  • Late non-critical styles can cause reflow.

What this recipe does

Split and defer CSS so the initial render does not wait on a large stylesheet.

First contentful paint is delayed because a single large CSS file blocks rendering.

Prerequisites

  • A build pipeline for CSS
  • A way to identify critical styles
  • Lighthouse or WebPageTest

Procedure

  1. Inline above-the-fold CSS and defer the rest.
<style>/* critical above-the-fold styles */</style>
<link rel="stylesheet" href="/styles/app.css" media="print" onload="this.media='all'">

Expected result: The first paint uses inline critical CSS while the rest loads non-blocking.

  1. Provide a no-JS fallback.
<noscript><link rel="stylesheet" href="/styles/app.css"></noscript>

Expected result: Users without JavaScript still receive the full stylesheet.

How to confirm it worked

Run the commands above and confirm every expected result in order. If a step does not produce the stated output, use the troubleshooting notes before continuing. A passing run shows first contentful paint improves and no unstyled flash appears; the build regenerates critical CSS.

Troubleshooting

Flash of unstyled content — Inline enough critical CSS so the above-the-fold area renders correctly immediately.

Critical CSS guess wrong — Generate it from real page renders rather than by hand.

Limitations

  • Inline CSS increases HTML size and hurts caching.
  • Critical CSS must be regenerated per template.
  • Late non-critical styles can cause reflow.