Aiuto e documentazione
Velocità Impatto alto Difficile 1–3 h
Riduzione del CSS bloccante
Un CSS di grandi dimensioni nell'header ritarda il rendering.
Cos'è
Il CSS è bloccante per impostazione predefinita — il browser non renderizza nulla finché non scarica ed elabora gli stili. File CSS grandi o numerosi ritardano così la prima immagine della pagina.
Perché è importante
Il caricamento di un unico grande CSS per l'intero sito ritarda anche una pagina semplice. L'ottimizzazione migliora direttamente l'LCP e la velocità percepita.
Come fare
- 1Estrai il "critical CSS" per la parte visibile e inseriscilo inline nell'<head>.
- 2Carica il resto del CSS in modo asincrono (trucco media="print" o rel="preload" + onload).
- 3Rimuovi gli stili inutilizzati (PurgeCSS / strumento Coverage nei devtools).
- 4Suddividi il CSS per pagina/componente invece di un unico monolite.
Caricamento asincrono del CSS non critico
Corretto
<link rel="preload" href="/css/stili.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/css/stili.css"></noscript>Conclusione
Critical CSS inline + il resto in modo asincrono è il pattern più efficace contro il CSS bloccante. È una modifica più impegnativa, ma sui siti lenti porta un notevole velocizzamento del primo rendering. Te la facilitano i moderni strumenti di build e i framework.
Argomenti correlati