Ottimizza il 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 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: non supportato.
  • 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.

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

Riepilogo

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

  • 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).
  • Ridurre la priorità degli script ritardati per consentire una migliore sequenza con le immagini.
di Gemini Advanced.
Una visualizzazione sequenza che mette a confronto due test della home page di Google Voli. In basso, viene utilizzata la priorità recupero per aumentare la priorità dell&#39;immagine hero, con una conseguente diminuzione di 0,7 secondi dell&#39;LCP.
La priorità di recupero migliora la Largest Contentful Paint da 2,6 s a 1,9 s 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 individuare, come 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. È utile quando conosci un'origine, ma non necessariamente l'URL esatto di una risorsa che sarà necessaria.

La priorità di recupero completa questi suggerimenti per le risorse. È 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 influenzare la priorità dei recuperi di 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 al browser per ogni risorsa sulla pagina. Fattori che possono influire sul calcolo della priorità include 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 assegna le priorità e raggruppa la maggior parte delle risorse:

  Carica nella fase di blocco del layout Carica una volta alla volta nella fase di blocco del layout
Priorità
lampeggiante		 VeryHigh Alto Medio Bassa VeryLow
DevTools
Priority		 Più alta Alto Medio Bassa Più basso
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)
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 quando carichi una pagina nella scheda Rete di Chrome Dev Tools. 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 per i 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 per i 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 richiesta Big o in una descrizione comando.

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

Quando può essere necessaria la priorità di recupero?

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

  • Posiziona 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 il suggerimento risorsa preload per scaricare in anticipo le risorse necessarie, in particolare per quelle che non sono facilmente individuabili in anticipo dal browser.
  • Utilizza async o defer per scaricare script senza bloccare altre risorse.
  • 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ù importanti.

Queste tecniche aiutano a controllare il calcolo delle priorità del browser, migliorando così le prestazioni e i Core Web Vitals. Ad esempio, quando un'immagine di sfondo critica viene precaricata, può essere individuata molto prima, migliorando la 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 richiede una priorità più alta, mentre le altre, in genere fuori schermo inizialmente possono essere impostate con una priorità inferiore.
  • Le immagini all'interno dell'area visibile iniziano in genere con 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 fornisci la priorità di recupero nel markup, l'immagine può iniziare con una priorità High e iniziare il caricamento molto prima. Nel tentativo di automatizzare un po' la situazione, Chrome imposta la priorità delle prime cinque immagini più grandi (Medium), ma un elemento fetchpriority="high" esplicito sarà ancora migliore.

    Il precaricamento è comunque necessario per il rilevamento anticipato delle immagini LCP incluse come sfondi CSS. Per migliorare le immagini di sfondo" la priorità, includi fetchpriority='high' nel precaricamento.
  • La dichiarazione degli script come async o defer indica al browser di caricarli in modo asincrono. Tuttavia, come mostrato nella tabella della priorità, a questi script viene assegnato anche lo stato "Bassa" la priorità. Ti consigliamo di aumentarne la priorità garantendo al contempo il download asincrono, soprattutto per gli script fondamentali per l'esperienza utente.
  • Se utilizzi l'API JavaScript fetch() per recuperare risorse o dati in modo asincrono, il browser gli 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 con 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 ridurre la priorità delle risorse non critiche (tieni presente che i primi CSS bloccano la visualizzazione, quindi di solito dovrebbero essere una priorità di 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, purché l'euristica del browser non lo impedisca.
  • low: la risorsa ha una priorità più bassa e vuoi che il browser ne diminuisca la priorità, sempre se la sua euristica lo consente.
  • 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).

  Carica nella fase di blocco del layout Carica un file alla volta nella fase di blocco del layout
Priorità
lampeggiante		 VeryHigh Alto Medio Bassa VeryLow
DevTools
Priority		 Più alta Alto Medio Bassa Più basso
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 (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 lo stato "Molto alto"/"Massimo" la priorità e l'utilizzo di fetchpriority="low" su questi elementi mantiene lo stato "Alta" la priorità. Nessuno di questi casi prevede l'impostazione esplicita della 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 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 Alta, l'LCP è migliorato da 2,6 secondi a 1,9 secondi.

È stato condotto un esperimento 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>

Anche se le immagini 2-4 non saranno coperte dall'area visibile, potrebbero essere considerate "abbastanza vicine" per aumentarli a high e caricarli anche se viene aggiunto un attributo load=lazy. Di conseguenza, fetchpriority="low" è la soluzione corretta.

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

Un confronto fianco a fianco della priorità di recupero quando viene utilizzata nel carosello di immagini dell&#39;app Oodle. A sinistra, il browser imposta le priorità predefinite per le immagini del carosello, ma scarica e mostra queste immagini circa due secondi più lentamente rispetto all&#39;esempio a destra. Questa operazione imposta una priorità più alta solo per la prima immagine del carosello.
. L'utilizzo della priorità elevata solo per la prima immagine carosello consente di caricare più velocemente la pagina.

Riduci la priorità delle risorse precaricate

Per impedire alle risorse precaricate di competere con altre risorse critiche, 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'">

Modifica 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 contrassegnare questi elementi 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.

Abbassa 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 elevata 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 della 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 aiuta a migliorare la rilevabilità, ma consente di aumentare o diminuire la priorità di recupero.
    • Spesso è più facile osservare e misurare gli effetti di un precaricamento che gli effetti 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 priorità di recupero high può migliorare ulteriormente l'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 reti 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. Questo rende difficile testare la priorità di recupero. Le priorità vengono applicate sia internamente all'interno del browser sia con i protocolli che supportano la prioritizzazione (HTTP/2 e HTTP/3). È comunque opportuno utilizzare la priorità di recupero solo per l'assegnazione della priorità del browser interno indipendentemente dal supporto di CDN o origine, poiché le priorità cambiano spesso quando il browser richiede le risorse. Ad esempio, spesso le risorse a bassa priorità come le immagini non vengono richieste durante l'elaborazione di <head> elementi 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 definire le priorità assegnate alle diverse risorse della pagina e, se non corrispondono alle tue aspettative, puoi introdurre 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 precaricamenti all'inizio del codice HTML.
  • Il precaricamento dei caratteri probabilmente funziona meglio verso la fine del "head" o l'inizio del corpo.
  • I precaricamenti di importazione (dinamici import() o modulepreload) 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 sue dipendenze.
  • I precaricamenti delle immagini hanno una priorità Low o Medium per impostazione predefinita. Ordinali in base agli script asincroni e agli altri tag con priorità bassa o minima.

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 chiamava Suggerimenti prioritari. Da allora, l'interfaccia è cambiata in fetchpriority per HTML e priority per l'API Fetch di JavaScript nell'ambito della procedura per gli standard web. Per evitare confusione, ora chiamiamo questa Priorità di recupero dell'API.

Conclusione

È probabile che gli sviluppatori siano interessati alla priorità di recupero per 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.