Critical CSS

The styles needed for the first screen, inlined so it shows fast.

What is critical CSS?

Critical CSS is the small set of styles needed for the first screen, put straight into the page so it shows fast while the rest loads.

<head>
  <style>/* header and hero styles only */</style>
  <link rel="stylesheet" href="site.css" media="print" onload="this.media='all'">
</head>

Level: Master · More CSS terms at this level

Updated September 27, 2026