Ottimizzazione del caricamento delle risorse con l'API Fetch Priority

L'API Fetch Priority indica la priorità relativa delle risorse al browser. Può consentire un caricamento ottimale e migliorare i Segnali web essenziali.

Addy Osmani
Addy Osmani
Leena Sohoni
Leena Sohoni
Patrick Meenan
Patrick Meenan

Supporto dei browser

  • 102
  • 102
  • x
  • 17,2

Fonte

Quando un browser analizza una pagina web e inizia a scoprire e scaricare risorse come immagini, script o CSS, assegna loro un priority di recupero per tentare di scaricare le risorse in un ordine ottimale. Queste priorità possono dipendere dal tipo di risorsa e dalla posizione nel documento. Ad esempio, le immagini nell'area visibile potrebbero avere una priorità High, mentre la priorità per i CSS che vengono caricati inizialmente e che bloccano la visualizzazione tramite <link> in <head> potrebbe essere Very High. I browser sono molto bravi ad assegnare priorità che funzionano bene, ma che potrebbero non essere ottimali in tutti i casi.

In questo articolo, illustreremo l'API Fetch Priority e l'attributo HTML fetchpriority, che consentono di suggerire la priorità relativa di una risorsa (high o low). La priorità di recupero può aiutare a ottimizzare i Segnali web essenziali.

Riepilogo

Ecco alcune aree chiave in cui la priorità di recupero può esserti d'aiuto:

  • Aumenta la priorità dell'immagine LCP specificando fetchpriority="high" sull'elemento immagine, in modo che l'LCP avvenga prima.
  • Aumenta la priorità degli script async utilizzando una semantica migliore rispetto al compromesso correntemente usato (inserendo un <link rel="preload"> per lo script async).
  • Riduci la priorità degli script ritardati per consentire una migliore sequenza con le immagini.
Una visualizzazione pellicola che mette a confronto due test della home page di Google Voli. Nella parte inferiore, la priorità di recupero viene utilizzata per aumentare la priorità dell&#39;immagine hero, con una conseguente diminuzione di 0,7 secondi della metrica LCP.
La priorità di recupero migliora la metrica Largest Contentful Paint da 2,6 s a 1,9 s in un test di Google Voli

In passato, gli sviluppatori hanno avuto una certa, ma limitata, influenza sulla priorità delle risorse utilizzando preload e preconnect. La priorità di recupero completa questi suggerimenti relativi alle risorse, ma è essenziale capire dove si collocano tutti. Il precaricamento ti consente di indicare al browser le risorse critiche che vuoi caricare in anticipo prima che vengano rilevate naturalmente. Questo è particolarmente utile per le risorse che non sono facilmente individuabili, ad esempio i caratteri inclusi nei fogli di stile, le immagini di sfondo o le risorse caricate da uno script. La preconnessione consente di riscaldare le connessioni ai server multiorigine e può contribuire a migliorare metriche come Time-to-first-byte ed è utile quando conosci un'origine, ma non necessariamente l'URL esatto di una risorsa che sarà necessaria.

Priorità di recupero è un indicatore basato su markup (disponibile tramite l'attributo fetchpriority) che gli sviluppatori possono utilizzare per indicare la priorità relativa di una determinata risorsa. Puoi utilizzare questi suggerimenti anche tramite JavaScript e l'API Fetch con la proprietà priority per influire sulla priorità dei recuperi delle risorse effettuati per i dati. La priorità di recupero può anche integrare il precaricamento. Scatta un'immagine Largest Contentful Paint, che, una volta precaricata, avrà comunque una priorità bassa. Se viene respinto da altre risorse iniziali a bassa priorità, l'uso della priorità di recupero può aiutarti a caricare l'immagine entro quanto tempo viene caricata.

La priorità di recupero è disponibile in Chrome 101 o versioni successive.

Priorità delle risorse

La sequenza di download della risorsa dipende dalla priorità assegnata al browser per ogni risorsa nella pagina. La logica di calcolo della priorità dipende da diversi fattori. Ad esempio:

  • A CSS, caratteri, script, immagini e risorse di terze parti vengono assegnate priorità diverse.
  • La località o l'ordine in cui fai riferimento alle risorse nel documento influiscono anche sulla priorità delle risorse.
  • Il suggerimento relativo alle risorse preload consente al browser di scoprire una risorsa più velocemente e quindi di caricarla prima che il documento la carichi e influisca sulla priorità.
  • Modifiche al calcolo della priorità per gli script async o defer.

La tabella seguente prende in considerazione questi fattori per mostrare in che modo la maggior parte delle risorse ha attualmente priorità e viene sequenziata in Chrome.

  Carica in fase di blocco del layout Carica una alla volta nella fase di blocco del layout
Priorità
lampeggiante
VeryHigh Alto Medio Basso VeryLow
Priorità
DevTools
Massima Alto Medio Basso Più bassa
Risorsa principale
CSS (in anticipo**) CSS (in ritardo**) CSS (contenuti multimediali non corrispondenti***)
Script (in anticipo** o meno dallo scanner di precaricamento) Script (ritardato**) Script (asinc)
Carattere Carattere (rel=preload)
Importa
Immagine (nell'area visibile) Immagine (prime 5 immagini > 10.000 px2) Immagine
Contenuti multimediali (video/audio)
Precaricamento
XSL
XHR (sincronizzazione) XHR/recupero* (asinc)

Il browser scarica le risorse con la stessa priorità calcolata nell'ordine in cui vengono rilevate. Puoi controllare la priorità assegnata a risorse diverse durante il caricamento di una pagina nella scheda Rete di Chrome Dev Tools. Assicurati di includere la colonna Priorità facendo clic con il tasto destro del mouse sulle intestazioni della tabella.

Uno screenshot degli asset elencati nella scheda Rete dei DevTools di Chrome. Le colonne vengono lette, da sinistra a destra: name, status, type, initiator, size, time e priorit.
Priorità per la risorsa type = "font" nella pagina dei dettagli delle notizie della BBC
Uno screenshot degli asset elencati nella scheda Rete dei DevTools di Chrome. Le colonne vengono lette, da sinistra a destra: name, status, type, initiator, size, time e priorit.
Priorità per il tipo di risorsa = "script" nella pagina dei dettagli delle notizie della BBC

Se le priorità cambiano, puoi utilizzare l'impostazione Righe di richiesta grandi per visualizzare sia la priorità iniziale che quella finale. Lo stesso viene mostrato nella descrizione comando, indipendentemente dall'impostazione Righe di richiesta richiesta.

Uno screenshot degli asset elencati nella scheda Rete dei DevTools di Chrome. L&#39;impostazione &quot;Righe di richiesta grandi&quot; è selezionata e la colonna Priorità mostra la prima immagine con priorità Alta e di seguito una priorità iniziale diversa per il mezzo. Lo stesso viene mostrato nella descrizione comando.
Visualizzazione della priorità iniziale e finale in DevTools

Quando è necessaria la priorità di recupero?

La conoscenza della logica di prioritizzazione del browser ti permette di disporre di alcune manopole esistenti per modificare l'ordine dei download. Puoi

  1. Inserisci i tag di risorse, ad esempio <script> e <link>, a seconda dell'ordine in cui vuoi scaricarli. Le risorse con la stessa priorità vengono generalmente caricate nell'ordine in cui vengono rilevate.
  2. Utilizza il suggerimento sulle risorse preload per scaricare prima le risorse necessarie, in particolare per quelle che non vengono facilmente rilevate in anticipo dal browser.
  3. Utilizza async o defer per scaricare gli script senza bloccare le altre risorse.
  4. Esegui il caricamento lento dei contenuti below the fold in modo che il browser possa utilizzare la larghezza di banda disponibile per le risorse above the fold più critiche.

Queste tecniche aiutano a controllare il calcolo della priorità del browser, migliorando quindi le prestazioni e i Segnali web essenziali. Ad esempio, quando un'immagine di sfondo di importanza critica viene precaricata, può essere rilevata molto prima, migliorando la metrica Largest Contentful Paint (LCP).

A volte questi handle potrebbero non essere sufficienti per dare priorità alle risorse in modo ottimale per la tua applicazione. Ecco alcuni scenari in cui la priorità di recupero potrebbe essere utile:

  1. Hai diverse immagini above the fold, ma non è necessario che tutte abbiano la stessa priorità. Ad esempio, in un carosello di immagini, solo la prima immagine visibile richiede una priorità più elevata rispetto alle altre.
  2. In genere le immagini hero all'interno dell'area visibile hanno una priorità "Bassa" (tieni presente che una modifica in Chrome 117 imposta le prime cinque immagini di grandi dimensioni su "Media", ma questa potrebbe includere o meno la tua immagine hero). Una volta completato il layout, Chrome rileva che si trovano nell'area visibile e ne aumenta la priorità. Questo in genere aggiunge un ritardo significativo al caricamento dell'immagine. Se specifichi la priorità di recupero nel markup, l'immagine inizia con una priorità "Alta" e inizia a caricarsi molto prima.

    Tieni presente che il precaricamento è comunque necessario per il rilevamento anticipato delle immagini LCP incluse come sfondi CSS e può essere combinato con la priorità di recupero includendo fetchpriority='high' nel precaricamento, altrimenti inizierà comunque con una priorità "Bassa" o "Media" per le immagini.
  3. Se dichiari gli script come async o defer, indichi al browser di caricarli in modo asincrono. Tuttavia, come illustrato nella tabella precedente, a questi script è assegnata anche una priorità "Bassa". È consigliabile aumentare la priorità, garantendo al contempo il download asincrono, in particolare per gli script fondamentali per l'esperienza utente.
  4. Puoi utilizzare l'API JavaScript fetch() per recuperare risorse o dati in modo asincrono. Al recupero viene assegnata una priorità "Alta" dal browser. Potrebbero verificarsi situazioni in cui non vuoi che tutti i recuperi vengano eseguiti con priorità "Alta" e preferisci utilizzare una priorità di recupero diversa. Questo può essere utile durante l'esecuzione di chiamate API in background e la loro combinazione con chiamate API che rispondono all'input dell'utente, come nel caso del completamento automatico. Le chiamate API in background possono essere contrassegnate con priorità "Bassa" e le chiamate API interattive contrassegnate con priorità "Alta".
  5. Il browser assegna al CSS e ai caratteri una priorità "Alta", ma tutte queste risorse potrebbero non essere ugualmente importanti o richieste per LCP. Puoi utilizzare la priorità di recupero per ridurre la priorità di alcune di queste risorse.

Attributo fetchpriority

Puoi specificare una priorità di recupero utilizzando l'attributo HTML fetchpriority. Puoi utilizzare l'attributo con i tag link, img e script. L'attributo consente di specificare la priorità per i tipi di risorse come CSS, caratteri, script e immagini quando vengono scaricati utilizzando i tag supportati. L'attributo fetchpriority accetta uno dei tre seguenti valori:

  • high: consideri la risorsa una priorità elevata e vuoi che il browser la assegni, purché le euristiche del browser non impediscano che ciò accada.
  • low: consideri la risorsa una priorità bassa e vuoi che il browser la diminuisca se l'euristica lo consente.
  • auto: questo è il valore predefinito per cui non hai una preferenza e lasci che sia il browser a decidere la priorità appropriata.

Ecco alcuni esempi di utilizzo dell'attributo fetchpriority nel markup e della proprietà priority equivalente allo script.

<!-- We don't want a high priority for this above-the-fold image -->
<img src="/images/in_viewport_but_not_important.svg" fetchpriority="low" alt="I'm an unimportant image!">

<!-- We want to initiate an early fetch for a resource, but also deprioritize it -->
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<script>
  fetch('https://example.com/', {priority: 'low'})
  .then(data => {
    // Trigger a low priority fetch
  });
</script>

Priorità del browser e fetchpriority

Puoi applicare l'attributo fetchpriority a risorse diverse, come mostrato nella figura seguente, per aumentare o ridurre potenzialmente la priorità calcolata. fetchpriority="auto" (◉) in ogni riga indica la priorità predefinita per quel tipo di risorsa (disponibile anche come documento Google).

  Carica in fase di blocco del layout Carica una alla volta nella fase di blocco del layout
Priorità
lampeggiante
VeryHigh Alto Medio Basso VeryLow
Priorità
DevTools
Massima Alto Medio Basso Più bassa
Risorsa principale
CSS (in anticipo**) ⬆◉
CSS (in ritardo**)
CSS (contenuti multimediali non corrispondenti***) ⬆*** ◉⬇
Script (in anticipo** o meno dallo scanner di precaricamento) ⬆◉
Script (ritardato**)
Script (asinc/differente) ◉⬇
Carattere
Carattere (rel=preload) ⬆◉
Importa
Immagine (nell'area visibile, dopo il layout) ⬆◉
Immagine (prime 5 immagini > 10.000 px2)
Immagine ◉⬇
Contenuti multimediali (video/audio)
XHR (sincronizzazione) - deprecato
XHR/recupero* (asinc) ⬆◉
Precaricamento
XSL

Tieni presente che fetchpriority imposta la priorità relativa, ovvero aumenta o diminuisce la priorità predefinita di un importo appropriato, invece di impostare esplicitamente la priorità su "Alta" o "Bassa" e sarà il browser a decidere la priorità relativa. Spesso il valore è "Alto" o "Basso", ma non sempre. Ad esempio, il CSS critico con fetchpriority="high" manterrà la priorità "Molto alta"/"Massima" e l'utilizzo di fetchpriority="low" su questi elementi manterrà comunque la priorità "Alta": in nessuno dei due casi la priorità è impostata esplicitamente su "Alta" o "Bassa".

casi d'uso

Puoi utilizzare l'attributo fetchpriority per risolvere scenari in cui è opportuno fornire al browser un ulteriore suggerimento in merito alla priorità con cui recuperare una risorsa.

Aumenta la priorità dell'immagine LCP

Puoi specificare fetchpriority="high" per aumentare la priorità dell'LCP o di altre immagini critiche.

<img src="lcp-image.jpg" fetchpriority="high">

Il confronto seguente mostra la pagina di Google Voli con un'immagine di sfondo LCP caricata con e senza priorità di recupero. Con la priorità impostata su High, l'LCP è migliorato da 2,6 a 1,9 secondi.

Un esperimento condotto utilizzando i worker di Cloudflare per riscrivere la pagina di Google Voli in modo da utilizzare la priorità di recupero.

Riduci la priorità delle immagini above the fold

Puoi utilizzare fetchpriority="low" per ridurre la priorità delle immagini above the fold che potrebbero non essere inizialmente importanti, ad esempio in un carosello di immagini.

<ul class="carousel">
  <img src="img/carousel-1.jpg" fetchpriority="high">
  <img src="img/carousel-2.jpg" fetchpriority="low">
  <img src="img/carousel-3.jpg" fetchpriority="low">
  <img src="img/carousel-4.jpg" fetchpriority="low">
</ul>

In un esperimento precedente con l'app Oodle, abbiamo utilizzato questa funzione per ridurre la priorità delle immagini che non vengono visualizzate al caricamento. Ciò ha contribuito a ridurre il tempo di caricamento di 2 secondi.

Un confronto affiancato della priorità di recupero quando viene utilizzato nel carosello di immagini dell&#39;app Oodle. A sinistra, il browser imposta le priorità predefinite per le immagini carosello, ma le scarica e dipinge circa due secondi più lentamente dell&#39;esempio a destra, in modo da impostare una priorità più alta solo per la prima immagine carosello.

Riduci la priorità delle risorse precaricate

Per impedire alle risorse precaricate di competere con altre risorse critiche, puoi fornire un suggerimento per ridurne la priorità. Puoi utilizzare questa tecnica con immagini, script e CSS.

<!-- Lower priority only for non-critical preloaded scripts -->
<link rel="preload" as="script" href="critical-script.js">
<link rel="preload" href="/js/script.js" as="script" fetchpriority="low">

<!-- Preload CSS without blocking other resources -->
<link rel="preload" as="style" href="theme.css" fetchpriority="low" onload="this.rel='stylesheet'">

Riassegna la priorità agli script

Gli script necessari per rendere interattive alcune parti della pagina sono essenziali, ma non devono bloccare altre risorse. Puoi contrassegnarli come asincroni con priorità elevata.

<script src="async_but_important.js" async fetchpriority="high"></script>

Gli script non possono essere contrassegnati come asincroni se si basano su stati DOM specifici. Tuttavia, se si trovano più in basso nella pagina, potrebbero essere scaricati con una priorità più bassa, come mostrato.

<script src="blocking_but_unimportant.js" fetchpriority="low"></script>

Riduci la priorità per i recuperi di dati non critici

Il browser esegue fetch con priorità elevata. Se disponi di più recuperi che possono essere attivati contemporaneamente, puoi utilizzare l'alta priorità predefinita per i recuperi di dati più critici e abbassarla per i dati meno importanti.

// Important validation data (high by default)
let authenticate = await fetch('/user');

// Less important content data (suggested low)
let suggestedContent = await fetch('/content/suggested', {priority: 'low'});

Note sull'implementazione della priorità di recupero

La priorità di recupero può migliorare le prestazioni in casi d'uso specifici, come spiegato in precedenza. Ci sono alcuni aspetti da tenere presenti:

  • L'attributo fetchpriority è un suggerimento e non un'istruzione. Il browser cercherà di rispettare la preferenza dello sviluppatore. È anche possibile che il browser applichi le proprie preferenze per la priorità delle risorse, come ritenuto necessario in caso di conflitti.
  • La priorità di recupero non deve essere confusa con un precaricamento. Sono entrambi distinti perché:

    • Il precaricamento è un recupero obbligatorio e non un suggerimento.
    • Il precaricamento consente al browser di rilevare in anticipo la risorsa, ma continuerà a recuperarla con la priorità predefinita. Al contrario, la priorità di recupero non favorisce la rilevabilità, ma consente di aumentare o diminuire la priorità di recupero.
    • In questo modo è più facile osservare e misurare gli effetti di un precaricamento.

    La priorità di recupero può integrare i precaricamenti aumentando la granularità della priorità. Se hai già specificato un precaricamento come uno dei primi elementi in <head> per un'immagine LCP, una priorità di recupero high potrebbe non generare guadagni significativi. Tuttavia, se il precaricamento è avvenuto dopo altre risorse, una priorità di recupero high può migliorare la metrica LCP. Se un'immagine critica è un'immagine di sfondo del CSS, dovresti precaricarla con fetchpriority = "high".

  • I miglioramenti evidenti dovuti alla priorità saranno più rilevanti in ambienti in cui più risorse si contendono la larghezza di banda di rete disponibile. Questo è comune per le connessioni HTTP/1.x, in cui non è possibile eseguire download paralleli, o in connessioni HTTP/2 con larghezza di banda limitata. L'assegnazione delle priorità può risolvere i colli di bottiglia in queste condizioni.

  • Le CDN non implementano in modo uniforme l'assegnazione delle priorità HTTP/2. Anche se il browser comunica la priorità suggerita utilizzando la priorità di recupero, la rete CDN potrebbe non ridefinire la priorità delle risorse nell'ordine richiesto. Questo rende difficile il test della priorità di recupero. Le priorità vengono applicate sia internamente al browser che con i protocolli che supportano la prioritizzazione (HTTP/2 e HTTP/3). Vale comunque la pena utilizzarlo anche solo per l'assegnazione della priorità del browser interno, indipendentemente dal supporto di CDN o dell'origine, poiché spesso cambia quando vengono richieste risorse dal browser: ad esempio, risorse a bassa priorità, come le immagini, vengono spesso trattenute dalla richiesta mentre il browser elabora gli elementi <head> critici.

  • Potrebbe non essere possibile introdurre la priorità di recupero come best practice nella progettazione iniziale. È un'ottimizzazione che puoi applicare in una fase successiva del ciclo di sviluppo. Puoi controllare le priorità assegnate alle diverse risorse della pagina e, se non corrispondono alle tue aspettative, puoi introdurre la priorità di recupero per un'ulteriore ottimizzazione.

Utilizzare la funzionalità Precarica dopo Chrome 95

La funzionalità Priorità di recupero era disponibile per la prova in Chrome dalla versione 73 alla versione 76, ma non è stata rilasciata a causa di problemi di priorità con i precaricamenti risolti in Chrome 95. Prima di Chrome 95, le richieste emesse tramite <link rel=preload> vengono sempre avviate prima delle altre richieste rilevate dallo scanner di precaricamento, anche se le altre richieste hanno una priorità maggiore.

Con la correzione in Chrome 95 e il miglioramento della priorità di recupero, ci auguriamo che gli sviluppatori inizino a utilizzare il precaricamento per lo scopo previsto, ovvero precaricare le risorse non rilevate dal parser (caratteri, importazioni, immagini LCP di sfondo). Il posizionamento del suggerimento preload influirà sul precaricato della risorsa. Alcuni punti chiave relativi all'utilizzo del precaricamento sono:

  • L'inclusione del precaricamento nelle intestazioni HTTP farà sì che vada avanti rispetto a tutto il resto.
  • In genere, i precaricamenti vengono caricati nell'ordine in cui vengono restituiti dal parser per tutti gli elementi al di sopra della priorità "Media", quindi fai attenzione se includi i precaricamenti all'inizio del codice HTML.
  • Il precaricamento dei caratteri probabilmente funziona meglio verso la fine della testa o l'inizio del corpo.
  • I precaricamenti delle importazioni (import() o modulepreload dinamici) devono essere eseguiti dopo il tag script che richiede l'importazione, in modo che lo script effettivo venga caricato/analizzato prima. Essenzialmente, se il tag script carica uno script che attiva il caricamento delle dipendenze, assicurati che <link rel=preload> per le dipendenze si trovi dopo il tag dello script principale, altrimenti le dipendenze potrebbero finire per essere caricate prima dello script principale. Nell'ordine corretto, lo script principale può essere analizzato/valutato durante il caricamento delle dipendenze.
  • I precaricamenti delle immagini hanno una priorità "Bassa" o "Media" (senza priorità di recupero) e devono essere ordinati in base agli script asincroni e ad altri tag con priorità bassa o più bassa.

Cronologia

La priorità di recupero è stata sperimentata per la prima volta in Chrome come prova dell'origine nel 2018 e poi di nuovo nel 2021 utilizzando l'attributo importance. All'epoca era nota come Suggerimenti prioritari. L'interfaccia è stata modificata in fetchpriority per l'HTML e in priority per l'API Fetch di JavaScript nell'ambito della procedura degli standard web. Per ridurre la confusione, facciamo riferimento a questa API come priorità di recupero.

Conclusione

È probabile che gli sviluppatori siano interessati alla priorità di recupero con le correzioni del comportamento di precaricamento e la recente attenzione a Core Web Vitals e LCP. Ora hanno a disposizione ulteriori manopole per raggiungere la sequenza di caricamento desiderata.