Preloading Critical CSS for Faster First Paint

Q: Preloading Critical CSS for Faster First Paint

## Preloading Critical CSS CSS is render-blocking by default — the browser will not paint anything until it has downloaded and parsed all CSS in the . By preloading your critical CSS, you tell the browser to start fetching it as early as possible, often saving 100-300ms on First Contentful Paint (FCP). ### Basic Preload for CSS html The preload hint

Preload critical CSS stylesheets to eliminate render-blocking and improve First Contentful Paint. Learn the correct attributes and fetchpriority settings.

Preload Use Cases

Detailed Explanation

Preloading Critical CSS

CSS is render-blocking by default — the browser will not paint anything until it has downloaded and parsed all CSS in the <head>. By preloading your critical CSS, you tell the browser to start fetching it as early as possible, often saving 100-300ms on First Contentful Paint (FCP).

Basic Preload for CSS

<link rel="preload" href="/css/critical.css" as="style"
      fetchpriority="high" />
<link rel="stylesheet" href="/css/critical.css" />

The preload hint tells the browser to start fetching the stylesheet immediately, even before the HTML parser reaches the <link rel="stylesheet"> tag. The as="style" attribute is required so the browser assigns the correct priority and Content-Security-Policy checks.

Critical CSS + Deferred Non-Critical CSS

A common performance pattern splits CSS into critical (above-the-fold) and non-critical (below-the-fold) stylesheets:

<!-- Critical CSS: preloaded and render-blocking -->
<link rel="preload" href="/css/critical.css" as="style"
      fetchpriority="high" />
<link rel="stylesheet" href="/css/critical.css" />

<!-- Non-critical CSS: loaded asynchronously -->
<link rel="preload" href="/css/below-fold.css" as="style"
      fetchpriority="low" />
<link rel="stylesheet" href="/css/below-fold.css"
      media="print" onload="this.media='all'" />

With fetchpriority

Setting fetchpriority="high" on critical CSS ensures it is prioritized over other resources like images or non-critical scripts. This is especially useful when the browser is deciding which of many resources to fetch first.

Common Pitfalls

Missing the stylesheet link — preloading CSS without a corresponding <link rel="stylesheet"> will trigger an "unused preload" warning
Preloading too many stylesheets — preloading 5+ CSS files can actually slow down the critical rendering path because all of them compete for bandwidth
Using preload for already-inlined CSS — if your critical CSS is inlined in the HTML, preloading a separate file is wasteful

Use Case

A content-heavy website with a 50KB critical CSS file preloads it with fetchpriority="high" to ensure the browser starts downloading it immediately. Non-critical CSS (animations, below-fold layout) is loaded asynchronously using the print media trick. This reduces FCP from 2.1s to 1.4s on a 3G connection.

Try It — Preload Generator

Open full tool →