Il lavoro di ottimizzazione del CSS di un sito è un argomento che riguarda la SEO, ma anche i grafici specialisti delle web agency che realizzano progetti parzialmente o totalmente personalizzati utilizzando builder grafici e non una grafica personalizzata sin dalla scrittura del codice.

Esiste infatti un bello scarto di codice utilizzato tra le due opzioni, visto che i builder grafici (parliamo principalmente di WordPress ma tutti i CMS ne hanno uno) contengono molto codice che non verrà utilizzato durante la costruzione del sito, motivo per cui rimarrà inutilizzato e comunque presente nei fogli di stile.

Cos’é il CSS Critico?

Proprio perché esiste la possibilità di ridurre il CSS bisogna generare un CSS Critico, un processo che acquisisce il CSS minimo ossia quello utilizzato dal sito al momento della scansione e lo rende subito fruibile.

Il processo che genera il CSS Critico migliora la User Experience del sito, ma anche la considerazione che Google si fa quando scansiona il sito con i suoi bot.

Infatti se almeno i primi contenuti di un sito non sono visibili prima di 1,5 secondi, il sito non rientra nella migliore classificazione in quanto a velocità.
Si parla quindi di FCP (First Content Paint) ma anche di altre 5 metriche che vengono influenzate dagli script ma anche dal CSS.

A cosa serve?

I primi contenuti che l’utente riesce a vedere in una pagina in caricamento sono quelli della zona subito visibile, chiamata above the fold o above the scroll. Questa è la parte di pagina “critica” dato che è fondamentale che si carichi rapidamente per una migliore esperienza di navigazione.

Il CSS necessario per caricare quel contenuto è il CSS critico.

A differenza di quello descritto, il resto del CSS della necessario può essere caricato in modo asincrono ed esternamente dal foglio di stile CSS, di conseguenza può essere caricato contemporaneamente al codice che ci interessa per la zona critica.

Questo tipo di operazione soddisfa anche gli standard di Google, che normalmente segnala il problema con l’avviso presente su PageSpeed Insight:

Adesso che è chiaro a cosa serve ridurre il CSS tradizionale, bisogna generare un percorso per veicolare più primariamente il CSS critico.

Percorso di rendering critico

Il percorso di rendering critico è una tecnica appoggiata da Google e non solo, che ha la funzione di ridurre le informazioni necessarie a generare il primo rendering, tramite la riduzione dei byte utilizzati, delle risorse (tra cui i fogli di stile CSS) e della lunghezza dei percorsi utilizzati.

In questa sede non discuterò di tutte le tecniche di ottimizzazione del rendering critico, ma mi limiterò a indicare una serie di tecniche molto semplici da implementare.

Bisogna però notare che se fatto in maniera “tradizionale”, ossia tramite il caricamento di un foglio di stile alternativo, le informazioni da inserire dovranno essere richiamate dall’ delle pagine del sito.

Generare il CSS Critico con un tool

Esistono strumenti gratuiti che scansionano il sito indicato ed estraggono il CSS Critico necessario, come nel caso di Critical Path CSS Generator, che fornisce diverse opzioni di caricamento.

Una volta fatta partire la scansione il tool genera un file minificato che contiene tutte le informazioni dei diversi fogli di stile presenti sul sito, ma anche le versioni del CSS critico disgiunte dal resto del CSS.

Nel caso in cui si voglia far convivere il CSS critico in un unico foglio di stile, lo strumento offre le indicazioni per farlo, ed anche il codice per permettere la corretta funzionalità del sito:

var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = 'PATH_TO_COMBINED_CSS_FILE';
var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
};
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(cb);
else window.addEventListener('load', cb);

Per la corretta installazione, trovate qui tutte le informazioni.

Questa opzione può essere facilmente integrata su WordPress, all’interno di plugins che si occupano di minificazione del codice come Autoptimize e che offrono un particolare pannello per inserire il CSS necessario.

Generare il CSS critico da codice

Alcuni siti non sono pensati per essere modificati da appositi pannelli, motivo per il quale è necessario lavorare direttamente sul codice.

Alcune soluzioni sono davvero semplici da implementare, ma richiedono in ogni caso l’installazione di progetti open source come Critical, e più in generale Javascript.

Vi lascio qui una guida davvero interessante sulle operazioni da compiere

Perché WordPress non genera CSS critico da sé?

WordPress è un CMS composto per la maggior parte del codice da PHP, che non genera un CSS critico. Lo fanno comunque script presenti all’interno dei plugins.