Rimanda CSS non critico

Demián Renzulli

Importante:questa guida descrive una tecnica avanzata per migliorare le prestazioni, ma che può anche causare bug se non viene implementata correttamente. La maggior parte dei siti dovrebbe essere in grado di raggiungere tutti i nostri target di rendimento consigliati senza implementare questa tecnica.

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:

Il report Lighthouse suggerisce di semplificare il foglio di stile per velocizzare il caricamento della pagina.

Nota: questo sito demo utilizza un foglio di stile molto piccolo. Negli scenari di produzione, è normale che siano necessari file CSS molto più grandi. Se Lighthouse rileva che una pagina contiene almeno 2048 byte di regole CSS che non sono state utilizzate durante il rendering dei contenuti above the fold, mostra anche un suggerimento Rimuovi CSS inutilizzato.

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:

Nella pagina di demo non ottimizzata, il FCP non può verificarsi fino al completamento 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.

Il report Copertura mostra la quantità di CSS effettivamente utilizzata 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 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.

Nota:

In uno scenario di produzione reale, ti consigliamo di utilizzare funzioni di posticipazione CSS come loadCSS che possono incapsulare questo comportamento e funzionare bene su tutti i browser, nonché supportare un Content Security Policy che potrebbe non consentire JavaScript onload in linea.

Puoi anche posizionare il link CSS nella parte inferiore della pagina, in modo che i contenuti vengano visualizzati prima del rendering senza attendere il foglio di stile in Firefox e Chrome. Tuttavia, in questo caso il browser dà comunque la priorità al foglio di stile, quindi può comunque bloccare i contenuti critici in tutti i browser.

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:

Nella pagina ottimizzata, il FCP può iniziare prima del caricamento del foglio di stile.

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 nuovo FCP ridotto.

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

La pagina ora supera l'audit delle risorse che bloccano la visualizzazione.

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