Come ottimizzare il Critical CSS in WordPress per velocizzare il caricamento
Il Critical CSS (CSS critico) è la porzione di foglio di stile necessaria per renderizzare il contenuto visibile nella parte superiore della pagina, detta “above the fold”. Estrarre e incorporare il Critical CSS direttamente nell’HTML permette al browser di mostrare la pagina più velocemente, senza aspettare il download completo dei file CSS. In questa guida ti spiego come funziona e come implementarlo in WordPress.
Perché il CSS blocca il rendering
Quando il browser carica una pagina, deve scaricare e analizzare tutti i file CSS prima di mostrare qualsiasi contenuto. Se il tuo sito ha un foglio di stile da 200 KB, il browser deve scaricarlo tutto prima di renderizzare anche solo il titolo della pagina. Questo tempo di attesa si riflette direttamente nel punteggio Largest Contentful Paint (LCP) di Google, una delle metriche Core Web Vitals che influenza il posizionamento. Il Critical CSS risolve questo problema separando il CSS necessario per il contenuto iniziale dal resto.
Come funziona il Critical CSS
Il processo di ottimizzazione del Critical CSS prevede tre passaggi:
- Estrazione: uno strumento analizza la pagina e identifica quali regole CSS sono necessarie per renderizzare il contenuto above the fold.
- Inline: il CSS critico viene inserito direttamente nel tag <style> nell’<head> della pagina HTML.
- Defer: il foglio di stile completo viene caricato in modo asincrono, senza bloccare il rendering iniziale.
Il risultato è che il browser può mostrare immediatamente il contenuto visibile con il CSS inline, e poi applicare il resto degli stili quando il file CSS completo viene scaricato in background.
Implementare il Critical CSS con un plugin di caching
Il modo più semplice per aggiungere il Critical CSS in WordPress è tramite un plugin di caching che includa questa funzionalità. I plugin più diffusi che supportano il Critical CSS sono:
- WP Rocket: nella sezione “Ottimizzazione dei file”, attiva “Ottimizza la distribuzione dei CSS”. Il plugin genera automaticamente il Critical CSS per ogni pagina e lo inserisce inline.
- FlyingPress: genera il Critical CSS automaticamente al salvataggio della cache. Supporta CSS critico diverso per ogni tipo di pagina (home, articoli, pagine, archivi).
- LiteSpeed Cache: se il tuo server usa LiteSpeed, il plugin include la generazione di Critical CSS nelle impostazioni di ottimizzazione della pagina.
Questi plugin gestiscono tutto automaticamente: estraggono il CSS critico, lo inseriscono inline nell’HTML e caricano il foglio di stile completo in modo asincrono.
Generare il Critical CSS manualmente
Se preferisci non usare un plugin a pagamento, puoi generare il Critical CSS manualmente con strumenti online o da riga di comando:
- CriticalCSS.com: un servizio online che analizza l’URL della tua pagina e restituisce il CSS critico da copiare.
- Penthouse (npm): uno strumento Node.js che puoi eseguire in locale per generare il Critical CSS. Installalo con npm install -g penthouse e lancialo specificando l’URL e il file CSS del tuo tema.
Una volta ottenuto il CSS critico, aggiungilo nell’<head> del tuo tema tramite il file functions.php:
function add_critical_css() {
if (is_front_page()) {
echo '<style id="critical-css">' . file_get_contents(get_template_directory() . '/critical.css') . '</style>';
}
}
add_action('wp_head', 'add_critical_css', 1);
Questo approccio richiede di rigenerare il CSS critico ogni volta che modifichi il design del sito.
Caricare il CSS completo in modo asincrono
Dopo aver inserito il Critical CSS inline, devi caricare il foglio di stile completo senza bloccare il rendering. Il metodo consigliato usa l’attributo media=”print” che viene poi cambiato a all dopo il caricamento:
<link rel="stylesheet" href="style.css" media="print" onload="this.media='all'">
Questo trucco dice al browser di caricare il CSS come se fosse per la stampa (non bloccante), e una volta caricato lo applica a tutti i media. I plugin di caching gestiscono questo automaticamente.
Verificare il risultato
Dopo aver implementato il Critical CSS, verifica che funzioni correttamente:
- Google PageSpeed Insights: controlla che l’avviso “Eliminate render-blocking resources” sia risolto o ridotto.
- Test visivo: disabilita JavaScript nel browser e ricarica la pagina. Il contenuto above the fold dovrebbe apparire correttamente stilizzato anche senza JavaScript, perché il CSS critico è inline.
- Flash of Unstyled Content (FOUC): se noti un breve lampo di contenuto non stilizzato prima che il CSS completo venga applicato, il Critical CSS generato non include tutte le regole necessarie. Rigenera con una viewport più ampia.
Errori comuni da evitare
Quando implementi il Critical CSS, fai attenzione a questi errori:
- Critical CSS troppo grande: se il CSS inline supera i 50 KB, stai includendo troppe regole. Il Critical CSS dovrebbe contenere solo lo stile per il contenuto visibile nella prima schermata.
- Non aggiornare il Critical CSS dopo modifiche al tema: se cambi il design e non rigeneri il CSS critico, gli utenti vedranno un layout diverso per un istante prima che il CSS completo venga caricato.
- Rimuovere il CSS originale: il Critical CSS non sostituisce il foglio di stile completo. Il file CSS originale deve comunque essere caricato per stilizzare il contenuto below the fold e le interazioni utente.
Serve assistenza?
Se vuoi ottimizzare le prestazioni del tuo sito WordPress con il Critical CSS, il team di SoccorsoWP può configurare tutto per te e migliorare i tuoi Core Web Vitals. Apri un ticket e velocizza il tuo sito.
