Ottimizza il caricamento delle risorse con l'API Fetch Priority

L'API Fetch Priority indica la priorità relativa delle risorse per il browser. Può consentire un caricamento ottimale e migliorare i Core Web Vitals.

Addy Osmani
Addy Osmani
X GitHub
Leena Sohoni
Leena Sohoni
X
Patrick Meenan
Patrick Meenan
X
Barry Pollard

Supporto dei browser

  • Chrome: 102.
  • Edge: 102.
  • Firefox: 132.
  • Safari: 17.2.

Origine

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 scaricarle nell'ordine ottimale. La priorità di una risorsa di solito dipende dalla sua natura e dalla sua posizione nel documento. Ad esempio, le immagini nell'area visibile potrebbero avere una priorità High, mentre la priorità per i CSS caricati in anticipo e che bloccano la visualizzazione utilizzando <link> in <head> potrebbe essere Very High. I browser sono abbastanza bravi nell'assegnazione di priorità che funzionano bene, ma che potrebbero non essere sempre ottimali in tutti i casi.

Questa pagina illustra l'API Fetch Priority e l'attributo HTML fetchpriority, che ti consente di suggerire la priorità relativa di una risorsa (high o low). La priorità di recupero può aiutarti a ottimizzare Core Web Vitals.

Riepilogo

Ecco alcune aree chiave in cui la priorità di recupero può essere utile:

  • Viene aumentata la priorità dell'immagine LCP specificando fetchpriority="high" nell'elemento dell'immagine, in modo che l'LCP si verifichi prima.
  • Aumento della priorità degli script async, utilizzando una semantica migliore rispetto all'attuale attacco più comune (inserimento di un <link rel="preload"> per lo script async).
  • Riduzione della priorità degli script del corpo tardivo per consentire una sequenziazione migliore con le immagini.
Una visualizzazione sequenza che mette a confronto due test della home page di Google Voli. In basso, la priorità di recupero viene utilizzata per aumentare la priorità dell&#39;immagine hero, con una conseguente riduzione di 0,7 secondi del tempo LCP.
La priorità di recupero migliora il Largest Contentful Paint da 2,6 secondi a 1,9 secondi in un test di Google Voli.

In passato, gli sviluppatori avevano un'influenza limitata sulla priorità delle risorse utilizzando preload e preconnect. Il precaricamento ti consente di indicare al browser le risorse critiche da caricare in anticipo prima che il browser le rilevi naturalmente. Ciò è particolarmente utile per le risorse più difficili da trovare, come i caratteri inclusi nei fogli di stile, le immagini di sfondo o le risorse caricate da uno script. La preconnessione consente di eseguire l'inizializzazione delle connessioni ai server cross-origin e può contribuire a migliorare metriche come il tempo di risposta del primo byte. È utile quando conosci un'origine, ma non necessariamente l'URL esatto di una risorsa che sarà necessaria.

La priorità di recupero integra questi hint delle risorse. Si tratta di un indicatore basato sul markup disponibile tramite l'attributo fetchpriority che gli sviluppatori possono utilizzare per indicare la priorità relativa di una determinata risorsa. Puoi anche utilizzare questi suggerimenti 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. Acquisisci un'immagine Largest Contentful Paint che, una volta precaricata, avrà comunque una priorità bassa. Se viene eseguito il push indietro da altre risorse iniziali con priorità bassa, l'utilizzo della priorità di recupero può essere utile per la tempistica di caricamento dell'immagine.

Priorità delle risorse

La sequenza di download delle risorse dipende dalla priorità assegnata dal browser a ogni risorsa della pagina. I fattori che possono influire sulla logica di calcolo della priorità includono quanto segue:

  • Il tipo di risorsa, ad esempio CSS, caratteri, script, immagini e risorse di terze parti.
  • La posizione o l'ordine in cui il documento fa riferimento alle risorse.
  • Indica se gli attributi async o defer vengono utilizzati negli script.

La tabella seguente mostra in che modo Chrome dà la priorità e ordina la maggior parte delle risorse:

  Carica nella fase di blocco del layout Carica uno alla volta nella fase di blocco del layout
Priorità
lampeggiante		 VeryHigh Alto Medio Bassa VeryLow
DevTools
Priorità		 Massima Alto Medio Bassa Più basso
Risorsa principale
CSS (in anticipo**) CSS (in ritardo**) CSS (contenuti multimediali non corrispondenti***)
Script (in anteprima** o non dallo scanner di precaricamento) Script (in ritardo**) Script (asincrono)
Carattere Carattere (rel=preload)
Importa
Immagine (nell'area visibile) Immagine (le 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 alle diverse risorse durante il caricamento di una pagina nella scheda Rete di Chrome DevTools. Assicurati di includere la colonna Priority facendo clic con il tasto destro del mouse sulle intestazioni della tabella e selezionandola.

Scheda Rete di DevTools di Chrome che elenca una serie di risorse dei caratteri. Sono tutte con priorità massima.
Priorità per la risorsa type = "font" nella pagina dei dettagli delle notizie della BBC
Scheda Rete di DevTools di Chrome che elenca una serie di risorse dei caratteri. Sono una combinazione di priorità alta e bassa.
Priorità per la risorsa type = "script" nella pagina dei dettagli delle notizie della BBC.

Quando le priorità cambiano, puoi vedere sia la priorità iniziale che quella finale nell'impostazione Righe di richieste di grandi dimensioni o in una descrizione comando.

Scheda Rete di DevTools di Chrome. L&#39;impostazione &quot;Righe di richiesta grande&quot; è selezionata e la colonna Priorità mostra la prima immagine con priorità Alta e inferiore, con priorità iniziale diversa, media. Lo stesso viene mostrato nella descrizione comando.
Modifiche della priorità in DevTools.

Quando potresti aver bisogno di Priorità recupero?

Ora che conosci la logica di assegnazione della priorità del browser, puoi modificare l'ordine di download della pagina per ottimizzarne il rendimento e i Core Web Vitals. Ecco alcuni esempi di elementi che puoi cambiare per influenzare la priorità dei download delle risorse:

  • Inserisci i tag delle risorse come <script> e <link> nell'ordine in cui vuoi che il browser li scarichi. Le risorse con la stessa priorità vengono generalmente caricate nell'ordine in cui vengono rilevate.
  • Utilizza l'indicazione della risorsa preload per scaricare in anticipo le risorse necessarie, in particolare quelle che non sono facilmente rilevabili dal browser.
  • Utilizza async o defer per scaricare gli script senza bloccare altre risorse.
  • Carica in modo lazy i contenuti below the fold in modo che il browser possa utilizzare la larghezza di banda disponibile per le risorse above the fold più importanti.

Queste tecniche consentono di controllare il calcolo della priorità del browser, migliorando così le prestazioni e i Segnali web essenziali. Ad esempio, quando un'immagine di sfondo importante viene precaricata, può essere rilevata molto prima, migliorando il Largest Contentful Paint (LCP).

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

  • Hai diverse immagini above the fold, ma non tutte devono avere la stessa priorità. Ad esempio, in un carosello di immagini, solo la prima immagine visibile ha bisogno di una priorità più alta, mentre le altre, in genere non visibili inizialmente, possono essere impostate su una priorità inferiore.
  • Le immagini all'interno dell'area visibile in genere hanno una priorità pari a Low. Una volta completato il layout, Chrome rileva che si trova nell'area visibile e aumenta la sua priorità. Questo di solito aggiunge un ritardo significativo al caricamento delle immagini critiche, come le immagini hero. Se specifichi la priorità di recupero nel markup, l'immagine inizia con una priorità High e inizia a caricarsi molto prima. Nel tentativo di automatizzare un po' questa operazione, le prime cinque immagini più grandi sono impostate su priorità Medium da Chrome, il che è utile, ma un fetchpriority="high" esplicito è ancora meglio.

    Il precaricamento è comunque necessario per il rilevamento anticipato delle immagini LCP incluse come sfondi CSS. Per aumentare la priorità delle immagini di sfondo, includi fetchpriority='high' nel precaricamento.
  • Dichiarare gli script come async o defer indica al browser di caricarli in modo asincrono. Tuttavia, come illustrato nella tabella della priorità, a questi script viene assegnata anche una priorità "Bassa". Ti consigliamo di aumentarne la priorità garantendo al contempo il download asincrono, in particolare per gli script fondamentali per l'esperienza utente.
  • Se utilizzi l'API JavaScript fetch() per recuperare risorse o dati in modo asincrono, il browser le assegna la priorità High. Potresti voler eseguire alcuni recuperi con una priorità inferiore, soprattutto se stai mescolando chiamate API in background con chiamate API che rispondono all'input dell'utente. Contrassegna le chiamate API in background come priorità Low e le chiamate API interattive come priorità High.
  • Il browser assegna a CSS e ai caratteri una priorità High, ma alcune di queste risorse potrebbero essere più importanti di altre. Puoi utilizzare la priorità di recupero per abbassare la priorità delle risorse non critiche (tieni presente che il CSS iniziale blocca il rendering, quindi in genere deve avere una priorità High).

Attributo fetchpriority

Utilizza l'attributo HTML fetchpriority per specificare la priorità dei download per tipi di risorse come CSS, caratteri, script e immagini quando vengono scaricati usando tag link, img o script. Può assumere i seguenti valori:

  • high: la risorsa ha una priorità più alta e vuoi che il browser la assegni una priorità più alta del solito, a condizione che l'euristica del browser non lo impedisca.
  • low: la risorsa ha una priorità inferiore e vuoi che il browser la dia meno priorità, sempre se le sue regole di euristica lo consentono.
  • auto: il valore predefinito, che consente al browser di scegliere la priorità appropriata.

Di seguito sono riportati alcuni esempi di utilizzo dell'attributo fetchpriority nel markup, nonché 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>

Effetti della priorità del browser e di fetchpriority

Puoi applicare l'attributo fetchpriority a risorse diverse, come mostrato nella tabella seguente, per aumentarne o ridurne la priorità calcolata. fetchpriority="auto" (◉) in ogni riga contrassegna la priorità predefinita per il tipo di risorsa in questione. (disponibile anche come documento Google).

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

fetchpriority imposta la priorità relativa, ovvero aumenta o diminuisce la priorità predefinita di un importo appropriato, anziché impostare esplicitamente la priorità su High o Low. Questo spesso comporta una priorità High o Low, ma non sempre. Ad esempio, il CSS critico con fetchpriority="high" mantiene la priorità "Molto alta"/"Massima" e l'utilizzo di fetchpriority="low" su questi elementi mantiene la priorità "Alta". In nessuno di questi casi è necessario impostare esplicitamente la priorità su High o Low.

Casi d'uso

Utilizza l'attributo fetchpriority quando vuoi dare al browser un ulteriore suggerimento sulla 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 seguente confronto mostra la pagina di Google Voli con un'immagine di sfondo LCP caricata con e senza priorità di recupero. Con la priorità impostata su alta, il LCP è migliorato da 2,6 secondi a 1,9 secondi.

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

Utilizza fetchpriority="low" per ridurre la priorità delle immagini above the fold che non sono immediatamente importanti, ad esempio le immagini fuori schermo 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>

Sebbene le immagini 2-4 non siano visibili nel viewport, potrebbero essere considerate "abbastanza vicine" da essere migliorate a high e caricate anche se viene aggiunto un attributo load=lazy. Di conseguenza, fetchpriority="low" è la soluzione corretta.

In un esperimento precedente con l'app Oodle, lo abbiamo utilizzato per abbassare la priorità delle immagini che non vengono visualizzate al caricamento. Ha ridotto il tempo di caricamento della pagina di 2 secondi.

Un confronto affiancato della priorità di recupero quando utilizzata nel carosello di immagini dell&#39;app Oodle. A sinistra, il browser imposta le priorità predefinite per le immagini del carosello, ma le scarica e le dipinge circa due secondi più lentamente rispetto all&#39;esempio a destra, che imposta una priorità più alta solo sulla prima immagine del carosello.
Se imposti la priorità alta solo per la prima immagine del carosello, la pagina si carica più velocemente.

Riduci la priorità delle risorse precaricate

Per impedire alle risorse precaricate di competere con altre risorse fondamentali, puoi ridurne la priorità. Utilizza 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" as="script" href="non-critical-script.js" fetchpriority="low">

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

Modificare la priorità degli script

Gli script della pagina devono essere interattivi dovrebbero essere caricati rapidamente, ma non devono bloccare altre risorse più importanti che bloccano la visualizzazione. Puoi contrassegnarle come async con priorità elevata.

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

Non puoi contrassegnare uno script come async se si basa su stati DOM specifici. Tuttavia, se vengono eseguite in un secondo momento sulla pagina, puoi caricarle con una priorità inferiore:

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

In questo modo l'analizzatore sintattico verrà comunque bloccato quando raggiunge questo script, ma consentirà di dare la priorità ai contenuti precedenti.

In alternativa, se è necessario il DOM completato, puoi utilizzare l'attributo defer (che viene eseguito, in ordine, dopo DOMContentLoaded) oppure async nella parte inferiore della pagina.

Riduci la priorità per i recuperi di dati non critici

Il browser esegue fetch con una priorità alta. Se hai più recuperi che possono essere attivati contemporaneamente, puoi utilizzare la priorità predefinita alta per i recuperi più importanti dei dati e una priorità inferiore per i dati meno critici.

// 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 di Priorità di recupero

La priorità di recupero può migliorare le prestazioni in casi d'uso specifici, tuttavia occorre tenere presente alcuni aspetti quando si utilizza la priorità di recupero:

  • L'attributo fetchpriority è un suggerimento, non un'istruzione. Il browser cerca di rispettare la preferenza dello sviluppatore, ma può anche applicare le preferenze relative alla priorità delle risorse per risolvere i conflitti.

  • Non confondere la priorità di recupero con il precaricamento:

    • Il precaricamento è un recupero obbligatorio, non un suggerimento.
    • Il precaricamento consente al browser di rilevare una risorsa in anticipo, ma recupera comunque la risorsa con la priorità predefinita. Al contrario, la priorità di recupero non contribuisce alla visibilità, ma ti consente di aumentare o diminuire la priorità di recupero.
    • Spesso è più facile osservare e misurare gli effetti di un precaricamento rispetto a quelli di una modifica della priorità.

    La priorità di recupero può integrare i precaricamenti aumentando la granularità della prioritizzazione. Se hai già specificato un precaricamento come uno dei primi elementi in <head> per un'immagine LCP, una priorità di recupero high potrebbe non migliorare significativamente l'LCP. Tuttavia, se il precaricamento avviene dopo il caricamento di altre risorse, una highpriorità di recupero può migliorare ulteriormente il LCP. Se un'immagine critica è un'immagine di sfondo CSS, precaricala con fetchpriority = "high".

  • I miglioramenti al tempo di caricamento derivanti dall'assegnazione della priorità sono più rilevanti negli ambienti in cui un maggior numero di risorse compete per la larghezza di banda di rete disponibile. Si tratta di un problema comune per le connessioni HTTP/1.x in cui non sono possibili i download paralleli o per le connessioni HTTP/2 o HTTP/3 con larghezza di banda ridotta. In questi casi, l'assegnazione delle priorità può aiutare a risolvere i colli di bottiglia.

  • Le CDN non implementano la priorità HTTP/2 in modo uniforme e in modo simile per HTTP/3. Anche se il browser comunica la priorità dalla priorità di recupero, la CDN potrebbe non ridefinire la priorità delle risorse nell'ordine specificato. Ciò rende difficile il test della priorità di recupero. Le priorità vengono applicate sia internamente nel browser sia con i protocolli che supportano la definizione delle priorità (HTTP/2 e HTTP/3). Vale comunque la pena utilizzare la priorità di recupero solo per l'assegnazione della priorità del browser interno indipendentemente dal supporto della CDN o dell'origine, perché le priorità cambiano spesso quando il browser richiede risorse. Ad esempio, le risorse con priorità bassa, come le immagini, spesso non vengono richieste mentre il browser elabora gli elementi <head> critici.

  • Potresti non essere in grado di introdurre la priorità di recupero come best practice nella progettazione iniziale. Più avanti nel 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.

Gli sviluppatori dovrebbero utilizzare il precaricamento per il suo scopo previsto, ovvero precaricare le risorse non rilevate dall'analizzatore sintattico (caratteri, importazioni, immagini LCP di sfondo). Il posizionamento del hint preload influirà sul momento in cui la risorsa viene precaricata.

La priorità di recupero riguarda il modo in cui la risorsa dovrebbe essere recuperata quando viene recuperata.

Suggerimenti per l'utilizzo dei precaricamenti

Quando utilizzi i precaricamenti, tieni presente quanto segue:

  • Se si include un precaricamento nelle intestazioni HTTP, questo viene inserito prima di tutto nell'ordine di caricamento.
  • In genere, i precaricamenti vengono caricati nell'ordine in cui il parser riceve per qualsiasi elemento con una priorità pari o superiore a Medium. Fai attenzione se includi i precarichi all'inizio del codice HTML.
  • I precaricamenti dei caratteri funzionano probabilmente meglio verso la fine del titolo o all'inizio del testo.
  • I precaricamenti di importazione (import() o modulepreload dinamici) devono essere eseguiti dopo il tag script che richiede l'importazione, quindi assicurati che lo script venga caricato o analizzato per primo in modo che possa essere valutato durante il caricamento delle relative dipendenze.
  • I precaricamenti delle immagini hanno una priorità Low o Medium per impostazione predefinita. Ordinali in base agli script asincroni e ad altri tag con priorità bassa o molto 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 si chiamavano Suggerimenti di priorità. Da allora, l'interfaccia è passata a fetchpriority per HTML e priority per l'API Fetch di JavaScript nell'ambito della procedura relativa agli standard web. Per ridurre la confusione, ora chiamiamo questa impostazione Priorità recupero API.

Conclusione

È probabile che gli sviluppatori siano interessati alla priorità di recupero con le correzioni del comportamento di precaricamento e il recente focus su Core Web Vitals e LCP. Ora sono disponibili manopole aggiuntive per raggiungere la sequenza di caricamento preferita.