Rimanda CSS non critico

Demián Renzulli

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 CSS non ottimale

L'esempio seguente contiene una sezione a scomparsa con tre paragrafi di testo nascosti, ognuno con uno stile diverso:

Questa pagina richiede un file CSS con otto classi, ma non tutte sono necessarie per visualizzare i contenuti "visibili".

Lo scopo 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) vengano caricati in modo non bloccante.

Misura

Esegui Lighthouse nella pagina e vai alla sezione Rendimento.

Il report mostra la metrica First Contentful Paint con un valore di "1s" e l'opportunità Elimina le risorse che bloccano il rendering, che rimanda al file style.css:

Per visualizzare in che modo questo CSS blocca il rendering:

1. Apri la pagina in Chrome.
2. Premi Control+Shift+J (o Command+Option+J su Mac) per aprire DevTools.
3. Fai clic sulla scheda Rendimento.
4. Nel riquadro Rendimento, fai clic su Ricarica.

Nella traccia risultante, vedrai che l'indicatore FCP viene inserito immediatamente al termine del caricamento del CSS:

Ciò significa che il browser deve attendere che tutto il CSS venga caricato ed elaborato prima di disegnare un singolo pixel sullo schermo.

Ottimizza

Per ottimizzare questa pagina, devi sapere quali classi sono considerate critiche. Per determinare questo aspetto, utilizza lo strumento Copertura:

1. In DevTools, apri il menu dei comandi premendo Control+Shift+P o Command+Shift+P (Mac).
2. Digita "Copertura" e seleziona Mostra copertura.
3. 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 CSS in modo che il browser possa iniziare a elaborare gli stili critici subito dopo il caricamento della pagina e posticipare il CSS non critico per un momento successivo:

1. 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>
   

2. 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. Puoi approfondire preload nella guida al precaricamento degli asset critici.
• L'attributo onload in link 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'attributo rel.
• Il riferimento al foglio di stile all'interno dell'elemento noscript fornisce un valore alternativo per i browser che non eseguono JavaScript.

La pagina risultante ha esattamente lo stesso aspetto della versione precedente, anche se 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 traccia 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 vedrai 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 posticipare il CSS non critico estraendo manualmente il codice inutilizzato nella pagina. Per ambienti di produzione più complessi, la guida all'estrazione del CSS critico illustra alcuni degli strumenti più utilizzati per estrarre il CSS critico e include un codelab per vedere come funzionano