L'API Fetch Priority indica la priorità relativa delle risorse al browser. Può consentire un caricamento ottimale e migliorare i Segnali web essenziali.
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 scriptasync
). - Riduci la priorità degli script ritardati per consentire una migliore sequenza con le immagini.
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
odefer
.
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.
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.
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
- 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. - 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. - Utilizza
async
odefer
per scaricare gli script senza bloccare le 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ù 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:
- 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.
- 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 includendofetchpriority='high'
nel precaricamento, altrimenti inizierà comunque con una priorità "Bassa" o "Media" per le immagini. - Se dichiari gli script come
async
odefer
, 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. - 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". - 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.
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.
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 recuperohigh
potrebbe non generare guadagni significativi. Tuttavia, se il precaricamento è avvenuto dopo altre risorse, una priorità di recuperohigh
può migliorare la metrica LCP. Se un'immagine critica è un'immagine di sfondo del CSS, dovresti precaricarla confetchpriority = "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()
omodulepreload
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.