Quando un browser analizza una pagina web e inizia a rilevare e scaricare risorse come immagini, script o CSS, assegna un priority di recupero in modo che sia possibile 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 vengono caricati inizialmente e che bloccano la visualizzazione utilizzando gli elementi <link> nella sezione <head> potrebbe essere Very High. L'assegnazione automatica della priorità solitamente funziona bene, ma in alcuni casi d'uso l'ordine assegnato non è ottimale.
Questa pagina illustra l'API Fetch Priority e l'attributo HTML fetchpriority, che ti consentono di ottimizzare i Segnali web essenziali fornendo un suggerimento
sulla priorità relativa di una risorsa (high o low).
Riepilogo
Ecco alcune aree chiave in cui la priorità di recupero può esserti d'aiuto:
- Aumento della priorità dell'immagine LCP specificando
fetchpriority="high"sull'elemento immagine, con un caso LCP più rapido. - Aumento della priorità degli script
async, utilizzando una semantica migliore rispetto alla compromissione più comune (inserimento di<link rel="preload">per lo scriptasync). - Riduzione della priorità degli script late-body per migliorare la sequenza delle immagini.
Storicamente, gli sviluppatori hanno avuto un'influenza limitata sulla priorità delle risorse utilizzando precarica e preconnessione. Il precaricamento ti consente di indicare al browser le risorse critiche che vuoi caricare in anticipo prima che il browser le rilevi naturalmente. Ciò è particolarmente utile per le risorse più difficili da individuare, ad esempio i caratteri inclusi nei fogli di stile, le immagini di sfondo o le risorse caricate da uno script. La preconnessione aiuta a preparare 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.
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ò integrare anche 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'utilizzo 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.
- Il suggerimento sulle risorse
preload, che consente al browser di rilevare una risorsa più velocemente e di caricarla prima. - Modifiche al calcolo della priorità per gli script
asyncodefer.
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 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.
type = "font" 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 assegnazione della priorità 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 senza utilizzare la priorità di recupero:
- Inserisci i tag delle risorse, come
<script>e<link>, nell'ordine in cui vuoi che il browser li scarichi. - Utilizza il suggerimento sulle risorse
preloadper scaricare prima le risorse necessarie, in particolare quelle più difficili da rilevare per il browser. - Utilizza
asyncodeferper 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ù critiche.
Ecco alcuni casi più complessi in cui la priorità di recupero può aiutarti a ottenere l'ordine di priorità delle risorse necessario:
- 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ù elevata.
- Le immagini hero all'interno dell'area visibile in genere iniziano con una priorità pari a
LowoMedium. Una volta completato il layout, Chrome rileva che si trovano nell'area visibile e aumenta la loro priorità. Questo di solito aggiunge un ritardo significativo nel caricamento delle immagini. Specificare la priorità di recupero nel markup consente all'immagine di iniziare con una priorità "Alta" e di caricarsi molto prima.
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 anche assegnata una priorità "Bassa". Potrebbe essere opportuno aumentare 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à più bassa, 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 CSS e caratteri a
High" priority, ma alcune di queste risorse potrebbero essere più importanti di altre. Puoi usare Priorità di recupero per ridurre la priorità delle risorse non critiche.
Attributo fetchpriority
Utilizza l'attributo HTML fetchpriority per specificare la priorità di download per 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à elevata e vuoi che il browser la attribuisca la priorità, purché l'euristica del browser non impedisca questo problema.low: la risorsa ha una priorità bassa e vuoi che il browser la diminuisca se l'euristica lo consente.auto: il valore predefinito, che consente al browser di scegliere la priorità appropriata.
Ecco 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 seguente tabella, per aumentare o ridurre la priorità calcolata.
fetchpriority="auto" (◉) in ogni riga contrassegna la priorità predefinita per quel tipo di risorsa.
| 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 spesso determina 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" per 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 fornire 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
Utilizza fetchpriority="low" per ridurre la priorità delle immagini above the fold che non sono immediatamente 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. Il tempo di caricamento della pagina è diminuito 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" 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 che la pagina deve essere interattiva devono caricarsi rapidamente, ma non devono bloccare altre risorse. 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>
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
Ecco alcuni aspetti da tenere presenti quando utilizzi 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. La priorità di recupero non migliora però la rilevabilità, ma consente di aumentare o diminuire la priorità di recupero.
- È 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à dell'assegnazione delle 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 l'LCP. Tuttavia, se il precaricamento avviene dopo il caricamento di altre risorse, una priorità di recuperohighpuò migliorare ulteriormente l'LCP. Se un'immagine critica è 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. Questo accade di solito per le connessioni HTTP/1.x, in cui non sono possibili download paralleli, o per le connessioni HTTP/2 con larghezza di banda limitata. In questi casi, definire le priorità può aiutare a risolvere i colli di bottiglia.
Le CDN non implementano l'assegnazione della priorità HTTP/2 in modo uniforme. Anche se il browser comunica la priorità dalla priorità di recupero, la rete 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 l'assegnazione delle priorità (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 Priorità di recupero come best practice nella 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.
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 vengono inviati dal parser per tutti gli elementi superiori alla priorità "Media". 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à "Bassa" o "Media" per impostazione predefinita. Ordinali 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, poi di nuovo nel 2021 utilizzando l'attributo importance. All'epoca era chiamato Suggerimenti prioritari. L'interfaccia è stata modificata in fetchpriority per il codice 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 API.