Cos'e il critical CSS
Il critical CSS e il sottoinsieme minimo di regole CSS necessarie a renderizzare correttamente la parte above-the-fold (visibile senza scrollare) di una pagina. Inserendolo inline nell'head, il browser puo iniziare a renderizzare immediatamente senza attendere il download del foglio CSS esterno.
Perché e così efficace
I CSS esterni nell'head sono render-blocking: il browser scarica e parsa l'intero file prima di renderizzare. Con un sito che ha 200KB di CSS, l'utente vede schermo bianco mentre attende. Inline del critical CSS (5-15KB) sblocca rendering immediato, gli altri CSS arrivano in background.
Come estrarre critical CSS
Strumenti automatici: Critical (Addy Osmani) Node CLI, CriticalCSS.com online, Penthouse, PurgeCSS combinato con Puppeteer. Configurano viewport (1300x900 desktop, 375x667 mobile), URL, screenshot per identificare ATF, estraggono regole rilevanti.
Caricamento differito del CSS rimanente
Tecnica preload + onload: link rel="preload" as="style" href="main.css" onload="this.rel='stylesheet'". Fallback noscript: noscript link rel="stylesheet" href="main.css". Alternativa: media="print" onload="this.media='all'" - hack ma compatibile ovunque.
Manutenzione e CI/CD
Il critical CSS deve essere rigenerato a ogni cambio di design above-the-fold. Integra estrazione nel build pipeline (webpack, vite, gulp). Genera variante mobile e desktop. Cache busting per il foglio principale. Test che il rendering iniziale sia visivamente corretto.
Trade-off da considerare
Pro: FCP/LCP molto migliori, no flash of unstyled content (FOUC). Contro: HTML più grande (no shared cache del CSS tra pagine), complessita build, manutenzione design changes. Per siti template-based (WordPress) il guadagno e enorme. Per SPA con shell statica meno sensato.
Hai bisogno di aiuto?
Se vuoi un sito veloce ottimizzato dal team di G Tech Group, scrivici tramite il modulo di contatto.