Cosa sono i Priority Hints? Come si usano per ottimizzare il caricamento delle risorse e i Core Web Vitals?

I Priority Hints sono degli attributi che possono essere aggiunti ai tag HTML delle risorse per indicare al browser la priorità di scaricamento. Questo va ad ottimizzare le prestazioni della pagina impattando nelle metriche dei Core Web Vitals e nella Page Experience.

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.

Preload, Preconnect e 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.

Resource Hints

This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element (<link>). These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should…

W3CIlya Grigorik

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.

Preload critical assets to improve loading speed

As soon as you open any web page, the browser requests an HTML document from a server, parses the contents of the HTML file, and submits separate requests for any other external references. The critical request chain represents the order of resources that are prioritized and fetched by the browser.

web.devHoussein Djirdeh

• 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.

1. 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.
2. 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.
3. 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.
4. 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.
5. 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.

Conclusioni

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

Optimizing resource loading with Priority Hints

Priority hints indicate the relative priority of resources to the browser. They can enable optimal loading and improve Core Web Vitals.

web.devLeena Sohoni

SMXL 2021: un intervento dedicato alla Page Experience

Sul palco virtuale di SMXL Milan ho portato alcune innovazione tecnologiche volte a migliorare le performance dei siti web, e quindi i Core Web Vitals e la Page Experience. In particolare ho parlato di rendering delle pagine, di Early Hints, di Signed Exchanges (SXGs), di Priority Hints e di HTTP/3.

Alessio PomaroAlessio Pomaro