Critical CSS
ELI5 — The Vibe Check
Critical CSS is like packing only what you need for the first 5 minutes of your trip in your carry-on. The browser gets just enough CSS to render what's visible immediately, and the rest of your styles fly in on the next plane.
Real Talk
Critical CSS extracts and inlines the minimum CSS needed to render above-the-fold content, eliminating render-blocking stylesheet requests. The remaining CSS loads asynchronously. Tools like Critical or Critters automate this extraction during build time.
Show Me The Code
<head>
<style>/* inlined critical styles */</style>
<link rel="preload" href="/full.css" as="style" onload="this.rel='stylesheet'">
</head>
When You'll Hear This
"Inlining critical CSS cut our First Contentful Paint by 1.5 seconds" / "The build step extracts critical CSS automatically for each route"
Related Terms
Above the Fold
Above the fold is everything you see before scrolling — like a newspaper's front page headline. It's prime real estate.
First Paint
First Paint is the moment your browser stops showing a blank white screen and puts literally anything on it.
Performance Budget
A performance budget is like a calorie limit for your website.