Copertura CSS e stili inutilizzati

I file CSS di grandi dimensioni contengono spesso stili per componenti non presenti nella pagina corrente. Ogni byte inutilizzato aumenta il tempo di parsing, il tempo di costruzione del CSSOM e la dimensione del trasferimento. Una tipica app di produzione può avere il 90% o più di CSS inutilizzato in una determinata pagina.

Apra il pannello Coverage di DevTools (Cmd+Shift+P → Coverage). Avvii la registrazione, interagisca con la pagina e poi interrompa la registrazione. Il pannello mostra ogni file CSS con la percentuale utilizzata ed evidenzia in rosso le regole inutilizzate. Esporti i dati di coverage come JSON per analizzarli.

PurgeCSS analizza i file HTML, JS e dei template alla ricerca dei nomi delle classi e rimuove le regole CSS inutilizzate. Configuri i glob dei contenuti in modo da includere tutti i file che potrebbero fare riferimento ai nomi delle classi. Inserisca nella safelist le classi utilizzate dinamicamente (aggiunte da JS) per evitare rimozioni accidentali.

Il compilatore JIT di Tailwind genera solo le classi di utilità effettivamente utilizzate nei template. Il CSS risultante è molto compatto, spesso di 5-15 kB per un'intera applicazione, perché le utilità inutilizzate non vengono mai generate. Questo è il risultato ideale del purge.

In una configurazione webpack o Vite, aggiunga PurgeCSS con glob dei contenuti che coprano tutti i file dei template. L'opzione safelist accetta stringhe, espressioni regolari e deep-safelist per i pattern complessi di classi dinamiche provenienti da librerie come Headless UI.

I CSS Modules generano nomi di classe univoci per file ed eseguono il tree-shaking dei moduli inutilizzati tramite la configurazione del bundler. Nel bundle vengono inclusi solo i CSS Modules importati: la co-localizzazione dei componenti elimina naturalmente gli stili globali inutilizzati.

Suddivida il CSS per route nei framework come Next.js (con estrazione del CSS per pagina) oppure usi import dinamici con i CSS Modules. Ogni pagina carica solo i propri stili, rendendo significativa l'analisi della coverage per pagina anziché per applicazione.

L'audit "Reduce unused CSS" di Lighthouse stima il potenziale risparmio in byte derivante dalla rimozione delle regole inutilizzate. Identifica le risorse dei fogli di stile con percentuali elevate di contenuti inutilizzati. Lo usi come guida per stabilire quali file analizzare per primi.

L'analisi della coverage rileva solo gli stati visibili durante la registrazione. Gli stati hover, gli stati con modali aperte, gli stati di errore e gli stati autenticati devono essere attivati manualmente durante la registrazione della coverage, per evitare di rimuovere erroneamente i relativi stili.

I fogli di stile globali monolitici accumulano CSS inutilizzato nel tempo, man mano che le funzionalità vengono rimosse. Il CSS per componente (CSS Modules, Styled Components, utilità Tailwind) è più facile da ripulire perché gli stili risiedono insieme ai componenti e vengono rimossi insieme a essi.

Per file CSS legacy di grandi dimensioni, usi prima UnCSS o PurgeCSS in modalità report-only. Ordini le regole per frequenza di utilizzo. Estragga ed elimini gli stili chiaramente inutilizzati dei plugin vendor. Proceda per incrementi per evitare di rimuovere accidentalmente gli stili degli stati limite.

Che cosa misura il pannello Coverage di Chrome DevTools?

L'analisi della coverage CSS con DevTools Coverage e Lighthouse identifica le regole inutilizzate. PurgeCSS e Tailwind JIT automatizzano l'eliminazione del codice morto. I CSS Modules e la suddivisione per route impediscono l'accumulo di stili inutilizzati. Insieme, riducono al minimo il payload CSS e il tempo di parsing.