Rimanda CSS non critico

Demián Renzulli

Importante: questa guida descrive una tecnica avanzata in grado di migliorare le prestazioni, ma che può anche generare 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 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:

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, capita spesso di aver bisogno di 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, noterai che l'indicatore FCP viene posizionato subito dopo il completamento del 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.

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.

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

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

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