# 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.

> Pagina: https://ui.eneawork.it/blog/critical-css-estrazione
> Markdown: https://ui.eneawork.it/blog/critical-css-estrazione.md

*2026-11-01*

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.

La pagina /blog/cosa-sono-i-core-web-vitals, servita il 1 novembre 2026 alle 16:02 UTC, dichiara 5 fogli di stile per 93.756 byte prima del primo paint: fonts.css 5.428, showcase.css 14.304, library.css 17.569, components-ui.css 14.308 e index-DTBUz1iZ.css 42.147. Lo stesso HTML pesa 35.690 byte e i font precaricati sono 5. Byte letti dal Content-Length con curl -sS. Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Definizione e soglie: web.dev, licenza CC BY 4.0; pacchetto critical, licenza Apache-2.0.

## Cosa mettere nel critico

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/blog

critical 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.

## FAQ

### 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.