Ottimizzazione CSS: Prestazioni, Dimensioni e Velocità di Caricamento

Perché le prestazioni CSS contano

CSS è una risorsa che blocca il rendering. Il browser non può renderizzare la pagina senza caricare il CSS. I file CSS grandi aumentano il tempo di First Contentful Paint (FCP).

Il CSS inutilizzato aumenta la dimensione della pagina e prolunga il tempo di caricamento. Tipicamente il 60-80% del CSS su un sito web non viene utilizzato.

L'ottimizzazione CSS migliora le metriche Core Web Vitals (specialmente LCP e CLS). Il CSS ottimizzato fornisce un'esperienza utente più veloce e fluida.

Minificazione CSS

La minificazione riduce la dimensione del file del 20-40% rimuovendo spazi, commenti e caratteri inutili dal CSS.

Strumenti: cssnano, clean-css, Terser (supporto CSS). Usate il plugin di minificazione nella vostra pipeline di build (Webpack, Vite, Rollup).

Combinata con la compressione Gzip/Brotli, la minificazione può ridurre la dimensione del file CSS del 70-80%.

Usate sempre CSS minificato nei build di produzione. Usate CSS leggibile in sviluppo.

CSS Critico

Il CSS critico è il CSS necessario per il contenuto above-the-fold (prima vista). Aggiungete questo CSS inline in <head>.

Caricate il CSS non critico in modo asincrono: <link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">.

Strumenti: Critical (pacchetto npm), Penthouse, Critters (plugin Webpack). Questi strumenti estraggono automaticamente il CSS critico.

Dimensione del CSS critico: Mantenete sotto 14KB (TCP slow start window). CSS critico più grande gonfia il payload iniziale.

Rimozione del CSS Inutilizzato

PurgeCSS rimuove i selettori CSS inutilizzati. Usato insieme a framework come Tailwind CSS, Bootstrap.

Configurazione PurgeCSS: Definite content (file HTML/JS da scansionare) e safelist (selettori da mantenere).

Chrome DevTools Coverage tab: Rilevate il CSS inutilizzato. Il rapporto Coverage mostra quanto di ogni file viene utilizzato.

CSS-in-JS: Librerie come Styled Components, Emotion renderizzano solo gli stili utilizzati. Il CSS inutilizzato viene rimosso automaticamente.

Strategie di Caricamento CSS

Code splitting: Create un file CSS separato per ogni pagina. Usate Webpack CSS code splitting o lo splitting automatico di Vite.

Lazy loading: Lazy load il CSS per componenti specifici (modal, tooltip). Caricate il file CSS on demand con dynamic import().

Caricamento font: Usate font-display: swap con @font-face. Minimizzate i problemi di FOIT e FOUT.

Media queries: Dividete il CSS condizionale (stampa, dark mode) in file separati: <link rel="stylesheet" href="print.css" media="print">.

Preconnect: Usate <link rel="preconnect" href="https://fonts.googleapis.com"> per fonti CSS esterne (Google Fonts).

Migliori Pratiche CSS

Mantenete bassa la specificità CSS. Le catene di selettori profonde (div > ul > li > a) riducono le prestazioni. Usate selettori piatti.

Usate Flexbox e Grid. I layout basati su float richiedono più CSS e si renderizzano più lentamente.

CSS containment: Limitate l'ambito di rendering dell'elemento con contain: layout paint style. Questo permette al browser di ottimizzare l'area di rendering.

Will-change: Usate will-change: transform su elementi animati. Ma l'uso eccessivo riduce le prestazioni.

Usate CSS custom properties (variabili). Gestite i valori ripetuti (colore, dimensione) con variabili.