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 che consente di scaricarli in un ordine ottimale. La priorità di una risorsa di solito dipende dalla sua posizione e dalla sua posizione nel documento. Ad esempio, le immagini nell'area visibile potrebbero avere una priorità High, mentre la priorità per i CSS che bloccano la visualizzazione con caricamento iniziale e che utilizzano gli elementi <link> nella sezione <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 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 consente di ottimizzare i Segnali web essenziali.
Riepilogo
Ecco alcune aree chiave in cui la priorità di recupero può esserti d'aiuto:
- Aumentare la priorità dell'immagine LCP specificando
fetchpriority="high"sull'elemento immagine, con un conseguente aumento della priorità di LCP. - Aumento della priorità degli script
async, utilizzando una semantica migliore rispetto alla compromissione più comune attuale (inserimento di<link rel="preload">per lo scriptasync). - Riduzione della priorità degli script ritardati per consentire una migliore sequenza con le immagini.
In passato, gli sviluppatori hanno avuto un'influenza limitata sulla priorità delle risorse utilizzando preload e preconnect. Il precaricamento ti consente di indicare al browser le risorse critiche che vuoi caricare in anticipo, prima che il browser le rilevi in modo naturale. Questo è particolarmente utile per le risorse più difficili da individuare, ad esempio i caratteri inclusi nei fogli di stile, nelle immagini di sfondo o nelle risorse caricate da uno script. La preconnessione consente di riscaldare le connessioni ai server multiorigine e può contribuire a migliorare metriche come Tempo per il primo byte. È utile quando conosci un'origine, ma non necessariamente l'URL esatto di una risorsa che ti servirà.
La priorità di recupero completa questi suggerimenti relativi alle 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 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.
Priorità delle risorse
La sequenza di download delle risorse dipende dalla priorità assegnata al browser per ogni risorsa nella 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
asyncodefervengono utilizzati negli script.
La tabella seguente mostra in che modo Chrome assegna la priorità e le sequenze della maggior parte delle risorse:
| 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 sono state 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 e selezionandola.
type = "font" nella pagina dei dettagli delle notizie della BBC
type = "script" nella pagina dei dettagli delle notizie della BBC.Quando le priorità cambiano, puoi visualizzare sia la priorità iniziale che quella finale nell'impostazione Righe di richiesta o in una descrizione comando.
Quando potrebbe essere necessaria la priorità di recupero?
Ora che conosci la logica di prioritizzazione del browser, puoi modificare l'ordine di download della pagina per ottimizzarne le prestazioni e i Segnali web essenziali. Ecco alcuni esempi di elementi che puoi modificare per influenzare la priorità dei download delle risorse:
- Inserisci i tag delle risorse, ad esempio
<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 sulle risorse
preloadper scaricare prima le risorse necessarie, in particolare per quelle che non vengono facilmente rilevate in anticipo dal browser. - Utilizza
asyncodeferper 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ù importanti.
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 tutte devono avere la stessa priorità. Ad esempio, in un carosello di immagini solo la prima immagine visibile deve avere una priorità più elevata, mentre le altre, in genere fuori schermo all'inizio, possono avere una priorità più bassa.
- In genere le immagini all'interno dell'area visibile hanno una priorità pari a
Low. Una volta completato il layout, Chrome rileva che si trovano nell'area visibile e ne aumenta la priorità. In questo modo, si aggiunge un ritardo significativo al caricamento delle immagini critiche, come le immagini hero. Se fornisci la priorità di recupero nel markup, l'immagine inizia con una prioritàHighe viene caricata molto prima. Nel tentativo di automatizzare un po' questa operazione, le prime cinque immagini più grandi vengono impostate da Chrome sulla prioritàMedium, il che è utile, mentre unafetchpriority="high"esplicita sarà ancora migliore.
Il precaricamento è comunque necessario per il rilevamento anticipato delle immagini LCP incluse come sfondi CSS. Per migliorare la priorità delle immagini di sfondo, includifetchpriority='high'nel precaricamento. - Se dichiari gli script come
asyncodefer, indichi al browser di caricarli in modo asincrono. Tuttavia, come mostrato nella tabella delle priorità, a questi script viene assegnata anche una priorità "Bassa". Potrebbe essere opportuno aumentare la loro 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 combini chiamate API in background con chiamate API che rispondono all'input dell'utente. Contrassegna le chiamate API in background come prioritàLowe le chiamate API interattive come prioritàHigh. - Il browser assegna la priorità ai caratteri e ai CSS
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 il codice CSS iniziale comporta il blocco della visualizzazione, quindi di solito dovrebbe avere una prioritàHigh).
Attributo fetchpriority
Utilizza l'attributo HTML fetchpriority per specificare la priorità di download per i tipi di risorse, come CSS, caratteri, script e immagini, quando vengono scaricati utilizzando i 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 più del solito, purché le euristiche del browser non impediscano che ciò accada.low: la risorsa ha una priorità più bassa e vuoi che il browser la diminuisca, sempre se le sue euristiche lo consentono.auto: il valore predefinito, che consente al browser di scegliere 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>
Effetti della priorità del browser e di fetchpriority
Puoi applicare l'attributo fetchpriority a risorse diverse, come mostrato nella seguente tabella, per aumentare o ridurre la priorità calcolata. fetchpriority="auto" (◉) in ogni riga contrassegna la priorità predefinita per quel tipo di risorsa. (disponibile anche come documento Google).
| Carica in fase di blocco del layout | Caricane uno 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 | ◉ | ||||
fetchpriority imposta la priorità relativa, ovvero aumenta o diminuisce la priorità predefinita di un importo appropriato, anziché impostare esplicitamente la priorità High o Low. Questo comporta spesso una priorità High o Low, ma non sempre. Ad esempio, il CSS fondamentale con fetchpriority="high" mantiene la priorità "Molto alta"/"Massima" e l'utilizzo di fetchpriority="low" su questi elementi mantiene la priorità "Alta". 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 High, l'LCP è migliorato da 2,6 a 1,9 secondi.
Riduci la priorità delle immagini above the fold
Usa 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 sono esterne all'area visibile, potrebbero essere considerate "abbastanza vicine" da aumentarle a high e caricarsi anche se viene aggiunto un attributo load=lazy. Pertanto, fetchpriority="low" è la soluzione corretta.
In un esperimento precedente con l'app Oodle, abbiamo utilizzato questa funzione per ridurre la priorità delle immagini che non vengono visualizzate al caricamento. Ha ridotto il tempo di caricamento della pagina di 2 secondi.
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'">
Riassegna la priorità agli script
Gli script che la pagina deve essere interattiva devono caricarsi rapidamente, ma non bloccare altre risorse più critiche 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 eseguiti più tardi sulla pagina, puoi caricarli con priorità inferiore:
<script src="blocking_but_unimportant.js" fetchpriority="low"></script>
Questa operazione bloccherà comunque l'analizzatore sintattico quando raggiunge lo script, ma consentirà di dare priorità ai contenuti precedenti.
In alternativa, se è necessario il DOM completato, è possibile utilizzare l'attributo defer (che viene eseguito, in ordine, dopo DOMContentLoaded) o anche async in fondo alla pagina.
Riduci la priorità per i recuperi di dati non critici
Il browser esegue fetch con priorità elevata. Se hai più recuperi che potrebbero essere attivati contemporaneamente, puoi utilizzare l'alta priorità predefinita per i recuperi dei dati più importanti e ridurre la priorità dei 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à del recupero può migliorare le prestazioni in casi d'uso specifici, ma è importante tenere presenti alcuni aspetti quando si utilizza la priorità di recupero:
- L'attributo
fetchpriorityè un suggerimento, non un'istruzione. Il browser cerca di rispettare le preferenze dello sviluppatore, ma può anche applicare le sue preferenze di priorità delle risorse per la priorità delle risorse, in modo da 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 con la rilevabilità, ma consente di aumentare o diminuire la priorità di recupero.
- Spesso è più facile osservare e misurare gli effetti di un precaricamento piuttosto che gli effetti di una modifica della priorità.
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 recuperohighpotrebbe non migliorare in modo significativo LCP. Tuttavia, se il precaricamento avviene dopo il caricamento di altre risorse, una priorità di recuperohighpuò migliorare ulteriormente l'LCP. Se un'immagine importante è un'immagine di sfondo del CSS, precaricala confetchpriority = "high".I miglioramenti del tempo di caricamento derivanti dall'assegnazione delle priorità sono più pertinenti in ambienti in cui più risorse competono per la larghezza di banda di rete disponibile. Si tratta di un problema comune per le connessioni HTTP/1.x, in cui non è possibile eseguire download paralleli, o per le connessioni HTTP/2 o HTTP/3 con larghezza di banda limitata. In questi casi, l'assegnazione delle priorità può aiutare a risolvere i colli di bottiglia.
Le reti CDN non implementano l'assegnazione delle priorità HTTP/2 in modo uniforme e analogamente per quanto riguarda HTTP/3. Anche se il browser comunica la priorità dalla priorità di recupero, la rete CDN potrebbe non assegnare nuovamente la priorità alle risorse nell'ordine specificato. Questo rende difficile testare la 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 utilizzare Priorità di recupero solo per l'assegnazione della priorità del browser interno, indipendentemente dal supporto della CDN o dell'origine, perché le priorità spesso cambiano quando il browser richiede risorse. Ad esempio, spesso le risorse a bassa priorità, come le immagini, non vengono richieste mentre il browser elabora elementi
<head>critici.Potresti non riuscire a introdurre la priorità di recupero come best practice nella tua progettazione iniziale. Più avanti nel ciclo di sviluppo, puoi assegnare le priorità 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 lo scopo previsto, ovvero per precaricare le risorse non rilevate dal parser (caratteri, importazioni, immagini LCP in background). Il posizionamento del suggerimento preload influirà sul precaricato della risorsa.
La priorità del recupero riguarda il modo in cui la risorsa deve essere recuperata al momento del recupero.
Suggerimenti per l'utilizzo dei precaricamenti
Tieni presente quanto segue quando utilizzi i precaricamenti:
- L'inclusione di un precaricamento nelle intestazioni HTTP lo mette prima di tutto il resto nell'ordine di caricamento.
- In genere, i precaricamenti vengono caricati nell'ordine in cui il parser riceve per tutti i contenuti con priorità
Mediumo superiore. Fai attenzione se includi 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, quindi assicurati che lo script venga caricato o analizzato prima in modo che possa essere valutato durante il caricamento delle sue dipendenze. - I precaricamenti delle immagini hanno una priorità pari a
LowoMediumper impostazione predefinita. Ordinali in base agli script asincroni e agli 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, poi di nuovo nel 2021 utilizzando l'attributo importance. All'epoca era chiamato Suggerimenti sulla priorità. 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, ora chiamiamo questa priorità di recupero delle API.
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 preferita.