Ottimizzare il CSS per il posizionamento del sito

Pubblicato: Maggio 16, 2020
Autore: Francesco Giammanco
Ottimizzare il CSS per il SEO

L'utilizzo da parte di consulenti SEO e specialisti informatici di CMS e soluzioni prefabbricate tende a generare dei siti che utilizzano molto codice CSS, troppo.

Tutto ciò accade perché i plugin, i builder e i template acquistate contengono le informazioni CSS generate sia per le soluzioni utilizzate che per tutte quelle che non sono interessanti per il progetto.

La velocità del sito è un fattore di posizionamento importante, e una prima valutazione sulla performance del sito ci arriva direttamente da Pagespeed Insight.

Cos'è il CSS inutilizzato?

Il CSS inutilizzato è quel codice CSS contenuto nei fogli di stile di un sito che non viene utilizzato perché destinato ad elementi che non sono presenti in una pagina o in tutte.

Per capire quali sono gli elementi HTML con le loro varianti da cui attingiamo ma che di fatto non utilizziamo completamente e che contengono CSS che diventerà inutilizzato, di seguito un elenco:

Di norma i siti che generano una grande quantità di CSS inutilizzato sono i CMS e tutte le piattaforme costruite acquistando grafica e servizi pregenerati, che contengono più elementi e più modalità di visualizzazione di quelle realmente utilizzate.

Rimuovere il CSS inutilizzato

WordPress è l'esempio perfetto di un CMS che tende ad accumulare del CSS che non utilizzerà.

La creazione del sito richiede l'utilizzo di temi grafici e di eventuali builder grafici, che sopperiscono alla mancanza di personalizzabilità delle pagine del sito, meno avvertito per quanto riguarda invece la generazione degli articoli.

La rimozione del CSS inutilizzato è un'operazione che richiede la conoscenza di un metodo (forse due) e una certa dimestichezza con i fogli di stile.

Prima di iniziare a lavorare sul CSS bisogna avere padronanza con alcune parole, come critical CSS, FOUT, FOIT, FOFT.

Questi termini riguardano una serie di problemi o di soluzioni inficianti la performance e il posizionamento di un sito.

Critical CSS, FOUT, FOIT, FOFT

Il CSS critico è la quantità minima di codice presente nei fogli di stile necessaria per rendere visibile la sezione di sito visibile all'ingresso in una pagina.

Questa sezione della pagina viene chiamata above the fold e rappresenta la prima impressione che l'utente ha del sito e impatta sull'usabilità del sito.

Di solito dare precedenza al caricamento del CSS critico migliora la visibilità della pagina.

A tal proposito una serie di problemi correlati più o meno direttamente al CSS della pagina hanno generato dei termini specifici sulla presenza o assenza del testo:

Generare il CSS critico, dividere i file,

Il modo più semplice per ottimizzare il caricamento delle pagine è utilizzare un software specializzato, come per esempio i plugin di WordPress sul CSS critico.

Nonostante questa rapida ottimizzazione i problemi con i fogli di stile non sono finiti, per migliorare ulteriormente la performance bisogna fare molto di più che generare il css critico.

La rimozione manuale del CSS inutilizzato è la soluzione perfetta ma è complessa, perché spesso i file Javascript effettuano iniezioni di CSS utilizzando classi dinamiche.

Anche la divisione in fogli di stile più piccoli per evitare file di grandi dimensioni è una soluzione utilizzata solitamente, ma non è facile dividere efficacemente i fogli di stile in modo che rispondano ai bisogni di diverse pagine.

Rimuovere il CSS con PurgeCSS

PurgeCSS è uno strumento che rimuove automaticamente i fogli di stile inutilizzati.

Di fatto la funzione del software è ricercare ed escludere tutti gli elementi di framework come Bootstrap, Foundation o MaterializeCSS e rimuovere gli inutilizzati.

Nel caso in cui si dovesse lavorare con siti o CMS complessi è possibile scaricare delle versioni in cui segnalare la presenza di una whitelist con gli elementi fondamentali per il corretto funzionamento del sistema.

WordPress ha una sua whitelist specifica già compilata che è possibile utilizzare seguendo il link.

E' possibile utilizzare questo strumento con:

Rimuovere manualmente il CSS in eccesso

Per effettuare questa operazione bisogna

Css su DevTools

Il problema principale di questo metodo è che nonostante sia abbastanza semplice comprendere il codice da rimuovere, è bene tenere presente che le indicazioni che riceviamo riguardano solo la pagina corrente.

Bisognerebbe dunque ripetere l'operazione per ogni tipologia di pagina, ma come appare ormai chiaro si tratta di un'operazione rischiosa che richiede pazienza e attenzione, forse troppa.

Utilizzare UnusedCSS

La naturale evoluzione relativa alla rimozione manuale del codice arriva con strumenti come UnusedCSS, che permettono gratuitamente (entro certe quantità) di selezionare un sito ed estrarre dei file sostitutivi e compressi rispetto quelli utilizzati normalmente.

L'operazione di generazione dei nuovi file è molto semplice:

UnusedCSS

Esistono dei software simili e completamente gratuiti, come Purifycss, ma si presentano come software da scaricare da GitHub e che non forniscono fornelli user's friendly.

Asset CleanUp: Page Speed Booster

Asset CleanUp: Page Speed Booster è un plugin di WordPress che consente di minificare il codice CSS e JS ma anche di operare sulle impostazioni delle pagine evitando di caricare codice inutile.

Si tratta di un plugin che a livello di opportunità messe a disposizione si posiziona sopra la media del suo genere, e risulta validissimo per chiunque non abbia intenzioni di effettuare operazioni che comportino la sostituzione di files manualmente.

Error!
No 'CRP_Widget' widget registered in this installation.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.