generare il critical css

Generare il Critical CSS per WordPress con Gulp

Pubblicato su 9 Marzo, 2019 da Manuel Ricci in Web Development

In questi giorni ho messo in cantiere l’ennesimo template WordPress per conto di un cliente. A sto giro non sono partito in quarta con lo sviluppo, ma ho deciso di dedicare un pomeriggio alla riscrittura delle varie task presenti nel mio file gulp.js. Al di là delle solite task per compilare e minificare i file SCSS e Javascript che ho rivisto e aggiornato con nuovi moduli, più potenti e performanti scovate su NPM, ho deciso di implementare nativamente altre accortezze orientata alle performance senza dover dipendere una volta in produzione da plugin di terze parti.

Per volontà popolare (grazie per l’interesse) nasce questo articolo, che ti mostrerà come generare il Critical CSS, un concetto che circola per il web già da qualche anno, ma che solo di recente è diventato il cruccio di molti amanti delle performance. Ma prima di passare alla pratica…

Cos’è il Critical CSS?

Se non hai mai sentito parlare del Critical CSS o non sai esattamente di che cosa si tratta, di seguito spiego brevemente di cosa sto parlando.

Quando viene caricata una pagina web, tra il client e il server avviene uno scambio di risorse (immagini, javascript, css, font, ecc.).

Dopo la prima richiesta, dove viene ricevuta la struttura della pagina web, il browser “legge” la pagina dall’alto verso il basso e per ogni risorsa che trova avvia il download della stessa, attende il completamento, elabora il contenuto e prosegue oltre.

In una pagina web creata con WordPress in media ci sono dalle 15 alle 20 risorse CSS, tutto dipende dalla quantità di plugin installati, come ad esempio Contact Form 7 o Visual Composer. Tra questi fogli di stile c’è anche il file con tutte le regole CSS che creano il layout e l’aspetto del sito web.

Solitamente, il foglio di stile del tema è quello più pesante, considerando che contiene quasi tutti gli stili del sito. Le dimensioni aumentano se si usano preprocessori CSS come SASS, dove si tende a unificare framework esterni come Bootstrap e librerie come FontAwesome, generando di conseguenza un file bello ciccione. Ma quanto di questo CSS viene utilizzato?

Analisi effettuata con il Dev Tools di Chrome

Grazie all’analisi della copertura che possiamo effettuare con il Dev Tool di Chrome, possiamo vedere che nella homepage del mio sito il 72.2% del CSS non viene utilizzato.

Richiedere un file del genere, insieme agli altri presenti (vedi FontAwesome che è inutilizzato al 98.7%) aumenta notevolmente il tempo di rendering della pagina web. La ragione è che il browser ritarda il rendering fino a che non ha finito di scaricare, leggere ed eseguire tutti i file CSS presenti nella head della pagina. L’operazione è necessaria affinché i calcoli per la generazione del layout siano corretti.

Per evitare blocchi in fase di rendering bisogna quindi ottimizzare il percorso di rendering critico (critical rendering path).

Il percorso di rendering critico rappresenta lo step che il browser compie per renderizzare la pagina. Il nostro obiettivo è quello di individuare l’insieme di regole CSS, quelle critiche, di cui abbiamo bisogno per mostrare all’utente la pagina web.

La linea nera segna la fine dell’above the fold

In breve: l’utente deve ricevere tutto ciò che serve per visualizzare l’above the fold nei primi pacchetti TCP di risposta dal server.

Impostare la task

Ora che il concetto di Critical CSS è più chiaro, procediamo con la parte pratica, di seguito ti mostro come impostare la task per la generazione del Critical CSS con Gulp.

Se non hai mai configurato un task runner, ti consiglio di dare un’occhiata alla guida ufficiale di Gulp.

Perché non usare Grunt?

Se nel tuo workflow operativo usi Grunt al posto di Gulp, sei liberissimo di adattare il codice che seguirà e magari condividerlo con me per arricchire questa guida.

Personalmente utilizzo Gulp perché lo trovo più intuitivo e perché usa lo stream di Node per modificare i file, il che si traduce in una maggior velocità e questo per me è più che sufficiente.

Installare le dipendenze

Per procedere oltre devi avere sul tuo computer Node, NPM e nella directory del tuo tema un file gulp.js.

Ci siamo? Proseguiamo…

Nella directory del tuo tema installa gulp-penthouse digitando da terminale il seguente comando:

npm i gulp-penthouse --save-dev

Penthouse sarà responsabile della generazione del Critical CSS.

Aggiungi gulp-penthouse al tuo gulp.js

var criticalCss = require('gulp-penthouse');

Scrivere la task

Ora devi scrivere la task come segue, modificala se necessario:

gulp.task('createCriticalCss', function () {
return gulp.src('dist/css/bundle.css')
.pipe(criticalCss({
out: 'critical.php', // Nome del file da generare
url: 'http://localhost', // URL dalla quale Penthouse deve estrarre gli stili critici
width: 1400, // larghezza massima della finestra per le media queries
height: 900, // altezza massima della finestra per le media queries
userAgent: 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)' // mascherarsi da Googlebot mentre estrapoliamo le informazioni
}))
.pipe(cleanCss({ compatibility: "ie8" })) // Minifica il CSS generato
.pipe(gulp.dest('dist/css')); // Cartella di destinazione del file generato
});

Se ti sembra arabo, spiego brevemente cosa c’è scritto qui sopra:

  • gulp.src('dist/css/bundle.css') – Recupera il file CSS principale, quello con tutti gli stili del sito.
  • .pipe(criticalCss({...}) – Configura il pacchetto che abbiamo installato e richiamato nel file gulp.js.
  • width e height definisco il viewport dalla quale estrarre le proprietà CSS (ricorda l’immagine di qualche paragrafo fa).
  • .pipe(cleanCss({...}) – Minifica il codice e lo rende compatibile con ie8 qualora ci fossero dei problemi di compatibilità, per installarlo dovrai digitare a terminale npm i --save-dev clean-css e richiamarlo nel tuo file gulp.js var cleanCss= require('clean-css');
  • .pipe(gulp.dest()) – Il file critical.php verrà salvato nella directory che indichi, qualora la directory non esistesse, gulp la creerà per te.

Ora che lo snippet è più chiaro, può essere eseguito da terminale digitando

gulp createCriticalCss

Se tutto è stato completato con successo dovresti: 1 vedere il messaggio di conferma nel terminale e 2 vedere il file critical.php nella directory indicata.

Inserire il Critical CSS nel tema

Ora che hai tutto pronto puoi richiamare il file generato nella head del tuo tema come segue:

<style>
<?php get_template_part('dist/css/critical' ); ?>
</style>

WordPress si occuperà del resto.

Conclusioni

Con questo il gioco è fatto. Hai generato ed inserito con successo il critical CSS nel tuo tema. Cosa ne pensi? Hai mai usato i task runner nei tuoi progetti? Fammi sapere nei commenti.