Getting styles to the browser in an order that paints meaningful content quickly, without shipping a megabyte of unused rules on every page.
What critical CSS is
Critical CSS is the minimum stylesheet needed to render above-the-fold content without a flash of unstyled or wrongly styled layout. Everything else can load asynchronously. The concept predates modern HTTP/2; it still matters on slow connections and large design systems.
Inline vs linked
Two common patterns:
- Inline in
<head>– zero extra round trip; good for small critical slices (under ~14KB gzipped is a rough guide). - Preloaded link – separate file, fetched early with
rel="preload" as="style", then applied.
/* critical.css - hero, header, base typography only */
:root { --font-sans: system-ui, sans-serif; }
body { margin: 0; font-family: var(--font-sans); line-height: 1.5; }
.site-header { display: flex; align-items: center; padding: 1rem; }
.hero { padding: 3rem 1rem; max-width: 40rem; }Full stylesheet loads deferred:
/* load-non-blocking pattern - HTML side */
/* <link rel="preload" href="/css/main.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript> */Extracting critical CSS
Tools (Critical, Penthouse, many bundler plugins) render a URL, walk the DOM above the fold, and output matching rules. Useful in build pipelines for marketing pages with stable heroes. Less reliable for highly dynamic apps where fold content varies by user.
Manual extraction works for small sites: copy base + layout + hero component rules into critical.css, keep the rest in main.css. Review after every layout change.
Splitting by route or layer
/* global.css - tokens, reset, typography - every page */
/* layout.css - header, footer, grid shell */
/* page-home.css - home-only sections */
/* page-blog.css - article list and post template */Each page imports global + layout + one page bundle. Avoid one 400KB file when most rules apply to three pages only.
@import is still a footgun
CSS @import inside a stylesheet blocks parallel downloads. Prefer HTML <link> tags or bundler imports that emit separate files. Exception: cascade layer ordering at the top of an entry file with layered @import – acceptable when the build merges them.
Measuring impact
- Lighthouse ‘Render blocking resources’ audit.
- WebPageTest filmstrip – when does text appear styled?
- Compare First Contentful Paint before and after critical inlining.
Do not over-optimise static brochure sites that already score well. Critical CSS shines on CSS-heavy SPAs and CMS themes with bloated global bundles.
The next tutorial covers utility CSS and frameworks at scale – when Tailwind-style utilities help, when they hurt, and how teams stay sane.