Come rimuovere CSS inutilizzato in WordPress (Il modo giusto)

Un sito web lento è frustrante per i visitatori e dannoso per la tua attività. Quando le pagine impiegano troppo tempo a caricarsi, gli utenti se ne vanno e il tuo posizionamento nei motori di ricerca diminuisce.

Spesso, il problema nascosto è il codice CSS inutilizzato che ingombra il tuo tema e i tuoi plugin. Questo codice extra appesantisce le tue pagine senza fare nulla di utile.

Abbiamo ottimizzato centinaia di siti WordPress per la velocità e abbiamo scoperto che la pulizia di questo codice fa una grande differenza. Aiuta il tuo sito a superare i test Core Web Vitals e migliora l'esperienza utente.

In questa guida, ti mostreremo come rimuovere il CSS inutilizzato in WordPress per rendere il tuo sito più veloce.

Cos'è il CSS inutilizzato in WordPress?

Il CSS inutilizzato in WordPress si riferisce al codice CSS che viene caricato sulle tue pagine web ma non viene effettivamente utilizzato per stilizzare nulla di visibile su quelle specifiche pagine.

Questo codice aggiuntivo costringe i browser dei visitatori a scaricare ed elaborare file non necessari, il che rallenta i tempi di caricamento delle pagine. Anche pochi secondi in più possono danneggiare la tua esperienza utente e i posizionamenti sui motori di ricerca, potenzialmente costandoti visitatori e conversioni.

Puoi facilmente verificare se il CSS inutilizzato sta influenzando il tuo sito eseguendolo tramite Google Pagespeed Insights. Cerca l'avviso 'Rimuovi CSS inutilizzato' nei tuoi risultati. Ti mostrerà esattamente quali file stanno rallentando le cose.

Perché WordPress carica CSS non utilizzato?

Ecco il punto: WordPress non è stato progettato per essere selettivo riguardo al CSS che carica. Il tuo tema WordPress viene fornito con un foglio di stile principale (solitamente chiamato style.css) che contiene regole di stile per ogni possibile elemento, anche quelli che potresti non usare mai.

Ma il tuo tema è solo l'inizio. Ogni plugin che installi aggiunge i propri file CSS al mix. WooCommerce carica lo stile del negozio su ogni pagina (anche i tuoi post del blog), i page builder caricano il loro CSS globalmente, e i plugin per moduli di contatto caricano gli stili dei moduli su pagine senza moduli.

Aggiungi font personalizzati, librerie di icone e altri elementi di design, e ti ritroverai con un sacco di bloat CSS. Sebbene ogni singolo file possa essere piccolo, si accumulano rapidamente e influiscono sulla velocità del tuo sito.

Come rimuovere il CSS non utilizzato in WordPress

Ora le buone notizie: ci sono diversi modi efficaci per ripulire il CSS non utilizzato sul tuo sito WordPress. Abbiamo testato diversi approcci e trovato metodi che funzionano in modo affidabile senza compromettere il tuo sito.

Ecco cosa devi sapere in anticipo: eliminare completamente il 100% del CSS inutilizzato è quasi impossibile a causa di come WordPress carica dinamicamente i contenuti. Alcuni CSS devono rimanere pronti per elementi interattivi, contenuti condizionali e diversi tipi di pagina.

Ma non preoccuparti, non hai bisogno della perfezione per vedere miglioramenti significativi. Anche rimuovere il 50-70% del CSS inutilizzato può velocizzare drasticamente il tuo sito.

Ti mostreremo due metodi comprovati che trovano il giusto equilibrio tra guadagni di prestazioni e stabilità del sito, in modo che tu possa scegliere l'approccio che si adatta al tuo livello di comfort.

1. Rimuovere CSS inutilizzato in WordPress utilizzando WP Rocket
2. Rimuovere il CSS inutilizzato in WordPress utilizzando Asset CleanUp
3. Domande frequenti sul CSS inutilizzato
4. Risorse aggiuntive per migliorare le prestazioni di WordPress

Metodo 1: Rimuovere CSS inutilizzato in WordPress utilizzando WP Rocket

Questo metodo è più semplice ed è consigliato ai principianti. Migliora notevolmente la consegna complessiva dei file CSS sul tuo sito WordPress, inclusa la rimozione della maggior parte del CSS inutilizzato.

Pensiamo che sia la soluzione migliore per i principianti perché è più facile e raggiunge l'obiettivo principale di fornire una migliore esperienza ai tuoi utenti. Ciò significa che il tuo sito web si carica velocemente negli strumenti di test di velocità e risulta anche veloce per i tuoi utenti.

Innanzitutto, devi installare e attivare il plugin WP Rocket. È un plugin premium, ma è il modo più semplice per svolgere il lavoro senza conoscenze tecniche. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, devi visitare la pagina Impostazioni » WP Rocket e passare alla scheda 'Ottimizzazione file'.

Successivamente, devi scorrere verso il basso fino alla sezione File CSS e quindi selezionare la casella accanto all'opzione 'Rimuovi CSS inutilizzato'.

Una volta selezionata la casella, potresti vedere un messaggio di conferma. Puoi procedere e fare clic sul pulsante 'Attiva Rimuovi CSS inutilizzato'.

Una volta che l'opzione è attiva, vedrai una casella 'Whitelist CSS'. Questo ti permette di specificare nomi di file CSS, ID o classi che non dovrebbero essere rimossi. Devi usarlo solo se noti che alcune parti del tuo sito appaiono danneggiate dopo aver abilitato l'impostazione.

Inseriscili semplicemente nella casella.

Successivamente, dovrai salvare le modifiche scorrendo verso il basso e facendo clic sul pulsante 'Salva modifiche'.

Quando lo fai, WP Rocket inizierà a elaborare i tuoi file CSS e ti mostrerà una barra di avanzamento.

Il plugin impiegherà alcuni minuti per elaborare e rimuovere i file CSS inutilizzati dal tuo sito web.

Vedrai un messaggio 'Rimozione CSS inutilizzato completata!' quando il plugin avrà completato il processo.

Ora, visita lo strumento Google Pagespeed Insights e testa le prestazioni del tuo sito.

Alternativa: Ottimizza la consegna del CSS (Metodo di fallback)

Se il metodo ‘Rimuovi CSS inutilizzato’ sopra funziona per il tuo sito, non è necessario eseguire questo passaggio. Gestisce già il CSS che blocca il rendering per te.

Tuttavia, se il metodo precedente ha compromesso il layout del tuo sito e hai dovuto disabilitarlo, puoi utilizzare l'opzione ‘Ottimizza la consegna del CSS’ come alternativa.

Per fare ciò, seleziona semplicemente la casella accanto all'opzione ‘Ottimizza la consegna del CSS’ nella sezione File CSS.

Questa opzione genera un file CSS che contiene solo il codice CSS necessario per visualizzare la parte visibile del tuo sito web. Carica quel file per primo, visualizza la pagina ai tuoi visitatori, e poi carica altri file CSS utilizzando una tecnologia chiamata caricamento differito.

Rimuovendo questo CSS che blocca il rendering, il tuo sito web diventa visibile agli utenti molto più velocemente di quanto non sarebbe se dovessi caricare tutti i file CSS prima che la pagina venga visualizzata.

Dopo aver abilitato l'opzione 'Ottimizza la consegna del CSS', fai clic sul pulsante 'Salva modifiche' e attendi che WP Rocket generi il file CSS necessario per tutti i tuoi post e pagine. Cancellerà anche automaticamente la cache del tuo sito web.

Una volta terminato, puoi procedere e testare nuovamente le prestazioni del tuo sito web utilizzando Google Pagespeed Insights.

Ulteriori ottimizzazioni dei file per aumentare le prestazioni

WP Rocket ti consente anche di rimuovere le stringhe di query dai file statici, combinare i file di Google Fonts e minificare l'HTML.

Tutte queste ottimizzazioni apportano piccoli miglioramenti alla tua velocità complessiva, che si sommano a un'esperienza di caricamento più veloce per i tuoi visitatori.

Vedrai anche opzioni per minificare e combinare i file CSS. Queste opzioni ridurranno le richieste HTTP e ti daranno un ulteriore aumento di velocità.

Tuttavia, dovrai controllare attentamente il tuo sito web per assicurarti che nulla sia rotto dopo aver abilitato queste impostazioni.

Inoltre, puoi applicare la stessa ottimizzazione per i file JavaScript sul tuo sito web.

Puoi minificarli e combinarli per servirli come un unico file e posticipare il caricamento dei file JavaScript per migliorare le prestazioni.

Per maggiori dettagli, consulta il nostro tutorial passo passo su come configurare correttamente WP Rocket in WordPress.

Metodo 2: Rimuovere CSS inutilizzato in WordPress utilizzando Asset CleanUp

Questo metodo utilizza il plugin gratuito Asset CleanUp. È un po' più manuale ma ti dà il pieno controllo per rimuovere CSS inutilizzato specifico da qualsiasi pagina del tuo sito WordPress.

Raccomandiamo questo metodo se ti senti a tuo agio nel risolvere i problemi del tuo sito, poiché dovrai testare a fondo il tuo sito web per assicurarti che nulla sia compromesso.

Innanzitutto, è necessario installare e attivare il plugin Asset Cleanup. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, è necessario visitare la pagina Asset CleanUp » Impostazioni e passare alla scheda Modalità Test. Da qui, è necessario attivare l'opzione ‘Abilita Modalità Test’.

Questo ti permette di provare diverse impostazioni e testarle come amministratore senza influenzare i visitatori del sito web.

Successivamente, è necessario visitare la pagina Asset CleanUp » Gestore CSS/JS. Da qui, è possibile scaricare i file CSS e JavaScript indesiderati su base pagina per pagina.

A seconda delle tue impostazioni, potrebbe recuperare e analizzare automaticamente la tua homepage. Vedrai un elenco di tutti i file CSS e JavaScript caricati su quella pagina.

È necessario scorrere verso il basso e rivedere i file caricati. Se vedi un file di cui non hai bisogno, puoi scaricarlo per quella particolare pagina, tipo di post o per l'intero sito.

Il plugin ti consente anche di scegliere post o pagine specifici da qui, oppure puoi accedere alle stesse opzioni modificando il post o la pagina come faresti normalmente.

Nella schermata di modifica del post, troverai la casella Asset CleanUp appena sotto l'editor del post.

Il plugin recupererà e elencherà automaticamente tutti i file e le risorse caricate quando un visitatore visualizza questa pagina sul tuo sito web.

Puoi quindi semplicemente scaricare i file CSS o JavaScript inutilizzati di cui non hai bisogno in quella pagina.

Importante: Non dimenticare di testare il tuo sito web dopo aver rimosso CSS o JavaScript inutilizzati per assicurarti che tutto funzioni correttamente.

Una volta terminato lo scaricamento e la rimozione dei file CSS e JavaScript inutilizzati, puoi tornare alla pagina delle impostazioni del plugin e disattivare la ‘Modalità Test’.

Non dimenticare di fare clic sul pulsante ‘Aggiorna tutte le impostazioni’ per salvare le modifiche.

Ora puoi testare il tuo sito web utilizzando Google Pagespeed Insights per vedere la modifica nell'avviso CSS inutilizzato.

Domande frequenti sul CSS inutilizzato

Molti lettori ci chiedono informazioni sulla sicurezza e sull'impatto della pulizia dei loro fogli di stile. Ecco le risposte ad alcune delle domande più comuni sulla rimozione del CSS inutilizzato in WordPress.

1. È sicuro rimuovere il CSS inutilizzato in WordPress?

La rimozione del CSS inutilizzato è generalmente sicura se utilizzi un plugin affidabile come WP Rocket o Asset CleanUp. Questi strumenti tentano di mantenere il codice essenziale di cui il tuo sito ha bisogno per apparire correttamente. Tuttavia, poiché lo styling può essere complesso, c'è sempre un piccolo rischio di compromettere un layout.

Raccomandiamo vivamente di utilizzare un plugin di backup come Duplicator per salvare il tuo sito prima di applicare queste modifiche.

2. Perché non posso rimuovere il 100% del CSS inutilizzato?

È quasi impossibile rimuovere ogni singola riga di CSS inutilizzato perché WordPress crea le pagine dinamicamente.

Alcuni stili sono nascosti finché non si verifica un'azione specifica, come lo scorrimento di un menu mobile o la comparsa di un popup. Se rimuovi questo codice 'inutilizzato', queste funzionalità interattive smetteranno di funzionare.

Se un plugin rimuovesse tutto il CSS che non era immediatamente visibile, le funzionalità interattive sul tuo sito WordPress potrebbero smettere di funzionare correttamente.

3. La rimozione del CSS inutilizzato aiuta con il posizionamento SEO?

Sì, la rimozione del CSS inutilizzato può aiutare a migliorare il posizionamento SEO del tuo WordPress. I motori di ricerca come Google considerano la velocità della pagina un fattore di posizionamento. Quando riduci le dimensioni dei tuoi file CSS, le tue pagine web si caricano più velocemente, segnalando a Google che il tuo sito offre una buona esperienza utente.

4. Posso rimuovere manualmente il CSS inutilizzato senza un plugin?

Non consigliamo di provare a rimuovere manualmente il CSS inutilizzato a meno che tu non sia uno sviluppatore esperto. Dovresti identificare ed eliminare righe di codice specifiche dai file del tuo tema e dei tuoi plugin.

Se commetti un errore durante la modifica manuale di questi file, potresti compromettere il design dell'intero sito web WordPress.

Risorse aggiuntive per migliorare le prestazioni di WordPress

Speriamo che questo articolo ti abbia aiutato a imparare come rimuovere facilmente il CSS inutilizzato in WordPress. Potresti anche voler consultare altre guide relative al miglioramento delle prestazioni di WordPress:

• La guida definitiva per aumentare la velocità e le prestazioni di WordPress
• Come velocizzare le prestazioni di WooCommerce
• Come eseguire correttamente un test di velocità del sito web (i migliori strumenti)
• Metriche importanti da misurare sul tuo sito WordPress
• Come ottimizzare le Core Web Vitals per WordPress (Guida definitiva)
• Come utilizzare il plugin GTmetrix per migliorare le prestazioni del sito WordPress
• Come ottimizzare facilmente la consegna CSS di WordPress
• Hosting WordPress più veloce (test di prestazioni)
• Come ottimizzare le immagini per le prestazioni web senza perdere qualità
• I migliori plugin di caching per WordPress per velocizzare il tuo sito web

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.