⚡ CSS critico: cos'è, come generarlo e velocizzare il tuo sito web
La tua pagina impiega 3 secondi a caricarsi e i visitatori se ne vanno. Apri Google PageSpeed Insights ed eccolo lì in rosso: «Elimina le risorse di blocco della visualizzazione». Ti suona familiare? Secondo i dati di HTTP Archive per il 2025, la mediana delle pagine carica 7 fogli di stile esterni e il peso medio dei CSS ha superato i 120 KB. Ogni file nel <head> è una barriera tra l'utente e il contenuto.
Il problema non sono i CSS «pesanti». Il browser non renderizza un solo pixel finché non ha scaricato e analizzato TUTTI gli stili. Anche quelli che formattano un footer a pixel 4000. La soluzione è il Critical CSS: una tecnica che estrae dal foglio di stile completo solo ciò che serve per la viewport visibile e lo incorpora direttamente nel <head>. Il resto viene caricato in modo asincrono e non blocca nulla.
Abbiamo implementato il critical CSS su tutti i progetti techblog e costruito un flusso di lavoro funzionante: dalla generazione manuale in 30 secondi all'automazione completa tramite Gulp e plugin WordPress. Di seguito una guida passo passo senza fronzoli.
💡 Panoramica rapida:
- Capire i meccanismi del blocco della visualizzazione e perché il browser aspetta i CSS anche quando l'HTML è pronto
- Scegliere lo strumento giusto: un generatore online gratuito in 10 secondi, Penthouse per progetti npm, o la combinazione WP Rocket / Autoptimize per WordPress
- Impostare un flusso di lavoro Gulp per la rigenerazione automatica del critical CSS a ogni deploy
- Evitare le trappole comuni: FOUC, contenuti JS, problemi con le media query
Cos'è il critical CSS e perché il browser rallenta
Il browser costruisce due strutture: il DOM dall'HTML e il CSSOM dagli stili. Finché il CSSOM non è pronto, il rendering si blocca. Questo è il CSS che blocca la visualizzazione: la pagina resta bianca finché tutti i fogli di stile nel <head> non sono caricati.
Google PageSpeed Insights diagnostica il problema in modo diretto:
La tua pagina ha 3 risorse CSS bloccanti. Questo causa un ritardo nel rendering. Nessuno dei contenuti above the fold può essere visualizzato senza attendere il caricamento delle seguenti risorse.
Il termine «above the fold» viene dai giornali. Sul web indica l'area visibile prima dello scroll: circa 600 px su desktop, 900 px su laptop, 400 px su smartphone. La maggior parte degli sviluppatori punta a valori sicuri di 1300 px di larghezza e 900 px di altezza.
Il critical CSS è l'insieme minimo di stili necessario per renderizzare solo quell'area. Griglia, navigazione, font, hero section. Tutto il resto viene differito e caricato in modo asincrono: la pagina appare all'istante mentre gli stili aggiuntivi si caricano in background.
I numeri sono significativi. Secondo i dati di Google, incorporare il critical CSS riduce il First Contentful Paint di 0,5-1,2 secondi su dispositivi mobili. Per l'e-commerce, questo ha un impatto diretto sulla conversione: una ricerca di Portent ha mostrato che i siti con FCP sotto 1 secondo convertono 3 volte meglio dei siti con FCP di 3 secondi.
Strumenti di generazione: dal gratuito online all'API commerciale
Generare il critical CSS manualmente è impossibile. Serve uno strumento che faccia il rendering della pagina in un browser headless ed estragga solo gli stili utilizzati. Ecco tre opzioni funzionanti.
Strumento | Tipo | Costo | Automazione | Ideale per |
|---|---|---|---|---|
Critical Path CSS Generator | Online | Gratuito | No | Pagine singole, primi passi |
Penthouse | Pacchetto npm | Gratuito | Sì, via Gulp/script | Sviluppatori, elaborazione batch |
criticalcss.com | SaaS | Da $10/mese | Sì, API + WordPress | Produzione, siti grandi |
Critical Path CSS Generator: online, in 10 secondi
Critical Path CSS Generator di Jonas Ohlsson è uno strumento gratuito da cui vale la pena partire. L'interfaccia è semplice: incolla l'URL della pagina, incolla il tuo CSS COMPLETO (anche 200 KB minificati), clicca il pulsante, ottieni gli stili per l'above-the-fold.
Pro: barriera d'ingresso zero. Non servono Node.js, npm o script. Contro: lavoro puramente manuale. Elabori ogni pagina separatamente e quando gli stili cambiano, ripeti tutto. Funziona per un sito da 5 pagine, ma 50 pagine diventano un problema.
Il creatore del generatore ha poi lanciato il servizio commerciale criticalcss.com, un'evoluzione della stessa idea con aggiornamenti automatici, validazione tramite screenshot e un'API per l'elaborazione batch.
Penthouse: generatore da riga di comando per Gulp
Penthouse (oltre 2680 stelle su GitHub) è un pacchetto npm dello stesso autore. Sotto il cofano: Puppeteer e Chromium headless. Apre la pagina, determina i CSS effettivamente usati per un dato viewport e scarta il resto.
Installazione:
1 npm install --save-dev penthouse
Chiamata minima da uno script Node:
1 const penthouse = require('penthouse'); 2 const fs = require('fs'); 3 4 penthouse({ 5 url: 'https://example.com', 6 cssString: fs.readFileSync('./style.css', 'utf8'), 7 width: 1300, 8 height: 900 9 }).then(criticalCss => { 10 fs.writeFileSync('./critical.css', criticalCss); 11 });
Larghezza 1300 e altezza 900 sono valori empiricamente sicuri. Le media query più larghe del viewport critico vengono eliminate di default. Per conservarle, usa il flag keepLargerMediaQueries: true.
Nota importante: Penthouse viene eseguito con JavaScript disabilitato. Se il contenuto above-the-fold è generato da un framework JS, l'HTML prima dell'hydration è vuoto e Penthouse non troverà alcuno stile. La soluzione: rendering lato server (SSR) o il parametro forceInclude con selettori da preservare forzatamente.
WP Rocket e Autoptimize: due plugin per WordPress
Se il tuo sito gira su WordPress, la generazione manuale del CSS critico è una complicazione inutile. Tante pagine, template che si moltiplicano, stili che cambiano. Due plugin risolvono il problema in modo completo.
WP Rocket è un plugin premium (59 €/anno per 1 sito, 119 € per 3, 299 € per 50). L'opzione integrata "Rimuovi CSS inutilizzato" genera automaticamente il CSS critico per ogni pagina, lo inserisce nel <head> e carica il resto in modo asincrono. Due checkbox e la raccomandazione "Elimina le risorse che bloccano la renderizzazione" è risolta. Extra: l'hub integrato Rocket Insights, basato su GTmetrix, mostra le metriche direttamente dall'amministrazione di WordPress.
Autoptimize è un plugin gratuito con un'opzione "Inline and Defer CSS". La versione base genera UN solo file CSS critico per l'intero sito, cosa che nella pratica non funziona (pagine diverse, contenuto above-the-fold diverso). La soluzione: integrazione con il servizio criticalcss.com (piano WordPress, a partire da 10 $/mese). Il plugin richiede automaticamente il CSS critico via API, lo inserisce e lo aggiorna quando avvengono modifiche.
Per la maggior parte degli utenti WordPress, la combinazione WP Rocket o Autoptimize + criticalcss.com risolve il problema completamente. Il resto di questo articolo è per chi realizza siti su misura.
Flusso di lavoro manuale: generazione, inserimento, verifica
Se stai costruendo un sito senza un CMS, il processo si articola in quattro passaggi.
Passaggio 1. Copia TUTTO il tuo CSS. Unisci tutti gli stili del sito in UN solo file. Se scrivi in Sass, compilalo. Se usi un framework come Bootstrap o Tailwind, includi il suo CSS per intero. Non provare a indovinare cosa "probabilmente non serve": ci penserà il generatore a capirlo.
Passaggio 2. Genera il CSS critico tramite il generatore online o Penthouse. L'output è un blocco minificato di stili responsabile solo dell'above-the-fold.
Passaggio 3. Inserisci il CSS critico in un tag <style> dentro l'<head>. Questo è cruciale: gli stili inline non creano richieste HTTP aggiuntive e vengono elaborati subito dal browser. Il risultato avrà un aspetto simile a questo:
1 <!DOCTYPE html> 2 <html lang="ru"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <style>@charset "UTF-8";*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15}body{margin:0;font-family:'Inter',Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5;color:#222;background:#fff}nav{display:block}.container{max-width:1200px;margin:0 auto;padding:0 20px}</style> 7 <title>Page Title</title> 8 </head>
Passaggio 4. Sposta CSS e JS esterni dal <head> in fondo alla pagina, prima del </body> di chiusura. Sì, un <link rel="stylesheet"> nel footer è tecnicamente non valido secondo le specifiche, ma nella pratica funziona in tutti i browser e risolve il problema del blocco. L'alternativa è loadCSS di Filament Group per il caricamento asincrono degli stili senza spostarli nel footer.
Infine, verifica con Google PageSpeed Insights. Il suggerimento «Elimina risorse che bloccano la visualizzazione» è scomparso? Hai fatto tutto correttamente.
Gulp + Penthouse: automazione per progetti senza WordPress
Ogni modifica di stile richiede la rigenerazione del CSS critico. Farlo a mano è di una noia mortale. Gulp automatizza il processo.
Il nostro flusso di lavoro in produzione:
1 // gulpfile.js 2 const gulp = require('gulp'); 3 const penthouse = require('penthouse'); 4 const fs = require('fs'); 5 const urlList = require('./criticalcss-pagelist.json'); 6 7 gulp.task('criticalcss', function () { 8 urlList.urls.forEach(function (item) { 9 penthouse({ 10 url: item.link, 11 css: './css/style.min.css', 12 width: 1300, 13 height: 900, 14 keepLargerMediaQueries: false, 15 renderWaitTime: 100, 16 timeout: 30000 17 }).then(function (criticalCss) { 18 fs.writeFileSync(item.output, criticalCss); 19 console.log('✓ Critical CSS generated: ' + item.link); 20 }).catch(function (err) { 21 console.error('✗ Error for ' + item.link + ': ' + err.message); 22 }); 23 }); 24 });
Il file criticalcss-pagelist.json con l'elenco di URL e file di output:
1 { 2 "urls": [ 3 { "link": "https://example.com", "output": "./critical/home.php" }, 4 { "link": "https://example.com/about", "output": "./critical/about.php" }, 5 { "link": "https://example.com/contact", "output": "./critical/contact.php" } 6 ] 7 }
Scriviamo l'output in file PHP che racchiudono il CSS e vengono inseriti tramite include nel <head> del template corrispondente. Adatta il metodo al tuo stack: scrivi su .css, inserisci via server-side include, qualunque cosa funzioni.
Esegui: gulp criticalcss, e tutte le pagine vengono elaborate in un unico passaggio. Aggancia il task alla CI/CD in fase di deploy e il CSS critico resta sempre aggiornato.
Problemi che incontrerai
Il CSS critico non è privo di spigoli. Ecco cosa abbiamo riscontrato nella pratica.
Flash of unstyled content (FOUC). Il CSS critico non copriva qualche elemento e l'utente vede uno scatto visivo quando vengono caricati gli stili completi. Causa: contenuto posizionato fuori dal viewport tramite absolute o transform, che il generatore non ha rilevato. Soluzione: il flag forceInclude con il selettore dell'elemento problematico.
Contenuto generato da JS. Quasi tutti i generatori (Penthouse, strumenti online) vengono eseguiti con JavaScript disabilitato. Se la tua landing page è costruita con React, Vue o Angular senza server-side rendering, l'HTML è vuoto e il generatore non ha nulla da analizzare. L'unica soluzione affidabile: abilitare l'SSR a livello di framework. L'alternativa è specificare manualmente i selettori tramite forceInclude, ma è fragile.
Media query. Di default, Penthouse elimina le regole il cui min-width supera il viewport specificato. Se non imposti keepLargerMediaQueries: true, gli stili desktop vanno persi e il sito si rompe sugli schermi larghi. Verifica sempre i risultati alle risoluzioni reali.
Cache. Hai generato il CSS critico, hai fatto il deploy, una settimana dopo hai modificato lo stile dell'header, ma la vecchia versione è ancora nel <head>. Senza automazione CI/CD, ti dimenticherai di rigenerarlo. Il task Gulp in fase di deploy risolve completamente il problema.
⁉️🤔 Domande frequenti
Il CSS critico è obbligatorio per ogni sito?
No, non per ogni sito. Se il tuo sito ha un singolo file CSS da 20 KB e l'FCP è già sotto il secondo, il beneficio sarà trascurabile. Ma se il
<head>contiene 3-4 fogli di stile per un totale di circa 100 KB, il CSS critico porterà un miglioramento misurabile. Per una semplice landing page, il generatore online richiede 10 minuti. Per uno store WordPress, WP Rocket con un paio di checkbox fa tutto. Controlla PageSpeed Insights: se "Elimina risorse che bloccano la renderizzazione" è in cima alla lista, fallo.
Posso semplicemente spostare tutti i tag <link> nel footer ed evitare lo sbattimento?
Tecnicamente no. La specifica HTML richiede
<link rel="stylesheet">solo nel<head>. Nella pratica, i browser renderizzano le pagine con<link>nel footer, ma si ottiene un flash of unstyled content (FOUC) fino al caricamento degli stili. Accettabile per un semplice sito vetrina, non per un progetto commerciale. L'approccio corretto: CSS critico inline nel<head>, caricamento asincrono per il resto tramiteloadCSSomedia="print"cononload="this.media='all'". Spostare tutto nel footer è un espediente che funziona al costo di uno scatto visivo.
Cosa è cambiato con HTTP/3 e gli Early Hints?
HTTP/3 e i 103 Early Hints consentono al browser di iniziare a caricare le risorse critiche prima di ricevere la risposta completa del server. Questo riduce la latenza ma non elimina il blocco della renderizzazione: gli stili devono comunque essere scaricati e analizzati. Early Hints e CSS critico lavorano insieme, non uno al posto dell'altro: gli Early Hints accelerano la consegna, il CSS critico accelera il primo render. Le due tecniche si rafforzano a vicenda.
Penthouse non viene aggiornato da 4 anni. È ancora rilevante?
L'ultima release di Penthouse (v2.3.3) è uscita nel 2022, ma il pacchetto resta funzionante: gira su Puppeteer e Chromium, che sono stabili. La funzionalità principale (generare il CSS utilizzato per un dato viewport) non richiede aggiornamenti frequenti. Un'alternativa è Critical di Addy Osmani (oltre 12.000 stelle), che riceve aggiornamenti più attivi e si integra anch'esso con Gulp/Grunt.
Come gestisco le pagine dinamiche in cui il contenuto dipende dall'utente?
Per pagine con personalizzazione (dashboard utente, carrello, pannello di amministrazione), il CSS critico viene generato non per un utente specifico ma per la struttura generale: header, sidebar, griglia. Il contenuto dinamico va nella porzione asincrona. Se gli stili per un blocco above-the-fold specifico per utente sono essenziali, aggiungi i selettori corrispondenti tramite
forceInclude. Genera il CSS critico basandoti sulla struttura generale della pagina e lascia i blocchi personalizzati al caricamento asincrono, usandoforceIncludeper gli elementi critici.
Conviene implementare il CSS critico sul tuo progetto
Se il tuo sito carica più di un file CSS nel <head>, il CSS critico porterà guadagni di velocità misurabili. Per una landing di tre pagine, il generatore online richiede 10 minuti. Per un blog o store WordPress, due checkbox in WP Rocket. Per un progetto custom, un'ora per configurare Gulp e Penthouse si ripaga al primo deploy.
La barriera d'ingresso è più bassa di quanto sembri. Usa il generatore online gratuito, copia il CSS della tua pagina, incollalo e in 30 secondi vedrai i risultati. Quando vorrai automatizzare, torna alla sezione sul flusso di lavoro con Gulp: risolve il problema in modo completo. Raddoppiare la velocità di caricamento con un paio d'ore di lavoro è un affare difficile da rifiutare.
Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.