Tra le tante tecniche utilizzate per migliorare le performance di un sito web, il CSS critico inline è una di quelle che mi ha portato i maggiori benefici fin da subito.
Ti avviso: non è una tecnica di semplice implementazione e te la consiglio solo se non utilizzi framework CSS complessi come Tailwind o Bootstrap.
Detto questo, credimi: abbandonare i framework e usare la tecnica del CSS critico in linea ha davvero dato una marcia in più ai miei siti web e ha migliorato moltissimo le performance e il punteggio su PageSpeed Insights.
Cos’è il CSS critico
Quando il browser carica una pagina web, deve scaricare e analizzare il CSS prima di poter mostrare correttamente il contenuto all’utente.
Il problema è che i file CSS sono considerati risorse render-blocking, ovvero risorse che bloccano il rendering della pagina finché non vengono scaricate ed elaborate.
Ma perché aspettare di scaricare TUTTO il CSS del sito per mostrare almeno la prima porzione della pagina?
Ecco come nasce la tecnica del CSS critico in linea.
L’idea è molto semplice: ridurre il CSS render-blocking il più possibile, includendo solamente gli stili necessari per visualizzare immediatamente la parte della pagina visibile (la cosiddetta above the fold) e inserirli direttamente nell’HTML tramite un tag <style>.
In questo modo il browser avrà subito a disposizione le informazioni necessarie per mostrare il contenuto principale, senza attendere il download del foglio di stile completo, che verrà scaricato successivamente.
Cosa inserire nel CSS critico
Immaginiamo una homepage composta da:
- header
- menu di navigazione
- hero section
- contenuto principale
- footer
Per il rendering iniziale potrebbe essere sufficiente caricare immediatamente gli stili relativi a header, menu e hero.
Tutti gli altri stili possono essere caricati successivamente tramite il normale file CSS.
Il risultato è che l’utente vede il contenuto principale più rapidamente, migliorando la percezione di velocità del sito.
Il CSS critico va scritto in linea all’interno del tag <head> di tutte le pagine del tuo sito, racchiuso in <style>:
Nel CSS critico io di solito inserisco questi elementi:
- variabili CSS
- le regole @font-face
- lo stile per lo skip link
- lo stile di focus-visibile
- gli stili necessari per header, navbar e hero section
- gli stili necessari per il menu mobile
Mentre lavori alla scrittura del CSS critico, disabilita qualunque altro stile: solo così avrai la certezza di inserire tutte le regole CSS necessarie per la corretta visualizzazione della sezione above-the-fold.
Attenzione al CLS
Il CLS è un parametro delle web performance che dovrebbe sempre essere a 0, o molto vicino a questo numero.
CLS sta per Content Layout Shift e misura quando gli elementi della pagina si muovono nello spazio prima che la pagina finisca il rendering.
Hai presente quei siti pieni di pubblicità in cui stai per cliccare su un link e, improvvisamente, quel link si sposta più in alto o più in basso e tu clicchi per errore su un ads?
Quello è proprio un esempio di CLS alto, e devi assolutamente evitarlo.
Per farlo, ti consiglio di usare il throttling, facendo questo test con il browser Chrome:
- Apri DevTools
- apri il pannello Network
- apri la tendina di scelta del throttling e impostalo a 3G
- ricarica la pagina
Ora stai simulando una connessione molto lenta e potresti vedere alcuni elementi della sezione above the fold che “saltano” una volta completato il caricamento della pagina.
Perché può migliorare le performance
Il principale vantaggio del CSS critico inline è la riduzione del tempo necessario per il primo rendering.
Dal punto di vista dei Core Web Vitals questo può contribuire a migliorare metriche come:
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
Poiché gli stili essenziali sono già presenti nell’HTML, il browser non deve attendere ulteriori richieste HTTP prima di iniziare a disegnare la pagina.
Può sembrare una questione di pochi millisecondi, ma su connessioni lente o dispositivi poco performanti la differenza si vede eccome!
Non è una tecnica miracolosa
Leggendo alcuni articoli sembra quasi che il CSS critico sia la soluzione definitiva a qualsiasi problema di performance. In realtà non è così.
Se il problema principale del sito è rappresentato da immagini enormi, JavaScript eccessivo, font caricati male o un hosting lento, il CSS critico avrà un impatto limitato.
Anzi, in alcuni casi può addirittura peggiorare la situazione.
Inserendo gli stili direttamente nell’HTML si aumenta infatti il peso del documento iniziale. Se il blocco di CSS critico diventa troppo grande, il vantaggio ottenuto potrebbe ridursi o annullarsi.
Come spesso accade nel mondo delle performance, non esistono ottimizzazioni universali.
Un altro aspetto da valutare è come è stata progettata la sezione above the fold.
Se questa sezione ha molti elementi, testi, bottoni, animazioni e media, non è detto che il CSS critico in linea porti grossi vantaggi, perché sarebbe comunque un blocco di codice piuttosto lungo.
Per questo, ti consiglio di minificare sempre il CSS critico in linea se è molto lungo.
Quando lo consiglio
Generalmente considero il CSS critico una tecnica di ottimizzazione avanzata che può tornare utile per qualunque sito web.
Al tempo stesso, mi rendo conto che è applicabile solo in quei siti web in cui il controllo sul codice e sul CSS è totale, mentre risulta complesso da gestire se si usano temi o framework CSS.
Prima di arrivare a questo livello di ottimizzazione, ci sono comunque molti altri aspetti su cui intervenire e che spesso producono benefici molto maggiori:
- ottimizzazione delle immagini
- riduzione del JavaScript non necessario
- eliminazione di plugin inutili
- caricamento corretto dei font (ne ho parlato nell’articolo Come ottimizzare i font per non rallentare il tuo sito)
- caching efficace
- miglioramento del tempo di risposta del server
Conclusioni
Il CSS critico inline può migliorare la velocità percepita di un sito e contribuire a ottenere punteggi migliori su PageSpeed Insights.
Tuttavia non è una soluzione magica e non dovrebbe essere la prima ottimizzazione da implementare, anche perché non è sempre applicabile in maniera semplice.
Come per molte tecniche legate alle performance web, il suo valore dipende dal contesto.
Se utilizzato correttamente, può offrire benefici concreti. Se applicato senza una reale necessità, rischia invece di allungare i tempi di sviluppo – e i tuoi mal di testa – senza portare una riduzione significativa dei tempi di caricamento.
La regola rimane sempre la stessa: misurare, testare e basare le decisioni sui dati, non sulle mode del momento.