Risolvere "Avoid Chaining Critical Requests" in Lighthouse.

Come viene determinata la priorità di download

Le critical request sono le risorse che vengono scaricate con alta priorità durante il caricamento iniziale della pagina. Come viene determinata questa priorità?

La priorità di download è determinata dal browser stesso. Il browser segue un insieme di regole per determinare la priorità di ogni risorsa. Quali elementi ricevono infine la priorità più alta dipende dalla struttura della pagina. Gli elementi che il browser ritiene necessari per il primo rendering della pagina ricevono la priorità più alta.

Il browser inizialmente fa una stima ragionata su quali elementi sono più importanti. In generale, la priorità di download funziona così: HTML ha sempre la priorità più alta, poi i fogli di stile, JavaScript sincrono, i font, le richieste Ajax, le immagini nella parte superiore della pagina, le immagini più in basso nella pagina e infine i JavaScript asincroni.

Puoi verificare tu stesso quali risorse ricevono alta priorità sulla tua pagina. Apri la dev-console con Ctrl + Shift + J. Vai alla scheda network, fai clic destro sui nomi delle colonne e seleziona 'Priority'

Come influisce la Critical Request Chain sul tempo di caricamento della pagina?

Quando carica una pagina, un browser inizia in modalità 'display blocking'. In questa modalità, le risorse più importanti vengono scaricate con alta priorità. Queste sono le risorse critiche.

Un browser non inizierà (completamente) a renderizzare la pagina fino a quando tutte le risorse critiche non saranno state scaricate. Quindi qualsiasi risorsa critica può bloccare il primo rendering di una pagina.

Meno risorse critiche ha una pagina, meno lavoro deve fare il browser per mostrare il primo contenuto sullo schermo, e minore è la competizione per la CPU e le altre risorse.

Come risolvere "Avoid Chaining Critical Requests" in Lighthouse?

Puoi ridurre l'impatto delle critical request in tre modi:

1. Riduci il numero di risorse critiche . Converti le risorse critiche in risorse non critiche rimuovendole o differendole.
2. Riduci il numero di byte critici . Può sembrare ovvio, ma ridurre il numero di byte delle risorse del critical path rende più veloce il download delle risorse critiche. Ad esempio tramite compressione gzip, JavaScript tree shaking, ottimizzazione delle immagini o font subsetting.
3. Migliora l'ordine di download del critical path . Usa i resource hint come il preloading per saltare la fase di discovery delle risorse e assicurarti che le risorse critiche vengano scaricate il più velocemente possibile.

Ci sono molte opzioni. Quale sia la migliore dipende dal tipo di file della risorsa:

1. HTML

L'HTML, che è in realtà la pagina che stai visitando, viene sempre scaricato con la priorità più alta. La pagina stessa fa sempre parte della critical request chain. Ecco perché la pagina stessa è la prima cosa da considerare quando si ottimizza la critical request chain..

Caricamento ritardato del contenuto: Molti siti di grandi dimensioni, come Google stesso, utilizzano questa tecnica per ridurre la critical request chain. Nella pagina dei risultati di ricerca, ad esempio, parti del contenuto che non sono immediatamente necessarie vengono caricate successivamente tramite una richiesta AJAX.

Minify: Più piccolo è sempre più veloce, usa la minificazione HTML per rimuovere commenti, spazi e righe vuote dalla pagina.

Compressione : Infine, è importante comprimere correttamente i fogli di stile con compressione Brotli o GZIP

2. Fogli di stile

I fogli di stile nell'head della pagina sono sempre critici. Senza gli stili, un browser non sa che aspetto avrà la pagina. I fogli di stile sono quindi una parte standard della critical request chain in Lighthouse.

Critical CSS: I fogli di stile possono essere resi non critici con un semplice trucco in cui il foglio di stile viene precaricato tramite resource hint e aggiunto come foglio di stile dopo il completamento del precaricamento.
Aggiungi il seguente codice nella pagina: Il tuo browser ora scaricherà il foglio di stile con una priorità inferiore e tratterà il CSS come non-render blocking. Inizierà il rendering senza attendere il CSS.

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

Osserva come qualcosa di strano accade ora nella pagina. Prima la pagina viene mostrata e solo dopo il caricamento del CSS viene applicato lo stile. Tutto il contenuto ora lampeggerà da contenuto senza stile a contenuto con stile. Possiamo risolvere questo problema con il critical CSS.
Il critical CSS è una raccolta di tutte le regole CSS necessarie per la parte visibile della pagina. Puoi generare il critical CSS tu stesso tramite NodeJS o tramite diversi strumenti online. Inserisci questo critical CSS nell'head della pagina e carica il resto del CSS con una priorità inferiore.

Media query : Carica solo gli stili per il tuo dispositivo. La tua pagina viene spesso visitata su mobile. Quindi non devi effettivamente scaricare gli stili per Desktop e Print. Questo fa risparmiare tempo e quindi accorcia la critical request chain in Lighthouse.

Usa l'attributo media. L'attributo media assicura che un foglio di stile venga scaricato solo se il media non corrisponde al media che stai attualmente utilizzando.

<link href="all.css" rel="stylesheet" media="all">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" media="screen and (min-device-width: 1024px)">

Minify: Rimuovi il CSS inutilizzato. Molti siti utilizzano librerie CSS come bootstrap. Queste librerie sono spesso sovracomplete e non tutte le dichiarazioni di stile vengono utilizzate.
È facile modificare queste librerie tramite un preprocessore CSS (come SASS ). Basta rimuovere i gruppi di stili inutilizzati modificando ciò che deve essere incluso per renderli molto più piccoli. Questi preprocessori offrono anche la possibilità di minificare il CSS rimuovendo tutti gli spazi e le nuove righe.\">

Compressione : Infine, è importante comprimere correttamente i fogli di stile con compressione Brotli o GZIP

3. JavaScript

I file JavaScript nell'head della pagina vengono scaricati con alta priorità per impostazione predefinita e bloccano il rendering della pagina mentre vengono scaricati ed eseguiti. JavaScript è quindi una parte standard della critical request chain.

Defer e Async : Regola la priorità dei file JavaScript caricandoli in modo asincrono tramite l'attributo async o defer. I file script asincroni vengono scaricati in parallelo con una priorità inferiore. I JavaScript differiti vengono anch'essi caricati in parallelo e l'esecuzione del file JavaScript viene ritardata in modo che l'esecuzione di JavaScript non blocchi il caricamento iniziale della pagina.

// blocks loading and execution
<script src="normalscript.js">
// async does not block during load, but it does block during execution
<script  src="asyncscript.js">
// defer does not block both during load nor execution
<script  src="deferscript.js">

Code splitting e preloading: Se la pagina non consente il caricamento asincrono di JavaScript, potrebbe essere una buona idea dividere JavaScript in più file. Inserisci la parte di JavaScript critica durante il caricamento della pagina in un file piccolo e precarica questo file. Inserisci il JavaScript non critico in un altro file e lascialo caricare ed eseguire in modalità deferred o async.

Minify : Riduci il numero di byte in due modi tramite uno strumento JavaScript Uglyfier. Questo è uno strumento intelligente che analizza JavaScript e lo rende il più piccolo possibile. \">

Compressione : Inoltre, riduci il numero di byte comprimendo JavaScript tramite Gzip o Brotli.

4. WebFont

I web font sono solitamente gli ultimi file caricati nella critical request chain. Questo perché i web font dipendono dalla discovery. Vengono caricati solo quando un browser scopre che sono necessari. Per questo, un browser deve prima analizzare l'HTML e cercare nel foglio di stile quale font viene utilizzato.

Preloading : Quando sei sicuro di aver bisogno di un font, è solitamente più veloce fare il preload di questo font. Il font viene così scaricato il prima possibile, minimizzando l'influenza sulla critical request chain. Precarica un font aggiungendo questo codice il prima possibile nell'head della pagina

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

Strategia per i font : Inoltre, ci sono molti altri modi per rendere più veloce il caricamento dei font.

• Usa sempre web font locali e mai font ospitati remotamente come Google fonts.
• Ridimensiona il font con il font subsetting
• Carica i font non critici tramite l'interfaccia JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/API/FontFace">fontface</a>
• Usa display = swap per evitare che il font blocchi il rendering iniziale
• Lascia che i browser generino le proprie varianti di font tramite la font synthesis

Immagini

Le immagini che appaiono nel viewport visibile durante il caricamento della pagina possono anche ricevere alta priorità e interferire con il critical path. Quando sei sicuro che un'immagine apparirà sempre nella parte visibile del sito, può essere utile precaricare anche questa immagine.

<link rel="preload" as="image" href="important-image.webp">

Per tutte le immagini che non sono immediatamente visibili, è meglio usare il lazy loading. Usa loading = "lazy" per ritardare il caricamento dell'immagine fino a poco prima che diventi visibile.

<img loading="lazy" src="lazy-image.webp" width="20" height="20" alt="...">

5. Richieste AJAX

Alle richieste Ajax viene sempre assegnata un'alta priorità. Pertanto, è preferibile posticipare le richieste Ajax fino a quando la pagina non ha terminato il rendering. Attendi che la pagina abbia inviato l'evento "load".

Se non è possibile posticipare la richiesta AJAX, puoi assicurarti che la richiesta Ajax sia disponibile per il browser precaricandola.

window.addEventListener('load', (event)=>{
  console.log('this is a good time for an AJAX request');
});

6. iframe

Gli iframe vengono solitamente scaricati con alta priorità. Poiché un iframe è in realtà una pagina all'interno di una pagina, un iframe può causare un ritardo molto significativo nei tempi di caricamento della pagina. Le risorse richieste dall'iframe possono anche essere scaricate con alta priorità e formare la propria critical request chain. L'uso degli iframe può quindi influenzare significativamente il tuo punteggio Lighthouse.

Puoi ritardare il caricamento di un iframe tramite l'attributo loading = "lazy". Questo fa spesso la differenza quando l'iframe non è immediatamente visibile durante il caricamento. Spesso è più veloce iniettare quell'iframe nella pagina tramite JavaScript. Questo ti dà più controllo sui tempi per assicurarti che non finisca nella critical request chain.