# Critical CSS: how much the first paint moves

A 183,789-byte stylesheet in the head gives FCP 1,308 ms; inlining the first-screen rules and deferring the rest gives 276 ms, same bytes.

> Page: https://ui.eneawork.it/blog/performance-css-critico-misurato
> Markdown: https://ui.eneawork.it/blog/performance-css-critico-misurato.md

*2026-11-01*

Inlinare il CSS critico ha anticipato il primo paint di 1.032 ms: con un foglio da 183.789 byte in testa il FCP è 1.308 ms, con le regole del primo schermo inline e il resto differito scende a 276 ms. I byte totali sono gli stessi, cambia l'ordine.

Due pagine identiche con un foglio generato da 2.600 regole (183.789 byte), servite da un server statico locale e misurate cinque volte ciascuna in Chrome 155 headless con puppeteer, rete Slow 4G simulata (1,6 Mbps, 150 ms di RTT) e CPU a 4x. Foglio bloccante: FCP 1.308 ms, LCP 1.308 ms, CLS 0, load 1.291 ms, 184.399 byte. Critico inline più media="print": FCP 276 ms, LCP 276 ms, CLS 0,0001, load 1.278 ms, 184.550 byte. Comando: node scripts/perf-lab.js http://localhost:3200/css-critical.html 5. La home del sito carica 5 fogli per 22.486 byte, misurati su un caricamento a freddo. Catalogo: 111.985 componenti, 1.556 blocchi, 12.808 icone da 1.472 librerie, letti da /api/stats il 1 novembre 2026. Soglie: web.dev, CC BY 4.0.

## Le due misure

Il browser non dipinge finché non ha scaricato e applicato il foglio bloccante: 1.032 ms di attesa su una rete lenta. Con il critico inline dipinge subito e tratta il resto come un foglio che non serve al primo schermo.

## Il codice

/* regole del primo schermo, non il framework intero */ .hero { font: 600 28px/1.2 system-ui; }

media="print" rende il foglio non bloccante e onload lo riporta a all appena arriva. Il noscript copre chi non esegue JavaScript, che altrimenti resterebbe senza stili.

## Quanto costa inline

Le regole critiche finiscono nell'HTML di ogni pagina: 2 KB su una pagina sono 2 KB su mille pagine, e non si mettono in cache come un file. Il resto resta un file unico con cache lunga, quindi 183.789 byte si scaricano una volta sola. È un compromesso, non un guadagno gratuito.

## Come si estrae

## Il limite da dichiarare

La prova ha un foglio solo e nessuna cache: alla seconda visita il foglio bloccante arriva dal disco o dal service worker, e il guadagno si riduce a pochi millisecondi. Il critico inline alza l'HTML e quindi il TTFB, e se dimentichi una regola il CLS peggiora: nella nostra prova il foglio differito ha spostato il layout di 0,0001.

## Dove continuare

Il catalogo EneUI indicizza 111.985 componenti, per esempio pricing, e la griglia 1.556 blocchi: ogni blocco aggiunge CSS al foglio. Leggi come si fissa un performance budget, cosa sono i Core Web Vitals, il bundle splitting e il confronto framework frontend a confronto.

## FAQ

### Cos'è il CSS critico?

È la parte di CSS che serve a disegnare ciò che si vede senza scroll. Si mette inline nell'HTML, il resto si carica dopo il primo paint.

### Quanto si guadagna davvero?

Nella nostra prova 1.032 ms di FCP su una rete lenta. Su una connessione veloce o con il foglio in cache il guadagno scende a poche decine di millisecondi.

### media=print con onload è sicuro?

Funziona, ma richiede il noscript e un onload che scatti davvero. In alternativa si usa rel=preload seguito da un cambio di rel, con gli stessi rischi.

### Il CSS critico peggiora il CLS?

Può peggiorare se il critico non copre le regole del primo schermo: il resto arriva dopo e sposta il layout. Nella prova il CLS è passato da 0 a 0,0001.

### Si può fare tutto in build?

Sì. Gli strumenti che estraggono il critico analizzano l'HTML e il CSS e generano il blocco inline: la parte difficile è scegliere quali viewport considerare.