Riduci i contenuti CSS inutilizzati in WordPress

Se stai cercando di velocizzare il caricamento del tuo sito internet, probabilmente starai utilizzando dei tool come PageSpeed Insights di Google, e ti sarai trovato di fronte al suggerimento “Riduci i contenuti CSS inutilizzati“.

In questa breve guida ti mostreremo come è facile risolvere questo problema con l’uso di qualche plugin, che ti aiuterà a migliorare considerevolmente il caricamento del tuo sito internet.

Prima di procedere a spiegarti come risolvere questo problema, ti consigiamo di dare un’occhiata al nostro servizio “Velocizzare Sito WordPress“, che va ben oltre una semplice ottimizzazione da parte di un plugin automatico.

Cosa sono i contenuti CSS inutilizzati

Quando apriamo il link di un sito web, i browser, si occupano di caricare tantissimi file che permettono di visualizzare il contenuto del sito stesso per come lo abbiamo impostato.

Tra i tipi di file che il browser va a caricare abbiamo quelli relativi all’aspetto estetico della pagina, ovvero i file CSS. Molti temi e plugin caricano diversi file CSS per tutte quelli che sono i componenti estetici del sito stesso.

Spesso succede che alcuni file CSS vengano richiamati anche se non utili alla visualizzazione della pagina.

Questo succede anche con un semplice form di contatto presente esclusivamente nella pagina contatti. Ad esempio, il plugin gratuito più utilizzato su WordPress è Contact Form 7.

Quando attiviamo ed inseriamo il plugin in una pagina, questo caricherà in tutte le pagine del sito i file necessari al suo utilizzo e visualizzazione e ciò comporterà al caricamento di file completamente inutili nelle pagine dove non sono presenti form di contatto.

In rete si trovano diversi tool che permettono di visualizzare se sono presenti file CSS inutilizzati che stanno influenzando il caricamento del sito, e tra questi non possiamo non citare quello ufficiale di Google: PageSpeed Insights.

Riduci i contenuti CSS inutilizzati

Per poter ridurre i contenuti CSS inutilizzati in WordPress avremo a disposizione diversi strumenti e opzioni. Possiamo sia utilizzare un plugin automatico che posticipi il caricamento dei file, sia escludere del tutto i file dal caricamento.

Con il primo metodo il rischio di malfunzionamento del sito è molto remoto, infatti l’esclusione di alcuni CSS da alcune pagine, potrebbe comportare la non corretta visualizzazione del sito internet.

Per questo motivo vi suggeriamo di procedere con il secondo metodo solo se esperti, in alternativa potete sempre affidarvi ai nostri specialisti di WordPress.

Rimuovere i contenuti CSS inutilizzati tramite WP Rocket

Il primo metodo che andremo a vedere è quello più consigliato, soprattutto ai meni esperti. Per ridurre i contenuti CSS inutilizzati utilizzeremo il plugin WP Rocket.

Questo plugin di cache è un ottimo prodotto, dato che è utile per diversi aspetti che riguardano l’ottimizzazione del sito internet. Infatti, oltre all’ottimizzazione del CSS, WP Rocket presenta altre caratteristiche essenziali.

Per scoprire tutte le funzioni e configurare al meglio WP Rocket vi invitiamo a leggere la nostra recensione, che vi spiega nel dettaglio tutte le funzioni più utili.

Una volta installato ed attivato il plugin non dovremo fare altro che raggiungere e flaggare l’opzione “Ottimizza la pubblicazione del CSS” nel percorso “Impostazioni – WP Rocket – Ottimizzazione File“.

Ma cosa fa esattamente questa opzione? Essa andrà a generare un file CSS con solo gli elementi necessari alla visualizzazione del sito web che verrà caricato per primo. Inoltre, gli altri file CSS verranno caricati in modo differito.

Questo permetterà di risolvere il problema di “riduci i contenuti CSS inutilizzati” con la semplice attivazione di una funzionalità attraverso un plugin.

Rimuovere completamente i contenuti CSS inutilizzati

Esiste un secondo metodo per poter eliminare la voce “riduci i contenuti CSS inutilizzati”, ma è riservata ad utenti più esperti. Con questo metodo dovremo agire sui singoli file CSS caricati andando a eliminare dal caricamento quelli non utilizzati.

Come si può intuire non è semplice come il primo metodo, in quanto dovremo anche conoscere appieno il nostro sito web ed eliminare esclusivamente i CSS che sono davvero inutilizzati dal tema o plugin.

Per poter effettuare queste modifiche potrete utilizzare un plugin come Asset CleanUP, o farlo manualmente tramite codice (questo secondo metodo è utilizzato e compreso nel nostro pacchetto velocizzare sito WordPress).

Se optiamo per l’utilizzo di Asset CleanUp la prima operazione da fare è attivare la modalità di test, attraverso il percorso “Asset Clean Up – Settings – Test Mode“.

In questo modo i visitatori non saranno interessati dalle modifiche apportate, e continueranno a vedere bene il sito anche qualora eliminassimo per errore un file CSS necessario.

Una volta attivata questa modalità possiamo passare all’ottimizzazione vera e propria. Abbiamo due possibilità, entrare nella modifica della pagina oppure dirigerci in “Asset CleanUp – CSS/JS Manager“.

In questa sezione del plugin andremo a eliminare il caricamento di CSS e JS indesiderati per ogni singola pagina del sito web. Il plugin, in automatico, analizzerà i file all’interno e con un semplice click potremo escluderne il caricamento.

Attenzione, ti ricordiamo di verificare la corretta visualizzazione del sito dopo ogni modifica.

Conclusioni

Siamo giunti alla conclusione di questo articolo dove abbiamo visto e analizzato come rimuovere l’avviso di “riduci i contenuti CSS inutilizzati“.

Scrivici nei commenti se la procedura è stata semplice o se hai riscontrato problemi nel seguire la guida.