Rimanda CSS non critico

Demián Renzulli
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 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:

Report Lighthouse per le pagine non ottimizzate, che mostra il valore FCP di "1" ed "Elimina le risorse di blocco" in "Opportunità"
Il report Lighthouse suggerisce di semplificare il foglio di stile per velocizzare il caricamento della pagina.

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, noterai che l'indicatore FCP viene posizionato subito dopo il completamento del caricamento del CSS:

Analisi del rendimento di DevTools per la pagina non ottimizzata, che mostra il valore FCP a partire dal caricamento del CSS.
Nella pagina demo non ottimizzata, il valore FCP non può verificarsi fino al termine 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:

  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.
Copertura del file CSS, che mostra il 55,9% di byte inutilizzati.
Il report sulla copertura mostra in che misura il tuo CSS viene effettivamente utilizzato nel caricamento iniziale della pagina.

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:

  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. Per scoprire di più su preload, consulta la 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 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:

Traccia del rendimento di DevTools per la pagina ottimizzata, che mostra l&#39;inizio del FCP prima del caricamento del CSS.
Nella pagina ottimizzata, FCP può iniziare prima del caricamento del foglio di stile.

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%):

Report Lighthouse che mostra un valore FCP pari a &quot;0, 8&quot;.
Il nuovo FCP ridotto.

Il suggerimento Elimina le risorse di blocco della visualizzazione non viene più visualizzato in Opportunità, ma nella sezione Controlli superati:

Una rappresentazione
 del report Lighthouse, che mostra &quot;Elimina le risorse di blocco&quot; nella sezione &quot;Controlli superati&quot;.
La pagina ora supera l'audit delle risorse che bloccano la visualizzazione.

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.