Chi Siamo Area Clienti Promo del Mese Dicono di Noi Portfolio FAQ Blog
Contattaci
WordPress

WP Rocket: Remove Unused CSS — Come Funziona e Come Risolvere i Problemi

Gianluca Gentile
Gianluca Gentile
· 9 min di lettura

Che Cosa Fa la Funzione Remove Unused CSS

La funzione Remove Unused CSS di WP Rocket e una delle funzionalita piu potenti — e allo stesso tempo piu delicate — del plugin. Il suo obiettivo e semplice da spiegare ma complesso da realizzare: analizzare ogni pagina del sito, identificare quali regole CSS vengono effettivamente utilizzate e generare un foglio di stile ridotto che contiene solo gli stili necessari per quella specifica pagina.

In un sito WordPress tipico, il browser carica diversi file CSS: quelli del tema, quelli dei plugin, eventuali framework come Bootstrap o Tailwind. Di tutti questi stili, ogni singola pagina utilizza mediamente solo il 10-30% delle regole disponibili. Il restante 70-90% viene scaricato, analizzato e scartato dal browser, sprecando banda e rallentando il rendering della pagina.

Google PageSpeed Insights segnala questo problema con la voce “Reduce unused CSS”, che spesso rappresenta una delle maggiori opportunita di miglioramento del punteggio. La funzione Remove Unused CSS di WP Rocket affronta direttamente questa problematica, generando file CSS ottimizzati specifici per ogni pagina o tipo di pagina.

Come Funziona Tecnicamente

Quando attivi Remove Unused CSS, WP Rocket avvia un processo di analisi che funziona in questo modo: il sistema invia ogni URL del sito ai server di WP Rocket (tramite il servizio SaaS incluso nella licenza), dove un motore di rendering headless carica la pagina, analizza il DOM e identifica quali selettori CSS sono effettivamente utilizzati. Il risultato e un file CSS ottimizzato che viene salvato nella cartella cache del sito.

Questo processo avviene in modo asincrono: dopo l attivazione, WP Rocket accoda tutte le pagine del sito e le elabora progressivamente. Per un sito con 50 pagine, il processo si completa in pochi minuti. Per siti con centinaia o migliaia di pagine, possono essere necessarie alcune ore. Durante questo periodo, le pagine non ancora elaborate continuano a servire i CSS completi.

Schermata delle impostazioni di ottimizzazione file CSS e JavaScript in WP Rocket

Una volta generato, il CSS ottimizzato viene servito inline nell HTML della pagina (per il CSS critico above-the-fold) oppure come file esterno caricato in modo asincrono. I file CSS originali vengono caricati con l attributo media="print" e poi commutati a media="all" tramite JavaScript dopo il caricamento della pagina. Questo approccio garantisce che tutti gli stili siano eventualmente disponibili, anche quelli necessari per interazioni dinamiche.

I Problemi Piu Comuni e Le Loro Cause

Nonostante la sofisticazione del sistema, Remove Unused CSS puo causare problemi visivi su alcuni siti. Comprendere le cause di questi problemi e fondamentale per risolverli efficacemente.

Layout Rotti o Elementi Mancanti

Il problema piu frequente e la scomparsa di elementi visivi o il disallineamento del layout. Questo accade quando il motore di analisi non riesce a rilevare tutti gli stili necessari. Le cause principali sono:

Flash di Contenuto Non Stilizzato (FOUC)

Un altro problema comune e il FOUC: per una frazione di secondo, la pagina appare senza stili (testo nero su sfondo bianco) prima che il CSS venga applicato. Questo accade quando il CSS critico inline non include tutti gli stili necessari per il rendering above-the-fold, oppure quando il caricamento asincrono dei CSS completi introduce un ritardo visibile.

Problemi con Plugin di Page Builder

Elementor, Divi, WPBakery e altri page builder utilizzano sistemi CSS complessi con stili generati dinamicamente. Remove Unused CSS puo avere difficolta a gestire correttamente questi stili, soprattutto quando il builder utilizza CSS-in-JS o genera fogli di stile on-the-fly in base al contenuto della pagina.

La SafeList: Escludere CSS dalla Rimozione

La soluzione principale ai problemi di Remove Unused CSS e la SafeList. Si tratta di una lista di file CSS e/o selettori che WP Rocket deve sempre mantenere, senza rimuoverli, indipendentemente dall analisi di utilizzo.

Nella configurazione di WP Rocket, trovi due aree di SafeList nella sezione Ottimizzazione File:

Per i selettori, puoi utilizzare pattern parziali: inserendo .elementor- mantieni tutti i selettori che iniziano con “elementor-“, utile quando un page builder utilizza centinaia di classi diverse. Inserendo (.*).swiper mantieni tutti i selettori che contengono “swiper”, coprendo librerie di slider come Swiper.js.

Fallback CSS: La Rete di Sicurezza

WP Rocket include un meccanismo di fallback che garantisce il caricamento completo degli stili anche quando il CSS ottimizzato non copre tutti i casi. I file CSS originali vengono mantenuti e caricati in modo asincrono come backup. Questo significa che, nel peggiore dei casi, gli stili mancanti appaiono con un leggero ritardo ma non sono persi definitivamente.

Se il fallback non e sufficiente e gli utenti segnalano problemi persistenti, puoi attivare l opzione “Load CSS Asynchronously” come alternativa a Remove Unused CSS. Questa opzione carica tutti i file CSS in modo asincrono senza rimuovere le regole non utilizzate: il beneficio in termini di prestazioni e inferiore, ma il rischio di problemi visivi e praticamente nullo.

Quando NON Utilizzare Remove Unused CSS

Esistono scenari in cui Remove Unused CSS causa piu problemi di quanti ne risolva, e disattivarlo e la scelta migliore:

Impatto sulle Prestazioni: Prima e Dopo

Quando funziona correttamente, Remove Unused CSS produce miglioramenti significativi e misurabili. Su un sito WordPress tipico con tema premium e 10-15 plugin attivi, i risultati medi sono:

Il beneficio maggiore si osserva su siti che utilizzano framework CSS completi come Bootstrap (circa 190 KB) o Tailwind senza purging (oltre 3 MB): in questi casi, Remove Unused CSS puo ridurre il peso del CSS del 95% o piu.

Dashboard di WP Rocket che mostra lo stato di generazione del CSS ottimizzato

Guida alla Risoluzione dei Problemi — Passo dopo Passo

Se riscontri problemi dopo aver attivato Remove Unused CSS, segui questa procedura sistematica per identificare e risolvere il problema:

Passo 1: Identifica la pagina problematica. Apri la pagina con il problema in una finestra di navigazione anonima (incognito). Verifica che il problema sia visibile anche senza essere loggati in WordPress. Se il problema appare solo da loggati, potrebbe essere legato alla cache per utenti loggati e non al Remove Unused CSS.

Passo 2: Conferma che il problema sia causato dal CSS. Apri gli strumenti per sviluppatori del browser (F12), vai nella tab Console e controlla se ci sono errori JavaScript. Se il problema e causato da JS e non da CSS, Remove Unused CSS non e il colpevole.

Passo 3: Testa disattivando temporaneamente. Disattiva Remove Unused CSS dal pannello di WP Rocket e pulisci la cache. Ricarica la pagina: se il problema scompare, hai confermato che Remove Unused CSS e la causa.

Passo 4: Identifica gli stili mancanti. Con Remove Unused CSS attivo, ispeziona l elemento problematico con gli strumenti per sviluppatori. Trova la classe CSS dell elemento e cercala nei file CSS originali del tema o del plugin. Questo ti dara il nome della classe o del file da aggiungere alla SafeList.

Passo 5: Aggiungi alla SafeList. Inserisci il selettore CSS o il percorso del file nella SafeList. Per essere precisi, aggiungi solo il selettore specifico (ad esempio .header-sticky). Per essere piu ampi, aggiungi un pattern (ad esempio .header-).

Passo 6: Rigenera il CSS. Dopo aver aggiornato la SafeList, clicca su “Clear Used CSS” nella dashboard di WP Rocket. Attendi che il sistema rigeneri i file ottimizzati e poi verifica che il problema sia risolto.

Passo 7: Testa su piu dispositivi. Verifica la correzione su desktop, tablet e mobile. Remove Unused CSS genera file diversi per diverse dimensioni di viewport, e un problema potrebbe manifestarsi solo su un tipo di dispositivo.

Considerazioni Finali sulla Gestione del CSS

Remove Unused CSS e una funzionalita che richiede un investimento iniziale di tempo per la configurazione, ma che ripaga ampiamente in termini di prestazioni una volta ottimizzata correttamente. Il consiglio e di attivarla su un ambiente di staging o di test prima di applicarla al sito di produzione, testando sistematicamente ogni tipo di pagina e ogni funzionalita interattiva.

Se gestisci un sito con poche pagine e un tema leggero, il beneficio potrebbe non giustificare la complessita. Se invece hai un sito con temi premium, page builder e molti plugin, Remove Unused CSS puo fare la differenza tra un punteggio PageSpeed di 60 e uno di 90.

Guide Correlate della Serie WP Rocket

Hai bisogno di aiuto con la configurazione di Remove Unused CSS? Contattaci per una consulenza tecnica. Per prestazioni ottimali, considera il nostro Hosting WordPress gestito con WP Rocket preconfigurato.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

#critical css #ottimizzazione css #remove unused css #wp rocket css