Cosa sono i Priority Hints? Come si usano per ottimizzare il caricamento delle risorse e i Core Web Vitals?
Come possiamo indicare al browser la priorità di scaricamento delle risorse, migliorando le metriche dei Core Web Vitals? Attraverso i Priority Hints: vediamo come utilizzarli per garantire una Page Experience sempre migliore.
Indice
Cosa sono i Priority Hints
I Priority Hints sono uno strumento che permette agli sviluppatori di indicare al browser l'importanza di una risorsa rispetto alle altre, e quindi di gestire l'ordine di caricamento delle risorse di una pagina web per migliorarne le performance.
Questo avviene attraverso l’attributo fetchpriority (high, medium o low) sui tag HTML link, img, script e iframe, il quale segnala al browser il valore relativo delle risorse ottimizzando l’ordine di caricamento e migliorando l’esperienza utente.
Introdotti dalla versione 101 di Chrome, i Priority Hints rappresentano uno strumento chiave per potenziare le performance delle pagine web e ottimizzare i Core Web Vitals, metriche fondamentali per la SEO e la qualità complessiva dei siti web.
Come funzionano i Priority Hints
- Il browser analizza la pagina web e assegna una priorità di scaricamento alle risorse.
- I Priority Hints permettono di suggerire una priorità di scaricamento ottimizzata delle risorse attraverso l'attributo fetchpriority.
- Il browser scarica e interpreta le risorse in base ai suggerimenti di priorità.
Quando il browser analizza la pagina web e trova delle risorse come immagini, CSS e JS, assegna una priorità di scaricamento nel tentativo di utilizzare un ordine ottimale. Tuttavia, tutto ciò dipende dal tipo di elementi e dalla posizione nel documento. Ad esempio, i CSS linkati nell'head della pagina, che magari possono bloccare il rendering, dovrebbero avere una priorità altissima; allo stesso modo, le immagini "above the fold" dovrebbero avere una priorità di caricamento alta.
I browser sono già performanti nel mettere in atto questo processo, ma in certi casi potrebbe essere migliorabile, e i Priority Hints (suggerimenti di priorità) danno la possibilità di gestire la priorità di scaricamento delle risorse attraverso l'attributo "fetchpriority".
A cosa servono i Priority Hints
A cosa servono i priority hints avendo già a disposizione preload e preconnect? In realtà, i priority hints vanno a completare quelli che W3C definisce "Resource Hints", ma è fondamentale comprendere il ruolo di tutti gli attori.
Il preload consente di indicare al browser le risorse critiche che si desidera caricare in anticipo, prima che vengano "scoperte" nel documento. Ciò è particolarmente utile per risorse non facilmente individuabili, come font inclusi nei fogli di stile, immagini di sfondo o elementi caricati attraverso uno script.
Il preconnect aiuta a preparare le connessioni ai server con origini diverse. Può contribuire a migliorare metriche come il Time-to-first-byte, ed è utile quando si conosce un'origine ma non l'URL esatto di una risorsa che sarà necessaria per la pagina.
I priority hints sono un segnale basato sul markup (implementabile attraverso l'attributo "fetchpriority") che gli sviluppatori possono utilizzare per indicare la priorità relativa di una risorsa. Possono anche essere messi in azione attraverso JavaScript e l'API Fetch, con la proprietà "priority".
I priority hints possono anche integrare il preload. Se, ad esempio, consideriamo un'immagine LCP, dopo averla precaricata possiamo sfruttare la priorità per migliorare le prestazioni.
I priority hints sono disponibili su Chrome, a partire dalla versione 101.
La priorità delle risorse del browser
Il browser scarica le risorse con una priorità che viene calcolata in base all'ordine in cui vengono rilevate. Come si vede nelle immagini seguenti, nella tab "Rete" di Chrome Dev Tools è possibile visualizzare la priorità assegnata.
Quando servono i Priority Hints
La conoscenza delle logiche con le quali il browser determina la priorità delle risorse dà la possibilità di progettare le pagine per ottimizzare le prestazioni. Quelle che seguono, sono alcuni esempi delle aree in cui è possibile intervenire.
- È possibile posizionare le risorse come "script" e "link" nell'ordine in cui si desidera vengano scaricate. Gli elementi con la stessa priorità vengono generalmente caricati nell'ordine di rilevazione.
- Utilizzando il preload è possibile scaricare in anticipo le risorse necessarie, in particolare quelle che non vengono rilevate facilmente dal browser.
X
- Grazie agli attributi "async" o "defer", gli script possono essere scaricati senza bloccare altre risorse.
- Il lazy-load delle risorse non above the fold può velocizzare il caricamento di quelle più critiche nell'area above the fold.
Queste tecniche aiutano a controllare il calcolo della priorità del browser, migliorando le prestazioni e i Core Web Vitals. Ad esempio, se un'immagine di sfondo "critica" (per il rendering) viene precaricata, può essere rilevata molto prima, migliorando il Largest Contentful Paint (LCP).
A volte, però, questi tecnicismi potrebbero non essere sufficienti per assegnare la priorità alle risorse in modo ottimale. Quelli che seguono, sono alcuni degli scenari in cui i priority hints potrebbero essere utili.
Esempi di utilizzo dei Priority Hints
- Ci sono diverse immagini above the fold, ma non tutte devono avere la stessa priorità. Ad esempio, in uno slideshow solo la prima immagine visibile necessita di una priorità maggiore rispetto alle altre.
- Le hero images all'interno del viewport hanno inizialmente una priorità bassa. Successivamente, il browser realizza che sono nel viewport e aumenta la loro priorità (Chrome Dev Tools indica la priorità finale, ma WebPageTest le indica entrambe). Questo può aggiungere un ritardo significativo al caricamento dell'immagine. Il priority hint nel markup consente di indicare da subito una priorità elevata.
- Gli attributi degli script "async" e "defer" indicano al browser un caricamento asincrono, ma a tali script viene attribuita una priorità bassa. Aumentandola per quelli più critici per le azioni degli utenti, si va a migliorare la user experience.
- Utilizzando l'API fetch() in JavaScript per recuperare le risorse in modalità asincrona, il browser tende ad assegnare ad esse una priorità alta. In certi casi, questo potrebbe non essere desiderato, preferendo usare i priority hints per una gestione diversa.
- Il browser assegna ai CSS e ai font una priorità elevata, ma le risorse potrebbero non essere ugualmente importanti o richieste per gestire la metrica di LCP. Grazie ai priority hints è possibile gestire queste priorità.
L'attributo "fetchpriority"
L'attributo fetchpriority viene utilizzato per andare a specificare la priorità, ed ha effetto per i tag link, img, script e iframe.
I valori attribuibili all'attributo sono i seguenti.
- high: la risorsa ha una priorità alta;
- low: la risorsa ha una priorità bassa;
- auto: il valore predefinito. Non si ha una preferenza e si lascia che sia il browser a stabilire la priorità appropriata.
Alcuni esempi di implementazione.
Il confronto seguente mostra la pagina di Google Flights con un'immagine di sfondo LCP caricata con e senza l'utilizzo di priority hints.
Un esempio di ottimizzazione derivante dall'utilizzo dei priority hints
Priority Hints: una nuova opportunità
Prima di tutto, una nota importante: l'attributo fetchpriority indica un suggerimento e non una direttiva. Il browser cercherà di rispettare le preferenze dello sviluppatore, ma è anche possibile che questo non si verifichi, ad esempio in caso di conflitti.
I priority hints rappresentano una nuova opportunità per il miglioramento delle prestazioni e dell'esperienza dell'utente ottenendo la sequenza di caricamento desiderata.
Per approfondire
X
Alessio Pomaro