# Extracting critical CSS without breaking the rest Critical CSS is the part of the stylesheet the first screen needs, inlined in the HTML. This article page loads 93,756 bytes of CSS before it paints. > Page: 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.