Performance
Estrarre il CSS critico senza rompere il resto
Il CSS critico è la parte di foglio che serve al primo schermo, incisa nell'HTML. La pagina articolo qui carica 93.756 byte di CSS prima del primo paint.
In sintesi
- Il CSS critico contiene solo le regole del primo schermo e viaggia dentro l'HTML.
- La pagina articolo caricava 5 fogli per 93.756 byte prima del primo paint, misurati il 1 novembre 2026.
- Il critico va rigenerato a ogni deploy: è una fotografia di una route e di un viewport.
Il CSS critico è la parte di foglio che serve al primo schermo, incisa nell'HTML; il resto arriva dopo, senza bloccare il paint. La pagina articolo di questo sito carica 93.756 byte di CSS prima di dipingere.
Cosa mettere nel critico
| Parte del foglio | Nel critico | Dopo |
|---|---|---|
| Reset e tipografia di base | sì, poche regole | no |
| Header e hero del primo schermo | sì | no |
| Griglia dei componenti | no | sì, a fine pagina |
| Stili di stampa | no | sì, con media=print |
| Tema scuro | solo i valori iniziali | sì, il resto |
La regola pratica: se una regola non cambia ciò che si vede senza scorrere, non è critica. Il resto va in un foglio esterno caricato con preload e applicato con onload.
Il markup da servire
preload scarica il foglio in parallelo all'HTML, onload lo applica quando è pronto, noscript copre chi non esegue JavaScript. Il foglio resta cacheabile una volta sola, invece di essere ripetuto in ogni pagina.
Il comando
npx critical https://example.com/blog --inline --base ./dist --dest ./dist/blogcritical apre la pagina in un browser headless, calcola le regole usate sopra la piega, le incisa nell'HTML e rimanda il resto. Va eseguito a ogni deploy: un foglio cambiato senza rigenerare il critico lascia regole vecchie nell'HTML.
La limitazione
Il critico è una fotografia: dipende da viewport, route e stato della pagina. Le 93.756 byte misurate qui descrivono la pagina senza ottimizzazione, quindi non sono un risultato; e il CSS inline non si cachea, quindi ogni pagina porta il suo peso.
Dove continuare
Nel catalogo EneUI: i componenti, il blocco empty state e il record spotlight card, tre esempi di markup che non serve al primo schermo. Le guide: il code splitting per route e il preload dei font; il confronto Tailwind contro CSS Modules spiega quanto CSS genera ogni approccio.
Domande frequenti
Quanto CSS deve stare nel critico?
Poche regole: reset, tipografia di base, header e hero. Oltre i 14 KB inline il guadagno si annulla, perché l'HTML cresce a ogni pagina e non si cachea.
Il CSS critico serve anche con HTTP/2?
Sì. HTTP/2 riduce il costo di più richieste, non il tempo in cui il browser resta bloccato da un foglio che non ha ancora. Il critico toglie quel blocco.
Come si genera senza caricare la pagina in produzione?
Esegui critical su un server locale con il build completo, indicando base e dest. Il risultato va incluso nel deploy, non calcolato a runtime.
Cosa succede a chi non esegue JavaScript?
Il tag noscript serve il foglio completo. Senza, la pagina resta con il solo critico e perde gli stili sotto la piega.
Il CSS inline peggiora la cache?
Sì, ogni pagina porta il proprio critico dentro l'HTML e non può condividerlo. Per questo va tenuto corto e rigenerato solo quando il layout cambia.