CSS non usato WordPress: come trovarlo e ridurlo

01Che cos'è il CSS non usato WordPress

Il CSS non usato WordPress nasce quando un tema o un plugin carica fogli di stile completi, ma la pagina usa solo una parte delle regole. Il browser scarica tutto, lo legge e poi scarta ciò che non serve.

Il costo si vede su più fronti: più byte da scaricare, più lavoro per calcolare lo stile e, spesso, un caricamento più lento del contenuto principale. Per questo la riduzione del CSS è uno dei modi più diretti per velocizzare sito WordPress.

02Trova il CSS non usato con Chrome DevTools

Chrome DevTools include lo strumento Coverage, che registra quali righe di CSS e JavaScript la pagina usa durante il caricamento. Non serve installare nulla. Le etichette dei pulsanti sono in inglese e possono cambiare con la versione di Chrome.

• Apri la pagina da controllare in una finestra di Chrome senza estensioni, per esempio in incognito.
• Apri DevTools con Cmd+Option+I su Mac, oppure Ctrl+Shift+I su Windows e Linux.
• Premi Cmd+Shift+P (Ctrl+Shift+P), digita Show Coverage e premi Invio.
• Clicca il pulsante Start instrumenting coverage and reload page. La pagina si ricarica e il conteggio parte.
• Naviga nella pagina come farebbe un visitatore: apri il menu, una tendina, un modulo.
• Clicca Stop instrumenting coverage and show results. Nella lista, ogni file mostra la quota di byte inutilizzati.

03Leggi il risultato senza farti ingannare

Clicca un file CSS per vedere le righe non usate, evidenziate. Il dato vale solo per la pagina e per le azioni che hai fatto. Un menu chiuso o una finestra modale non compare nel conteggio finché non la apri.

• Ripeti il test su più pagine del template, non solo sulla home.
• Non cancellare una regola che serve a un elemento visibile solo al clic, al passaggio del mouse o dopo lo scorrimento.
• Confronta il risultato su mobile: il tema può caricare regole diverse per schermi piccoli.
• Un widget di terze parti, come una chat, spesso porta molto CSS inutilizzato. Valuta prima se puoi disattivarlo.

04Riduci il CSS senza rompere il layout

Ci sono tre strade, dalla più semplice alla più invasiva.

• Disattiva i plugin e i blocchi che caricano CSS che la pagina non usa. Verifica prima che nessuna funzione dipenda da loro.
• Usa un purger CSS, che rimuove le regole non usate dalle pagine del template. Dopo ogni intervento, controlla il risultato visivo.
• Carica il CSS in modo condizionato, solo nelle pagine che lo usano.

05Come tenere il CSS pulito nel tempo

Il CSS non usato torna ogni volta che aggiungi un plugin o un blocco nuovo. Fissa un controllo ricorrente.

• Ripeti il controllo Coverage dopo ogni nuovo plugin.
• Tieni un elenco dei plugin attivi e del motivo per cui ciascuno è lì.
• Confronta il peso delle pagine principali prima e dopo ogni modifica.
• Non aggiungere CSS a mano nel tema per correggere un problema di layout senza motivarlo.

06Come Nucleo gestisce il CSS

Nucleo compila ogni pagina in HTML e CSS al salvataggio. Il frontend riceve una pagina già pronta e non chiama server esterni, quindi nessun lavoro di compilazione si ripete a ogni visita.

Nucleo Pro include il purger CSS interno e l'audit degli asset. Il comando CLI nucleo critical produce il CSS critico e il CSS realmente usato per ogni template.

• nucleo/css-purge avvia il purger interno per un template.
• nucleo/assets-audit avvia l'audit degli asset e nucleo/assets-report ne legge l'ultimo risultato.
• nucleo/assets-rules-set imposta regole di dequeue, replace e defer per i file che non servono.
• Dopo ogni regola, controlla il template in desktop e mobile.

07Checklist prima di pubblicare

Prima di mettere online una riduzione del CSS, verifica questi punti.

• La home e almeno una pagina interna sono controllate su desktop e mobile.
• Menu, moduli e pulsanti funzionano dopo la modifica.
• Il conteggio Coverage è stato ripetuto sulle pagine principali.
• Il report di qualità non segnala problemi bloccanti.