Pubblicato il - Aggiornato il
Impariamo a usare il Critical CSS: cos’è e a cosa serve questa tecnica
Attivare il Critical CSS è un punto indispensabile perché non sempre velocizzare sito web è sinonimo di eliminare a occhi chiusi. È utile semplificare, va bene togliere ciò che non serve e che non fa parte dell’indispensabile. Però questo principio, estremizzato, porta a una conclusione: il nulla.
Solo una pagina bianca può raggiungere il risultato ideale. Ti sembra una soluzione efficace? No, per questo bisogna prendere in considerazione il Critical CSS. Di cosa si tratta esattamente?
Indice dei contenuti
Cos’è il Critical CSS, definizione
I Cascading Style Sheets, fogli di stile a cascata, permettono di dare un’estetica al contenuto con indicazioni precise. Che però possono rallentare la pagina web. Il Critical CSS è una metodologia per ottimizzare i tempi di rendering della pagina che consente di caricare solo ciò che serve nell’above the fold. Vale a dire la sezione più importante e delicata per migliorare l’esperienza utente.
Con la funzione Critical CSS (il termine inglese critical sta per importante in questo caso) evitiamo al browser di scaricare tutti i file dei fogli di stile. Ma suggeriamo di analizzare solo quelli che servono nella prima fase del caricamento. Per poi operare sul resto in un secondo momento.
Da leggere: tool per misurare la velocità del sito
Perché lavorare su questo fronte?
Implementare il Critical CSS sul proprio ecommerce, blog o sito web – soprattutto quelli con una gran quantità di caratteristiche legate ai fogli di stile – vuol dire facilitare il rendering della prima parte della pagina web nel momento in cui l’utente esegue la richiesta. Siamo nella fase più delicata, quella in cui bisogna comunicare subito all’utente che ci sei nel miglior modo possibile.
Il First Contentful Paint (FCP) è una metrica fondamentale che misura proprio questo: il tempo impiegato dal browser per effettuare il rendering della prima parte del contenuto.
La presenza del Critical CSS può aiutare ad abbassare in modo sostanziale i valori che appesantiscono il caricamento della pagina web. Soprattutto se si lavora da mobile con connessioni precarie. Guarda come cambia il lavoro di caricamento grazie a questa timeline presa dal web.dev di Google.
Chi si occupa di web performance sa bene che bisogna scegliere un compromesso tra esigenze funzionali, estetica e buone prestazioni. Abbiamo bisogno di siti web veloci, allineati ai Core Web Vitals. Ma anche belli da vedere e capaci di trasformare un visitatore in lead e poi in cliente.
Per raggiungere quest’obiettivo, nella navigazione reale e nella misurazione dati su Pagespeed Insight, abbiamo diversi strumenti a disposizione nella cassetta degli attrezzi. Uno di questi è il Critical CSS.
Come si implementa il Critical CSS
C’è un principio chiave: permettere alla sezione <head> di seguire solo ciò che serve per il caricamento dell’above the fold e lasciare tutto il resto a dopo. Questo avviene, in termini pratici, individuando il CSS minimo per fare il rendering del contenuto che si carica immediatamente e inserendolo nell’HTML tra i tag di stile della parte iniziale. Ecco un esempio.
<!doctype html>
<head>
<style> /* inlined critical CSS */ </style>
<script> loadCSS('non-critical.css'); </script>
</head>Poi con la funzione loadCSS(); carichiamo in asincrono i CSS che fanno parte dell’area non decisiva per la nostra missione. Sviluppare il CSS più pesante e non necessario all’above the fold velocizza i tempi di rendering, e ottimizza la presentazione della pagina web nel modo migliore per l’user experience. Che poi rientra tra i vari fattori di posizionamento SEO di una risorsa online.
Ovviamente creare tutto questo per le pagine web non è facile, soprattutto se vuoi sviluppare il Critical CSS a mano. Non temere, ci sono dei validi supporti che ti vengono incontro. Come attivare un valido contributo sul tuo sito web bisognoso di velocità? Ci sono soluzioni differenti.
Preferisci lavorare come un vero artigiano del web? Non perdere di vista la risorsa messa a disposizione da github.com per gli sviluppatori più attenti e desiderosi di sporcarsi le mani.
Tool online
Ci sono diversi strumenti gratuiti e disponibili su internet per creare la tua stringa di CSS da inserire nell’above the fold per velocizzare il lavoro di rendering, ovvero di resa in termini grafici. Quali sono i migliori? Esiste una lista da avere a portata di click? Ecco la mia toolbox preferita:
Jonas Ohlsson Aden
Con Jonassebastianohlsson.com il processo è alquanto semplice. Devi solo scegliere come estrarre il Critical CSS, se inserendo semplicemente l’URL o copiando e incollando l’intero codice.
Critical Path CSS Generator
Sitelocity.com/critical-path-css-generator è un generatore di Critical CSS simile al precedente, solo che elimina la soluzione codice: rimane la possibilità di copiare e incollare l’URL della pagina.
A questo punto lo strumento fa la scansione del sito web e analizza tutti i file CSS, restituendo la versione compressa e quella che deve essere inserita nell’above the fold come critical.
Pegasaas
Servizio freemium che si collega a un universo di ottimizzazione più ampio e articolato. Simile ai tool precedenti, quello di Pagasaas consente di sintetizzare il CSS decisivo al rendering della pagina web con pochi click. Così puoi inserirlo proprio dove serve per migliorare le prestazioni.
Plugin per WordPress
La verità è semplice: ci sono delle estensioni che consentono di attivare il Critical CSS sul tuo sito web WordPress in automatico, senza alcun impegno da parte dell’utente. Quali sono i nomi?
WP Rocket
Un nome che diventa garanzia nel corso degli anni. Questo plugin fa miracoli per chi vuole ottimizzare le pagine web e velocizzare il caricamento. Puoi integrare qualsiasi funzione, dal CDN alla compressione delle immagini. Ovviamente c’è anche l’area per il Critical CSS.
WP Rocket offre un metodo semplice ed efficace. Attiva il Critical CSS, è indispensabile per ridurre al minimo i classici errori per eliminate il render-blocking JavaScript and CSS registrato da Pagespeed Insight. Basta cliccare su una spunta e l’ottimizzazione è servita.
Nitropack
Tra i tanti plugin che permettono di ottimizzare le performance del sito web, NitroPack permette di eseguire una serie di funzioni decisive. Come, appunto, l’inserimento del Critical CSS.
Questo avviene in modo automatizzato: il plugin WordPress individua e inserisce il CSS necessario per ottimizzare il contenuto above the fold e lo ottimizza per ogni pagina. Tutto questo, però, senza dimenticare gli altri punti di compressione e riduzione sia dei fogli di stile che del javascript.
Swift Performance Lite
Un plugin WordPress semplice ed efficace: fa tutto quello che serve per ottimizzare i tempi di caricamento della pagina web. E comprime anche il CSS che appesantisce le risorse.
Con pochi click ottimizzi il database, comprimi il Javascript e ottieni tutto quello che serve per la cache. Ovviamente puoi anche attivare la funzione di Critical CSS con una spunta.
Da leggere: come migliorare l’esperienza dell’utente
Tu hai lavorato bene su questo fronte?
Il concetto fondamentale è chiaro: non puoi ottenere tutto – sito web super, esecuzione rapida, velocità massima – ma devi essere in grado di equilibrare gli ingredienti i fase di sviluppo.
Devi togliere quello che non serve ma non puoi presentare una pagina vuota per essere veloce. Esiste la possibilità di creare una risorsa piacevole da navigare e rispettosa delle tue esigenze di web design, devi trovare la chiave tecnica adeguata alle tue necessità. Vuoi maggiori informazioni?
Mirko Ciesco
Web Performer
Mi piace raccogliere dati dai siti per comprendere come portarli ad un livello superiore! 🚀
Sono esperto in web performance, ottimizzo la SEO tecnica e miglioro l’usabilità dei siti internet attraverso la web analytics. Creo strategie vincenti partendo dai problemi delle Startup e delle aziende. Infine tengo corsi personalizzati online e in tutta Italia con la mission di rendere il web un posto migliore.