Luigi Sabbetti

Il mondo del web a 360 gradi

Rimuovi il css inutilizzato come fare

Rimuovi il CSS inutilizzato: errore di Google PageSpeed Insights


di // Pubblicato il: 24 Maggio 2019

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

Indice

Perché utilizzare Google PageSpeed Insights

La prima domanda che si 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 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. 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, infatti, è 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 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’occorrezza. 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

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 pò 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 pò 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.

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Profondamente amante della scrittura, mi piace condividere conoscenze informatiche attraverso il mio sito web. Amo correre, guardare il mare e il buon cibo. Scopri di più nella mia