Rimanda CSS non critico

Demián Renzulli
Demián Renzulli
X GitHub Glitch

I file CSS sono risorse che bloccano la visualizzazione: devono essere caricati ed elaborati prima che il browser visualizzi la pagina. Pagine web contenenti fogli di stile inutilmente grandi richiedono più tempo per il rendering.

In questa guida, scoprirai come rimandare i file CSS non critici per ottimizzare Percorso di rendering critico e migliora First Contentful Paint (FCP).

Esempio: caricamento di CSS non ottimale

L'esempio seguente contiene un accordion con tre paragrafi nascosti di testo, ognuno dei quali ha uno stile con una classe diversa:

Questa pagina richiede un file CSS con otto classi, ma non tutte necessario per rendere "visibile" contenuti.

L'obiettivo di questa guida è ottimizzare questa pagina in modo che solo gli stili critici vengono caricati in modo sincrono, mentre le altre (inclusi gli stili di paragrafo) vengono caricati in modo senza blocchi.

Misura

Esegui Lighthouse sulla pagina e vai al sezione Rendimento.

Il report mostra la metrica First Contentful Paint con valore "1" e l'opportunità Eliminare le risorse di blocco della visualizzazione, puntando alle File style.css:

Faro report per la pagina non ottimizzata, con un valore FCP pari a "1" ed "Elimina blocco" risorse in "Opportunità"
Il report Lighthouse suggerisce di semplificare le per velocizzare il caricamento della pagina.
di Gemini Advanced.

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 Prestazioni, fai clic su Ricarica.

Nella traccia risultante, noterai che l'indicatore FCP è posizionato immediatamente al termine 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 della demo non ottimizzata, il valore FCP non può verificarsi fino al termine del caricamento del CSS.

Ciò significa che il browser deve attendere che tutti i CSS vengano caricati ed elaborati 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 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.
di Gemini Advanced.
Copertura per il file CSS, che mostra il 55,9% di byte inutilizzati.
Il report Copertura mostra in che misura i tuoi 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 le ha necessarie per eseguire il rendering contenuti visibili, inclusi il titolo, i sottotitoli e i pulsanti di accordion.
  • I corsi contrassegnati in rosso sono solo non critici interessa i contenuti non immediatamente visibili, come i paragrafi nascosti.

Con queste informazioni, ottimizza il CSS in modo che il browser possa iniziare l'elaborazione gli stili critici subito dopo il caricamento della pagina e rimandare gli stili CSS non critici per un secondo momento:

  1. Estrai le definizioni delle classi contrassegnate in verde nel report Copertura e inserisci queste classi 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 quanto segue motivo:

    <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

Non si tratta del metodo standard per caricare CSS. Ecco come funziona:

  • link rel="preload" as="style" richiede il foglio di stile in modo asincrono. Tu Puoi scoprire di più su preload nella guida al precaricamento degli asset critici.
  • L'attributo onload in link consente al browser di elaborare il CSS quando termina il caricamento del foglio di stile.
  • "null" dopo l'utilizzo, il gestore onload consente ad alcuni browser di evitare richiamo del gestore quando cambia 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.
di Gemini Advanced.

La pagina risultante ha esattamente lo stesso aspetto 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 nell'HTML file:

Monitoraggio

Utilizza DevTools per eseguire un'altra analisi del rendimento sul pagina ottimizzata.

L'indicatore FCP viene visualizzato prima che la pagina richieda il CSS. Ciò significa che l'indicatore browser non deve attendere il caricamento del codice CSS prima di eseguire il rendering della pagina:

DevTools traccia del rendimento per la pagina ottimizzata, che mostra il valore FCP che inizia prima di CSS viene caricato automaticamente.
Nella pagina ottimizzata, il valore FCP può iniziare prima del viene caricato il foglio di stile.

Come ultimo passaggio, esegui Lighthouse sulla pagina ottimizzata.

Nel report puoi notare che la pagina FCP è stata ridotta di 0, 2 s (ossia il 20% miglioramento!):

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à, che si trova invece nella sezione Controlli superati:

Faro rapporto &quot;Elimina le risorse di blocco&quot; nella sezione &quot;Controlli superati&quot; .
La pagina ora trasmette le risorse di blocco per il controllo.

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, estrai la guida CSS fondamentale illustra alcuni dei gli strumenti più popolari per estrarre CSS critici e include un codelab per vedere come lavorare in pratica