Risolvi 'Rimuovi il CSS inutilizzato' in Lighthouse

Ultima revisione di Arjen Karel a febbraio 2026

Cos'è il CSS inutilizzato?

Il CSS inutilizzato è costituito da dichiarazioni CSS che non vengono utilizzate in nessun punto di una pagina web. È abbastanza normale che una parte del CSS non venga utilizzata. Ad esempio, perché alcune dichiarazioni CSS sono scritte per un altro dispositivo come un desktop o un dispositivo mobile. A volte perché un elemento descritto nel foglio di stile (come un pulsante) non è utilizzato in questa pagina specifica. Il CSS inutilizzato si verifica spesso quando si utilizza un framework come Bootstrap, in cui sono descritti di default molti più elementi nel CSS di quanti ne utilizzerai mai. Oppure quando hai riprogettato la tua pagina ma hai dimenticato di rimuovere i vecchi elementi CSS.

Perché il CSS inutilizzato è dannoso per la velocità della pagina?

Il CSS rallenta il caricamento della pagina. Quando una pagina viene caricata, il browser recupera prima l'HTML da questa pagina. Questo HTML viene convertito in Nodi DOM. Successivamente il browser recupera tutti i fogli di stile. Anche gli stili trovati in questi file CSS vengono convertiti in un altro formato, ovvero il CSSOM. Il DOM e il CSSOM vengono combinati in un render tree. Solo quando questo render tree è stato costruito, un browser inizia a disegnare il primo contenuto.

A causa di questo meccanismo, i file CSS bloccheranno sempre il rendering della tua pagina web. Quando un file CSS è più grande di quanto dovrebbe essere, ci vuole più tempo per scaricare questo file e ciò causa il primo ritardo. Quando un file CSS contiene CSS inutilizzato, ci vuole più tempo per costruire il render tree.

La pagina mediana invia 79 KB di CSS su dispositivi mobili, ma secondo il 2024 Web Almanac, 52 KB di questi sono inutilizzati sulla pagina corrente. Si tratta del 66% di CSS sprecato. Al 90° percentile, il CSS inutilizzato raggiunge i 212 KB. E l'85% di tutte le pagine non supera il controllo sulle risorse di blocco del rendering (render-blocking resources), con il CSS come causa principale.

Il CSS inutilizzato ritarda direttamente il First Contentful Paint (FCP) e il Largest Contentful Paint (LCP) perché il browser non disegnerà alcun pixel fino a quando tutto il CSS non sarà scaricato e analizzato. Sulle pagine con CSS pesanti, influisce anche sull'INP perché fogli di stile più grandi aumentano il costo dei ricalcoli di stile durante le interazioni dell'utente.

Come trovare manualmente il CSS inutilizzato

In Google Chrome puoi visualizzare il CSS inutilizzato nella panoramica Code Coverage. Il Code Coverage fa parte di Chrome DevTools. DevTools è una serie di strumenti integrati disponibili su ogni browser Chrome.

Per prima cosa apri i DevTools con la scorciatoia Ctrl-Shift-J. Quindi digita Ctrl-Shift-P per aprire il Command Palette. Ora digita 'coverage'. Seleziona coverage e ricarica la pagina. Ora vedrai una panoramica dei file CSS e JavaScript che vengono caricati e utilizzati dalla pagina. Inoltre, puoi vedere quanto sono grandi i file e quanta parte del codice viene effettivamente utilizzata. Fai clic su un file CSS per vedere quali regole CSS sono utilizzate (verdi) e quali regole CSS non sono utilizzate (rosse) nella pagina corrente.

Come risolvere l'avviso 'Rimuovi il CSS inutilizzato'

Ci sono diversi modi per risolvere il messaggio 'Rimuovi il CSS inutilizzato' in Lighthouse. Se, per qualche motivo, non è possibile risolvere l'avviso, potresti ottimizzare la consegna del CSS per garantire che il CSS inutilizzato abbia un impatto minore sul tempo di caricamento della tua pagina. Discuterò brevemente le opzioni che hai per correggere il CSS inutilizzato di seguito.

1. Elimina il CSS inutilizzato manualmente

Il modo più logico e migliore, ma anche il più laborioso, è ovviamente rimuovere manualmente il CSS inutilizzato. I passaggi sono semplici:

1. Fai un backup dei tuoi file CSS originali. Potresti rimuovere troppo CSS.
2. Apri la scheda Code Coverage in Google Chrome e visualizza per ogni file CSS di quali dichiarazioni non hai bisogno.
3. Apri il file CSS sul server (o localmente) e controlla ogni dichiarazione CSS inutilizzata. Determina se può essere rimossa. Ma fai attenzione: una dichiarazione CSS inutilizzata in una pagina potrebbe essere necessaria in un'altra pagina. Devi giudicarlo tu stesso!
4. Controlla per ogni dichiarazione CSS se non è duplicata nel CSS. Anche il CSS duplicato verrà segnalato come inutilizzato.
5. Controlla ogni regola CSS per metodi abbreviati (shorthand). È possibile accorciare il CSS? Allora accorcialo!

2. Dividi il CSS in più file

C'è un modo semplice per ridurre rapidamente il numero di regole CSS! Carica solo gli stili di cui hai bisogno per il tuo dispositivo. La tua pagina è spesso visitata da dispositivi mobili. In realtà non è necessario scaricare gli stili per desktop e stampa per questo dispositivo mobile. Non scaricare questi stili fa risparmiare tempo e quindi accorcia la catena delle richieste critiche (critical request chain) in Lighthouse.

Per ottenere questo risultato usa l'attributo media. L'attributo media assicura che un foglio di stile venga utilizzato solo se l'attributo media corrisponde al supporto (media) che stai attualmente utilizzando.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet"
 media="screen and (min-device-width: 1024px)">

Puoi anche utilizzare il trucco dell'attributo media per caricare il CSS non critico senza bloccare il rendering:

<link rel="stylesheet" href="non-critical.css" media="print"
      onload="this.onload=null;this.removeAttribute('media');">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>

Questo carica il CSS senza bloccare il rendering contrassegnandolo come media="print", quindi passa a media="all" una volta caricato.

3. Usa uno strumento automatico per la pulizia del CSS

Ci sono una serie di strumenti intelligenti che possono ripulire automaticamente i tuoi file CSS e rimuovere eventuali riferimenti CSS inutilizzati. Sebbene gli strumenti funzionino incredibilmente bene, non sono impeccabili. A volte questi strumenti rimuovono troppe dichiarazioni CSS. Quindi usali con attenzione e controlla sempre tu stesso il tuo CSS. Il miglior strumento per la pulizia del CSS è PurgeCSS. PurgeCSS viene eseguito su Node.js e si integra con Webpack, PostCSS e Vite. Utilizza estrattori di contenuto (content extractors) per scansionare i tuoi file HTML, JavaScript e di template per i nomi delle classi, quindi rimuove tutti i selettori CSS che non vengono trovati. Puoi anche provare PurifyCSS online per una rapida analisi.

4. Critical CSS

Il Critical CSS è una raccolta di regole CSS necessarie nel viewport (la parte visibile) del tuo sito web. In altre parole: il Critical CSS è il CSS necessario per eseguire il rendering della parte visibile della tua pagina.

Ci sono una serie di strumenti che possono estrarre il Critical CSS dalla tua pagina. Il Critical CSS viene quindi posizionato in linea, nell'head della tua pagina, mentre il file CSS originale viene caricato in modo asincrono (perché il browser lo utilizzi in seguito).

Questo non risolve completamente il problema del CSS inutilizzato. Alla fine il CSS inutilizzato verrà caricato e analizzato, ma il tuo browser non ne sarà infastidito durante la prima fase di rendering.

Lo strumento più utilizzato per trovare ed estrarre il Critical CSS è lo script Node.js Critical. Ci sono anche strumenti online come il Critical Path CSS Generator.

5. Minimizza i file CSS

Il CSS inutilizzato rallenta una pagina, come hai letto sopra, in 2 modi. Il primo è che i file CSS sono più grandi e quindi richiedono più tempo per il download.

Possiamo contrastare questo problema riducendo la dimensione dei file CSS tramite la minimizzazione dei file CSS. Questo viene fatto attraverso un minificatore CSS (CSS minifier). Un minificatore CSS riduce i file CSS rimuovendo spazi, commenti e formattazione. Inoltre, un minificatore CSS può riscrivere le variabili e il codice CSS in modo che occupi meno byte da trasferire.

Un noto strumento di minimizzazione del CSS è css-minify. Minimizza tutti i tuoi file CSS tramite la riga di comando con il comando css-minify -f nomefile. Ci sono anche vari minificatori CSS online come cssminifier.com.

6. Ricompila il tuo framework CSS

Stai usando un framework CSS come Bootstrap CSS? È un framework CSS con cui puoi stilizzare l'intero sito. Questo framework è così completo che ci sono buone probabilità che non ne utilizzerai mai gran parte.

Fortunatamente, i creatori di Bootstrap e di altri framework CSS ne hanno tenuto conto. Questo framework è scritto in SASS. È un linguaggio molto simile al CSS. È costituito da diversi piccoli file SASS che possono utilizzare semplici variabili e funzioni. Ciò rende facile regolare e personalizzare tu stesso il framework con un po' di conoscenza. Puoi semplicemente omettere le parti che non usi e compilarlo facilmente in 1 file CSS finale.

Inoltre, assicurati di non caricare un framework CSS non modificato dal CDN standard. Scarica il framework e compilalo con SASS esattamente come lo desideri, solo con le classi CSS che usi.

7. Prendi in considerazione una diversa strategia CSS

Vuoi essere davvero veloce? Allora potrebbe essere un'idea ripensare la tua strategia CSS. Il modo in cui viene fatto dipende dal tuo sito. Ci sono diverse strade che portano a Roma.

Prendiamo il nostro sito, ad esempio. Carichiamo solo il CSS di cui abbiamo effettivamente bisogno per pagina. Le classi CSS vengono importate automaticamente dal nostro CMS solo quando sono necessarie. Posizioniamo il CSS inline (nell'head della pagina). Questo ci fa risparmiare un'ulteriore richiesta di rete. Questa soluzione è velocissima e facile da mantenere.

Un lettore attento potrebbe pensare: "E per quanto riguarda la memorizzazione nella cache del CSS? Il CSS è più veloce quando i file CSS finali sono memorizzati nella cache". Sì, è giusto. Ecco perché utilizziamo le Speculation Rules per precaricare le pagine nel viewport visibile in modo che una pagina venga sempre recuperata dalla cache, compreso il CSS.

Risolvi 'Rimuovi il CSS inutilizzato' in WordPress

Sei pronto a rimuovere il CSS inutilizzato? Ecco come iniziare in WordPress. In WordPress il CSS può essere aggiunto in 3 modi:

• Direttamente nel template. Nella cartella del tuo template c'è un file chiamato header.php. In questo file ci sono spesso file CSS specifici del template. Potresti modificare questi file CSS come ho descritto sopra. Non dimenticare di eseguire il backup dei tuoi file CSS originali e tieni presente che un aggiornamento del tema può sovrascrivere i tuoi file CSS.
• CSS aggiunto da un plugin. I plugin in WordPress possono aggiungere un numero illimitato di file CSS nel tuo HTML. Questi plugin usano le funzioni wp_register_style e wp_enqueue_style. La maggior parte dei plugin non si preoccupa di controllare se sono attivi nella pagina corrente. Iniettano semplicemente il CSS in ogni pagina, anche se non c'è bisogno di quel CSS specifico del plugin in quella pagina. Lo incontro ogni giorno. Se questo è il caso, puoi usare le funzioni wp_dequeue_style e wp_deregister_style per rimuovere questi stili dalle pagine. È un lavoro di precisione. Se non sei sicuro di come risolverlo, rivolgiti al tuo sviluppatore o chiedimi aiuto. Puoi anche usare il plugin Asset CleanUp con cui puoi impostare per tipo di pagina quali plugin, stili e script possono essere caricati.
• CSS aggiunto da JavaScript. È anche possibile iniettare fogli di stile nella pagina utilizzando JavaScript. Proprio come i fogli di stile, puoi disabilitare questi script per pagina con la funzione wp_dequeue_script. Quando il JavaScript non si carica, neanche il foglio di stile verrà iniettato. Se hai bisogno dello script e del foglio di stile ma non subito dopo il caricamento, è possibile posticipare il caricamento del JavaScript tramite l'attributo defer dello script. Fallo aggiungendo questo codice in functions.php:

function defer_js( $url ) {
    if ( is_user_logged_in() ) return $url; //non interrompere WP Admin
    if ( strpos( $url, 'somescript.js' ) ) {
        str_replace( ' src', ' defer src', $url );
    }
}
add_filter( 'script_loader_tag', 'defer_js', 10 );

Dopo aver ridotto il tuo CSS inutilizzato, verifica il miglioramento con il Real User Monitoring. Nei nostri dati di CoreDash, i siti che inseriscono inline il Critical CSS e rimandano (defer) il resto vedono un miglioramento mediano dell'FCP di 320 ms.