---
title: "Critical CSS and render-blocking resources"
category: performance
status: recommended
url: https://webspecification.com/spec/performance/critical-css/
updated: "2026-05-29T09:13:20.000Z"
sources:
- title: "web.dev — Extract critical CSS"
url: "https://web.dev/articles/extract-critical-css"
publisher: "web.dev"
- title: "web.dev — Defer non-critical CSS"
url: "https://web.dev/articles/defer-non-critical-css"
publisher: "web.dev"
- title: "MDN — Render-blocking resources"
url: "https://developer.mozilla.org/en-US/docs/Glossary/Render_blocking"
publisher: "MDN"
- title: "Chrome for Developers — Eliminate render-blocking resources"
url: "https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources"
publisher: "Google"
source_repo: undefined
licence: CC-BY-4.0
---
# Critical CSS and render-blocking resources
> Inline the CSS needed for above-the-fold content and defer the rest. Render-blocking resources in are the single biggest cause of slow first paint.
## What it is
A render-blocking resource is one the browser must fetch and parse before it can paint pixels. By default, every `` and every synchronous `
```
Use `async` only for truly independent third-party scripts.
**Don't block on third-party CSS.** Webfont providers, analytics dashboards, and chat widgets that drop a stylesheet in `` add an unknown origin to your critical path. Self-host or load asynchronously.
**Watch the `media` attribute.** `` does not block rendering. Useful for splitting print styles out.
## Common mistakes
- Inlining the entire stylesheet. The HTML balloons; nothing is cacheable across pages.
- Forgetting the `