I file CSS sono risorse di blocco della visualizzazione: devono essere caricati ed elaborati prima che il browser visualizzi la pagina. Il rendering delle pagine web che contengono fogli di stile inutilmente grandi richiede più tempo.
In questa guida scoprirai come posticipare il CSS non critico per ottimizzare il percorso di rendering critico e migliorare First Contentful Paint (FCP).
Esempio: caricamento di CSS non ottimale
L'esempio seguente contiene un'acconciatura con tre paragrafi di testo nascosti, ognuno dei quali ha una classe diversa:
Questa pagina richiede un file CSS con otto classi, ma non tutte sono necessarie per visualizzare i contenuti "visibili".
L'obiettivo di questa guida è ottimizzare questa pagina in modo che solo gli stili critici vengano caricati in modo sincrono, mentre gli altri (inclusi gli stili di paragrafo) vengono caricati in modo senza blocchi.
Misura
Esegui Lighthouse sulla pagina e vai alla sezione Prestazioni.
Il report mostra la metrica First Contentful Paint con valore "1s" e l'opportunità Elimina le risorse di blocco della visualizzazione, che rimanda al file style.css:
Per visualizzare in che modo questo CSS blocca il rendering:
- Apri la pagina in Chrome.
- Premi
Control+Shift+J
(oCommand+Option+J
su Mac) per aprire DevTools. - Fai clic sulla scheda Rendimento.
- Nel riquadro Rendimento, fai clic su Ricarica.
Nella traccia risultante, noterai che l'indicatore FCP viene posizionato subito dopo il completamento del caricamento del CSS:
Ciò significa che il browser deve attendere il caricamento e l'elaborazione di tutti i CSS prima di dipingere un singolo pixel sullo schermo.
Ottimizza
Per ottimizzare questa pagina, devi sapere quali corsi sono considerati critici. Per determinarlo, utilizza lo strumento Copertura:
- In DevTools, apri il menu dei comandi
premendo
Control+Shift+P
oCommand+Shift+P
(Mac). - Digita "Copertura" e seleziona Mostra copertura.
- Fai clic su Ricarica per ricaricare la pagina e iniziare ad acquisire la copertura.
Fai doppio clic sul report per visualizzare i dettagli:
- I corsi contrassegnati in verde sono fondamentali. Il browser ne ha bisogno per visualizzare i contenuti visibili, inclusi il titolo, i sottotitoli e i pulsanti a scomparsa.
- Le classi contrassegnate in rosso non sono critiche e interessano solo i contenuti non immediatamente visibili, come i paragrafi nascosti.
Con queste informazioni, ottimizza il tuo CSS in modo che il browser possa iniziare a elaborare gli stili critici subito dopo il caricamento della pagina e rimandare i CSS non critici per un secondo momento:
Estrai le definizioni delle classi contrassegnate in verde nel report sulla copertura e mettile in un blocco
<style>
all'inizio della pagina:<style type="text/css"> .accordion-btn {background-color: #ADD8E6;color: #444;cursor: pointer;padding: 18px;width: 100%;border: none;text-align: left;outline: none;font-size: 15px;transition: 0.4s;}.container {padding: 0 18px;display: none;background-color: white;overflow: hidden;}h1 {word-spacing: 5px;color: blue;font-weight: bold;text-align: center;} </style>
Carica il resto delle classi in modo asincrono applicando il seguente pattern:
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="styles.css"></noscript>
Questo non è il modo standard per caricare il CSS. Ecco come funziona:
link rel="preload" as="style"
richiede il foglio di stile in modo asincrono. Per scoprire di più supreload
, consulta la guida al precaricamento degli asset critici.- L'attributo
onload
inlink
consente al browser di elaborare il CSS al termine del caricamento del foglio di stile. - L'impostazione su "null" dell'handler
onload
dopo l'utilizzo consente ad alcuni browser di evitare di richiamare nuovamente l'handler quando cambiano l'attributorel
. - Il riferimento al foglio di stile all'interno dell'elemento
noscript
fornisce un riserva per i browser che non eseguono JavaScript.
La pagina risultante ha esattamente lo stesso aspetto della versione precedente, anche quando la maggior parte degli stili viene caricata in modo asincrono. Ecco come appaiono gli stili incorporati e la richiesta asincrona al file CSS nel file HTML:
Monitoraggio
Utilizza DevTools per eseguire un'altra analisi del rendimento sulla pagina ottimizzata.
L'indicatore FCP viene visualizzato prima che la pagina richieda il CSS, il che significa che il browser non deve attendere il caricamento del CSS prima di eseguire il rendering della pagina:
Come ultimo passaggio, esegui Lighthouse sulla pagina ottimizzata.
Nel report puoi notare che la pagina FCP è stata ridotta di 0, 2 secondi (un miglioramento del 20%):
Il suggerimento Elimina le risorse di blocco della visualizzazione non viene più visualizzato in Opportunità, ma nella sezione Controlli superati:
Passaggi successivi e riferimenti
In questa guida, hai imparato a rimandare i file CSS non critici estraendo manualmente il codice inutilizzato nella pagina. Per ambienti di produzione più complessi, la guida all'estrazione di CSS critici copre alcuni degli strumenti più popolari per estrarre CSS critici e include un codelab per vedere come funzionano nella pratica.