Rimanda CSS non critico

Demián Renzulli

I file CSS sono risorse che bloccano la visualizzazione: devono essere caricati ed elaborati prima che il browser esegua il rendering della pagina. Il rendering delle pagine web che contengono fogli di stile di dimensioni inutilmente grandi richiede più tempo.

In questa guida scoprirai come rimandare il codice CSS non critico per ottimizzare il percorso di rendering critico e migliorare la First Contentful Paint (FCP).

Esempio: caricamento CSS non ottimale

L'esempio seguente contiene un accordion con tre paragrafi di testo nascosti, ciascuno dei quali in stile con 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 la pagina in modo che solo gli stili critici vengano caricati in modo sincrono, mentre gli altri stili (inclusi gli stili di paragrafo) vengono caricati in modo non bloccato.

Misurazione

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 che bloccano la visualizzazione, che punta 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 posizionato subito dopo il termine del caricamento del CSS:

Ciò significa che il browser deve attendere il caricamento e l'elaborazione di tutti i CSS prima di colorare un singolo pixel sullo schermo.

Optimize

Per ottimizzare questa pagina, devi sapere quali corsi sono considerati importanti. Per determinarlo, utilizza lo strumento di copertura:

1. In DevTools, apri il menu Comando 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 ha bisogno di questi pulsanti per visualizzare i contenuti visibili, inclusi titolo, sottotitolo e pulsanti accordion.
• Le classi contrassegnate in rosso sono non critiche e interessano solo i contenuti non immediatamente visibili, come i paragrafi nascosti.

Con queste informazioni puoi ottimizzare il tuo CSS in modo che il browser possa iniziare a elaborare gli stili critici subito dopo il caricamento della pagina e rimandare CSS non critici per un secondo momento:

1. Estrai le definizioni delle classi contrassegnate in verde nel report sulla copertura e inserisci queste classi in un blocco <style> in cima alla 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 di caricare i CSS. Ecco come funziona:

• link rel="preload" as="style" richiede il foglio di stile in modo asincrono. Scopri di più su preload nella guida Precarica gli asset critici.
• L'attributo onload in link consente al browser di elaborare il CSS al termine del caricamento del foglio di stile.
• "nullo" il gestore onload dopo l'utilizzo consente ad alcuni browser di evitare di richiamare il gestore quando cambiano l'attributo rel.
• Il riferimento al foglio di stile all'interno dell'elemento noscript fornisce un di riserva per i browser che non eseguono JavaScript.

La pagina risultante è esattamente come la versione precedente, anche quando la maggior parte degli stili viene caricata in modo asincrono. Ecco come gli stili incorporati e la richiesta asincrona al file CSS appaiono nel file HTML:

Monitora

Utilizza DevTools per eseguire un'altra traccia Prestazioni nella 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 visualizzare la pagina:

Come ultimo passaggio, esegui Lighthouse sulla pagina ottimizzata.

Nel rapporto, noterai che la pagina FCP è stata ridotta di 0,2 s (un miglioramento del 20%):

Il suggerimento Elimina le risorse che bloccano la visualizzazione non viene più visualizzato in Opportunità, ma nella sezione Controlli superati:

Passaggi successivi e riferimenti

In questa guida hai imparato come rimandare il CSS non fondamentale estraendo manualmente il codice inutilizzato nella pagina. Per ambienti di produzione più complessi, la guida all'estrazione di CSS critici illustra alcuni degli strumenti più popolari per estrarre CSS critici e include un codelab per vedere come funzionano nella pratica.