Luigi Sabbetti

Rimuovi il CSS inutilizzato: errore di Google PageSpeed


di // Pubblicato il: // Ultimo aggiornamento:

Uno degli strumenti più utilizzati dagli sviluppatori per testare la velocità di un sito, è senza dubbio quello messo a disposizione da Google: ovvero il tool definito PageSpeed Insights. Si tratta di uno strumento molto potente, che scansiona le pagine del nostro sito e ci permette di analizzare nel dettaglio cosa c’è che non va.

Esistono diversi errori, infatti, che potrebbero farci perdere secondi preziosi nonché, di riflesso, posizionamento in ottica SEO, calo del tasso di conversione e molto altro. Un sito lento, infatti, non piace a nessuno. Oggi tratteremo questo nello specifico questo errore: Rimuovi il CSS inutilizzato.

In passato ti ho già mostrato come risolvere gli errori relativi al rimando delle immagini fuori schermo e alla pubblicazione delle immagini in formati recenti, oggi invece vedremo come agire sugli stili del nostro sito per migliorare le performance.

Indice dei contenuti

Perché utilizzare Google PageSpeed Insights

La prima domanda che sicuramente ti sarai posto è perché dovresti utilizzare questo tool per testare il tuo sito. D’altronde, sul mercato, ne esistono davvero tantissimi, GTmetrix, giusto per citarne uno su tutti.

Le ragioni sono davvero tantissime, cerchiamo di analizzare meglio la faccenda e capire perché questo strumento, assieme a Lighthouse di Google, sia quello più utilizzato, nonché quello che francamente reputo più affidabile e ricco di funzioni.

Questo strumento, come detto, ci viene messo a disposizione gratuitamente da Google al fine di poter misurare la velocità del nostro sito e di migliorarne l’indicizzazione sui motori di ricerca. Qualora non lo sapessi, le performance di un sito e i suoi core web vitals, incidono molto sulla capacità dello stesso di indicizzarsi in modo corretto.

Google, infatti, è tra i promotori di un internet sempre più veloce, proprio per questo mette a disposizione un tool così utile e funzionale gratuitamente: per aiutare gli utenti a migliorare le performance del proprio sito.

Potremo facilmente testare il nostro sito web sia nella sua versione desktop che in quella mobile. Un sito ottimizzato su desktop, infatti, non è detto che mantenga le stesse performance anche su mobile. Quest’ultimo tipo di visualizzazione, è quella utilizzato da Google per indicizzare il sito. Avere, dunque, una versione mobile del sito ottimizzata è senza dubbio un punto a nostro favore.

Quando sviluppi un sito, infatti, dovresti sempre utilizzare un approccio detto “Mobile first“, ovvero disegnare ed implementare i tuoi elementi prima su mobile, per poi adattarli di conseguenza su desktop.

Testare il tuo sito è davvero molto semplice. Ti basta andare sul sito del PageSpeed ed inserire l’url della pagina web che vuoi scansionare. Non appena inserito l’url, e premuto il tasto di avvio, Google inizierà immediatamente la scansione, trovando eventuali errori che possano inficiare le performance del sito.

Tra gli errori che potrebbe segnalarti, c’è anche quello di cui stiamo parlando in questo articolo. Vediamo, dunque, assieme perché Google ci segnala questa mancanza e soprattutto come risolverla, anche su un sito WordPress.

Cosa significa rimuovere il CSS non utilizzato

Ma cosa significa rimuovere il CSS non utilizzato? La domanda è lecita. Se inserisci del css all’interno del tuo sito, infatti, è perché probabilmente hai intenzione di utilizzarlo. Bene, fin qui siamo tutti d’accordo, ma molto spesso non è così.

Ti faccio un esempio pratico. Nel tuo file main.css, file esterno rispetto all’html, potresti avere bisogno di inserire il CSS che regola una gallery che si trova nella sezione portfolio del tuo sito.

Lo stesso file, main.css, però, viene caricato anche in homepage, dove sostanzialmente la gallery non esiste. Si tratta quindi di codice che potrebbe non essere affatto stampato nella homepage, perché non viene appunto utilizzato.

L’approccio migliore, dunque, sarebbe quello di utilizzare il css della gallery, sono nelle pagine dove effettivamente serve!

Ma come è possibile rimediare a questo errore? In realtà di approccio ce ne sono tanti. Te ne elenco alcuni, senza scendere troppo in tecnicismi

Stampare il codice nel tag style

La prima soluzione, nonché la più semplice e che ti permetterà anche di guadagnare molti punti in fatto di velocità, è quella di inserire il CSS che ti serve per la pagina direttamente all’interno del tag style, che si trova nella sezione head del tuo sito.

In questo modo, potrai stampare CSS in modo puntuale e preciso, evitando di includere nella tua pagina classi che non vengono poi effettivamente utilizzate.

Esempio di CSS stampato nel tag style
Esempio di CSS stampato nel tag style

Questa soluzione, inoltre, ti permetterà di risolvere un altro errore, spesso segnalato da Google e del quale abbiamo già parlato in un altro articolo, ovvero eliminare il CSS che blocca la visualizzazione nei contenuti above-the-fold

Creare file CSS specifici

La seconda soluzione, invece, è quella di scompattare il tuo css in mini css da richiamare all’occorrenza. Non avrai più il file main.css per intenderci, ma il file gallery.css, sidebar.css, menu.css ecc.

Questa soluzione, seppure rappresenti quella più pulita, farà aumentare le richieste. Se prima, infatti, scaricavi solo un file, adesso le richieste aumenteranno. Se vuoi utilizzare questa seconda opzione, dunque, ti consiglio caldamente di utilizzare delle opzioni di minificazione e bundle dei tuoi script e dei tuoi stili.

Se utilizzi, WordPress, puoi farlo utilizzando il plugin W3 Total Cache. Ne ho parlato recentemente in questo articolo, dove spiego altri trucchi per velocizzare un sito WordPress

Utilizzare tool automatici

L’ultima opzione che mi sento di consigliarti, è quella di utilizzare dei tool automatici avanzati che ti permettono di analizzare il Dom nodo per nodo e capire automaticamente quali regole CSS non vengono realmente utilizzate all’interno della tua pagina.

Attualmente esistono diversi tool che ti permettono di svolgere questa operazione, il più blasonato, nonché affidabile, è PurgeCSS. Sappi però che non è tutto oro ciò che luccica. PurgeCSS e gli altri tool simili, infatti, non sono in grado di riconoscere gli elementi che vengono caricati in un secondo momento all’interno della pagina, come ad esempio modali e elementi caricati mediante richieste asincrone.

In questi casi sarai costretto ad andare ad escludere manualmente le classi per evitare di incorrere in errori e malfunzionamenti dell’applicazione.

Plugin WordPress per rimuovere CSS non utilizzato

La faccenda è spigolosa, si tratta infatti di un’operazione abbastanza complessa e manuale, difficile da delegare ad un plugin. Capisco comunque che non tutti siano esperti di codice, mi sono dunque messo alla ricerca di un plugin che possa eseguire questa operazione al nostro posto.

Dopo un po’ di tentativi ho trovato PageSpeed Ninja, un plugin molto interessante che fa al caso nostro. Questo plugin, infatti, oltre a rimuovere il CSS che non viene utilizzato nelle nostre pagine, offre altre interessanti features.

Nel dettaglio:

  • Ci permette di abilitare la compressione Gzip
  • Ci permette di rimuovere CSS e Javascript non richiamato all’interno delle pagine
  • Minifica HTML, CSS, JS
  • Attraverso il Lazy Loading ottimizza il caricamento delle immagini
  • Ottimizza l’ordine degli script all’interno della pagina
  • Permette di arginare il Leverage Browser Caching

Unica pecca di questo plugin, è che se diciamo di utilizzarlo è sconsigliabile utilizzare W3Total Cache. In generale, infatti, dovremmo utilizzare un solo plugin che effettua bene o male la stessa operazione. Se decidiamo di delegare a questo strumento le operazioni di caching e minificazione, sarebbe meglio non utilizzarne altri analoghi.

Conclusioni

Come abbiamo visto, anche questo errore segnalato dal PageSpeed Insights può essere facilmente risolto con un po’ di olio di gomito.

Avere un sito performante, veloce e ben ottimizzato è il modo migliore per aumentare il tasso di conversione e migliorare il nostro business, sotto tutti i punti di vista.

Se conosci altri metodi per risolvere questo problema, scrivimi pure e sarò felice di aggiornare questa lista.

Iscriviti alla newsletter!