Come proprietari di siti web WordPress, tutti ci sforziamo di offrire un'esperienza utente rapida e ottimale. Questo non solo mantiene i visitatori coinvolti, ma aiuta anche i nostri siti web a posizionarsi più in alto nei risultati di ricerca.
Potresti non renderti conto che i tuoi temi e plugin spesso caricano molto più codice CSS di quanto le tue pagine necessitino. Questo CSS inutilizzato potrebbe rallentare segretamente il tuo sito web.
Ogni riga di codice in più che i tuoi visitatori devono scaricare aggiunge preziosi secondi al tempo di caricamento. E nel mondo di oggi, anche un ritardo di un secondo può costarti visitatori e vendite.
Ecco perché abbiamo messo insieme questa guida completa sulla rimozione del CSS inutilizzato da WordPress nel modo giusto. Ti mostreremo i metodi esatti che utilizziamo per ripulire fogli di stile gonfi e velocizzare i siti senza rompere nulla.
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.
- Rimuovere CSS inutilizzato in WordPress utilizzando WP Rocket
- Remove Unused CSS in WordPress Using Asset CleanUp
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. 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 (Beta)'.
Poiché questa funzionalità di WP Rocket è in beta, ti chiederà di nuovo se desideri abilitare l'impostazione. Puoi procedere e fare clic sul pulsante 'Attiva Rimuovi CSS inutilizzato'.
Una volta che l'opzione 'Rimuovi CSS inutilizzato' è attiva, puoi specificare i nomi dei file CSS, gli ID o le classi che non dovrebbero essere rimossi nella casella 'Whitelist CSS'.
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.
Rimuovi CSS che blocca il rendering per WordPress
WP Rocket ti consente di ottimizzare i tuoi file CSS e rimuovere il CSS che blocca il rendering dal tuo sito web.
Per iniziare, puoi navigare nella scheda 'Ottimizzazione file' in WP Rocket. Da qui, scorri verso il basso fino alla sezione File CSS e quindi seleziona la casella accanto all'opzione 'Ottimizza consegna 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 è un po' avanzato ma incredibilmente potente e ti permetterà di rimuovere facilmente qualsiasi CSS inutilizzato da qualsiasi pagina del tuo sito web WordPress.
Tuttavia, è un po' complicato e dovrai testare a fondo la funzionalità e l'aspetto del 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.
Verrà prima recuperata la tua homepage e ti verranno mostrati 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.
Guide esperte 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.
Jiří Vaněk
Praticamente ogni volta, PageSpeed Insights mi avvisa di questo. Non ci ho mai prestato attenzione perché semplicemente non sapevo come risolverlo senza compromettere il mio sito. Questa guida è un tesoro per me, soprattutto perché uso anche WP Rocket. Farò un backup del sito, per sicurezza, e proverò la soluzione che hai suggerito. Sono curioso di vedere se, dopo due anni di blogging e ignorando questo avviso, farà la differenza e quanta. Ciononostante, grazie per la prima guida chiara che ho trovato.
kzain
Volevo migliorare la velocità del mio sito web e rimuovere il CSS inutilizzato sembra un ottimo punto di partenza. La suddivisione tra l'uso di plugin di ottimizzazione e l'identificazione manuale è perfetta. Anche se non sono un esperto di codice, i consigli sui plugin sono una manna dal cielo. WP Rocket e Asset CleanUp sembrano ottime opzioni da esplorare. Grazie per questa guida informativa!
Supporto WPBeginner
Prego!
Amministratore
Dennis Muthomi
My current caching plugin doesn’t have an unused CSS removal feature.
Would it be beneficial to install WP Rocket solely for this function?
Just to use the Remove Unused CSS feature
THANKS
Supporto WPBeginner
Ti consigliamo di contattare il supporto del tuo attuale plugin di caching per verificare se l'impostazione è abilitata tramite un metodo diverso per il plugin che stai utilizzando. Se volessi usare WP Rocket, sarebbe meglio sostituire il tuo attuale plugin di caching.
Amministratore
Steve
Mi piace rimuovere il CSS inutilizzato dal mio sito. Sto già utilizzando la cache Litespeed. Sto pensando di usare WP Rocket o Asset clean up per farlo (sono più propenso a WP Rocket). Ci sono conflitti tra questi plugin e Litespeed? Grazie!
Supporto WPBeginner
Dovresti contattare il supporto dei singoli plugin per verificare eventuali conflitti attuali tra di loro.
Amministratore
Paul Barrett
Questo potrebbe essere un ottimismo delle più alte sfere, ma questo articolo mi ha ricordato qualcosa a cui pensavo da un po' di tempo.
Uno dei miei siti web complessi ha ora quattro anni ed è passato attraverso un costante processo di evoluzione. Ci sono non solo CSS inutilizzati, ma anche media, template, pagine. Esiste un plugin per fare un inventario del sito web e dirmi TUTTI gli asset inutilizzati?
Supporto WPBeginner
Al momento non disponiamo di uno strumento per tutto, ma lo strumento di questo articolo sarebbe utile per il CSS e la nostra guida qui sotto dovrebbe aiutarti per la libreria multimediale!
https://www.wpbeginner.com/plugins/how-to-clean-up-your-wordpress-media-library/
Amministratore