CSS Performance – Critical CSS & Unused CSS

Critical CSS is the minimal set of styles needed for above‑the‑fold content.

• Extract it manually or with tools like Critical, PurgeCSS, UnCSS.
• Inline critical CSS in the <head> to avoid a render‑blocking request.
• Load the rest of the stylesheet with rel="preload" + as="style" and change to rel="stylesheet" on onload.

---

Example: Inline critical CSS + preload

<style>
  .hero{background:#333;color:#fff;padding:4rem;text-align:center;}
</style>
<link rel="preload" href="/css/main.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/main.css"></noscript>