Cos'è il critical CSS
L'insieme minimo di CSS per il contenuto above the fold, inliner in <head> per accelerare la FCP.
Perché usarlo
- Il CSS normale blocca il rendering
- Il browser attende il download completo del CSS prima di renderizzare
- Critical CSS inline = paint above the fold istantaneo
Implementazione
html
<head>
<!-- Critical CSS inline -->
<style>
body { margin: 0; font-family: sans-serif; }
.hero { height: 100vh; background: #000; }
</style>
<!-- Rest of CSS loads asynchronously -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>Strumenti di generazione
- Critical: pacchetto npm di Addy Osmani
- Penthouse: generatore di critical CSS
- Critters: plugin webpack
- Next.js: ottimizzazione CSS integrata
Regole importanti
- Il critical CSS deve stare sotto 14 KB (entra nel pacchetto TCP iniziale)
- Includi solo gli stili per il viewport
- Carica il resto del CSS in modo asincrono
Automatizza la generazione del critical CSS nella pipeline di build (webpack/gulp) o usa framework con rendering lato server e supporto integrato (Next.js, Nuxt). Per siti semplici può bastare un'estrazione manuale una tantum.
FAQ
Come determino quali stili sono critici?
Strumenti come Critical o Penthouse renderizzano la pagina in un browser headless ed estraggono le regole CSS applicate agli elementi dentro il viewport. Puoi anche analizzare manualmente la struttura della pagina e scegliere i blocchi above the fold principali.
E se il critical CSS non entra in 14 KB?
Potrebbe non entrare nel primo pacchetto TCP, riducendo il beneficio. Prova a ridurlo: rimuovi le regole per gli elementi fuori viewport (footer, sidebar che compaiono solo dopo lo scroll).
Posso usare il critical CSS su un sito responsive?
Sì. Devi generare il critical CSS separatamente per i breakpoint mobile e desktop, oppure includere gli stili dei breakpoint più importanti. Alcuni strumenti sanno generare un insieme universale.
Il critical CSS incide sul CLS?
Indirettamente sì: la pagina si renderizza prima e le immagini o i contenitori con dimensioni specificate non slittano dopo il caricamento del CSS completo. Per il CLS contano di più gli attributi width/height e l'evitare inserimenti dinamici.
Il critical CSS è obbligatorio per buoni Core Web Vitals?
Non obbligatorio, ma è uno dei modi più efficaci per migliorare LCP e FCP, soprattutto sui siti con framework CSS pesanti (Bootstrap, Tailwind).