Il Critical CSS (o CSS critico) rappresenta l’insieme minimo indispensabile di istruzioni di stile necessarie per visualizzare correttamente la parte superiore di una pagina web, ovvero l’area visibile sullo schermo dello smartphone o del computer prima che l’utente inizi a scorrere verso il basso, nota come area “above the fold”.
I normali fogli di stile esterni sono considerati dal browser risorse che bloccano il rendering: fino a quando il file CSS completo non è stato interamente scaricato ed elaborato, la schermata rimane bianca per evitare la comparsa momentanea di testi grezzi e disordinati. Estraendo soltanto il Critical CSS e incorporandolo direttamente all’interno dell’HTML (inline nell’intestazione della pagina), il browser può mostrare immediatamente i contenuti principali. Tutto il resto del codice di stile, relativo agli elementi posizionati più in basso o a sezioni secondarie, viene scaricato in modo asincrono in background.
Su un’installazione WordPress con un tema ricco di funzionalità o un page builder, il volume totale di codice CSS può raggiungere facilmente svariate centinaia di kilobyte. Installando un plugin di ottimizzazione e cache, puoi attivare la generazione automatica del Critical CSS: in questo modo, un visitatore vedrà il titolo dell’articolo, il menu di navigazione e l’immagine principale in una frazione di secondo, migliorando sensibilmente parametri vitali per Google come il First Contentful Paint e il Largest Contentful Paint.
L’errore più frequente consiste nell’utilizzare un unico blocco di Critical CSS valido indiscriminatamente per tutte le pagine del sito. La testata di un articolo del blog, la vetrina di un negozio online e la home page hanno strutture profondamente diverse: accorparle genera un codice inline troppo pesante, annullando il vantaggio velocistico. Un altro inconveniente comune si verifica quando si modifica la grafica del sito dimenticando di rigenerare il CSS critico, provocando un fastidioso sfarfallio visivo in cui la pagina appare prima sformata e si corregge solo pochi istanti dopo.
L’adozione del Critical CSS è una soluzione preziosa se gestisci un sito WordPress complesso che riceve molte visite da dispositivi mobili e fatica a superare le verifiche delle prestazioni dei Core Web Vitals. Se invece utilizzi un tema a blocchi leggerissimo e minimale, con un foglio di stile compatto di poche decine di kilobyte, l’estrazione del CSS critico è superflua e aggiunge solo complessità gestionale.
Fonte: web.dev