Priority Hints, l’attributo che può migliorare i Core Web Vitals del sito

SEO Gennaro Mancini 9 Novembre 2021 Tempo di lettura : 7 minuti

Mettici alla prova

Analizza il tuo sito

Seleziona la lingua del database:

Si chiama Priority Hints ed è un nuovo attributo che promette di velocizzare il caricamento di risorse cruciali per i nostri siti, capace di ridurre di 2 secondi il download di un’immagine above the fold, secondo quanto raccontano fonti di Google: scopriamo insieme che cos’è l’attributo HTML Priority Hints, come funziona e come possiamo sfruttare le sue potenzialità per migliorare le metriche Core Web Vitals delle nostre pagine.

Che cos’è Priority Hints

Priority Hints è una funzione sperimentale disponibile in origin trial su Chrome 96+: dal punto di vista tecnico, è una serie di segnali basati sul markup schema disponibili tramite l’attributo importance, che gli sviluppatori possono utilizzare per comunicare l’importanza di una particolare risorsa al browser, che in questo modo gestisce il caricamento.

L’articolo con cui Google presenta Priority Hints è un vero e proprio invito all’utilizzo di tale funzione, che può ottimizzare il caricamento delle risorse e quindi aiutare a migliorare i Core Web Vitals e l’esperienza dell’utente, come promettono gli autori del team del browser Chrome.

Il lavoro del browser oggi

Attualmente, quando un browser analizza una pagina Web e inizia a scoprire e scaricare risorse come immagini, script o CSS, assegna loro un valore di priority di fetch (recupero) nel tentativo di scaricare le risorse in un ordine ottimale.

Queste priorità possono dipendere dal tipo di risorsa e dalla posizione in cui si trova nel documento: ad esempio, le immagini in-viewport possono avere una priorità High (elevata), mentre la priorità per i <link> CSS caricati in anticipo e che bloccano il rendering nel campo <head> potrebbe essere Very High (molto elevata). I browser sono “abbastanza bravi nell’assegnare priorità che funzionano bene, ma potrebbero non essere ottimali in tutti i casi”, dicono i Googler.

Gli sviluppatori possono esercitare una influenza limitata sulla priorità delle risorse utilizzando preload e preconnect: preload (precaricamento) consente di comunicare al browser le risorse critiche che si desidera caricare prima che vengano scoperte naturalmente, ed è particolarmente utile per le risorse non facilmente individuabili, come i caratteri inclusi nei fogli di stile, le immagini di sfondo o le risorse caricate da uno script. Preconnect aiuta a tenere in caldo le connessioni ai server cross-origine, può aiutare a migliorare le metriche come Time-to-first-byte ed è utile quando si conosce un’origine, ma non necessariamente l’URL esatto, di una risorsa che sarà necessaria.

La priorità delle risorse

La tempistica dietro alla sequenza di download per ogni risorsa sulla pagina dipende da vari fattori e ad assegnare le priorità è il browser, che scarica le risorse con la stessa priorità calcolata nell’ordine in cui vengono rilevate.

La logica di calcolo del browser è influenzata da alcuni fattori, e ad esempio:

CSS, caratteri, script, immagini e risorse di terze parti vengono assegnate priorità diverse.
Anche la posizione o l’ordine in cui si fa riferimento alle risorse nel documento influisce sulla priorità delle risorse.
Il suggerimento preload sulla risorsa aiuta il browser a scoprire una risorsa più velocemente e quindi a caricarla prima che il documento la carichi e influisca sulla priorità.
Gli attributi async e defer permettono di modificare il calcolo della priorità.

Le tecniche per influenzare le priorità del browser

Conoscere la logica di prioritizzazione del browser ci consente di scoprire quali sono le tecniche esistenti per influenzare o modificare l’ordine dei download. Attualmente possiamo:

Posizionare i tag delle risorse come <script> e <link> in base all’ordine in cui desideriamo scaricarle, perché le risorse con la stessa priorità vengono generalmente caricate nell’ordine in cui vengono rilevate.
Utilizzare l’hint preload sulla risorsa per scaricare le risorse necessarie in anticipo, in particolare per le risorse che non vengono rilevate facilmente in anticipo dal browser.
Usare async o defer per il download degli script senza bloccare altre risorse.
Impostare il lazy loading del contenuto below the fold, in modo che il browser possa utilizzare la larghezza di banda disponibile per risorse above the fold più critiche.

Queste tecniche aiutano a controllare il calcolo delle priorità del browser, migliorando così le prestazioni e i Core Web Vitals: ad esempio, quando un’immagine di sfondo critica viene precaricata, può essere rilevata molto prima, migliorando il Largest Contentful Paint (LCP).

Tuttavia, a volte tali soluzioni potrebbero non essere sufficienti per assegnare la priorità alle risorse in modo ottimale per la nostra applicazione, e in alcuni scenari potrebbe rivelarsi quanto mai utile avere la possibilità di suggerire la priorità, come ad esempio:

Abbiamo diverse immagini above the fold, ma non è necessario che tutte abbiano la stessa priorità – come un carosello di immagini, dove solo la prima immagine visibile necessita di una priorità maggiore rispetto alle altre.
Hero images all’interno del viewport che iniziano con una priorità bassa; dopo che il layout è completo, Chrome scopre che sono nel viewport e ne aumenta la priorità, ma questo di solito aggiunge un ritardo significativo al caricamento dell’immagine.
Dichiarare gli script come async o defer indica al browser di caricarli in modo asincrono. Tuttavia, a questi script viene assegnata anche una priorità “bassa”, ma potrebbe servirci aumentare la loro priorità garantendo al tempo stesso il download asincrono, in particolare per gli script critici per l’esperienza dell’utente.
L’API JavaScript fetch(.) permette di recuperare risorse o dati in modo asincrono e il browser assegna al recupero una priorità alta. Potrebbero però esserci situazioni in cui non desideriamo che tutti i fetches siano eseguiti con priorità alta, come quando si eseguono chiamate API in background e combinandole con chiamate API che rispondono all’input dell’utente (ad esempio il completamento automatico). Con i priority hints possiamo contrassegnare le chiamate API in background come priorità bassa e le chiamate API interattive come priorità alta.
Il browser assegna a CSS e font una priorità elevata, ma tutte queste risorse potrebbero non essere ugualmente importanti o necessarie per LCP, e con i suggerimenti di priorità è possibile ridurre la priorità di alcune di queste risorse.

Come funzionano i Priority Hints per caricare le risorse

Insomma, gli editori possono velocizzare la scoperta delle risorse delle pagine web utilizzando <link rel=preload> e possono anche indicare come e quando gli script vengono scaricati ed eseguiti con l’uso degli attributi “async” e “defer”, ma finora non potevano inviare un segnale per dire al browser quali risorse sono importanti e quali no.

Lo scenario attuale appena descritto cambia con Priority Hints, i suggerimenti di priorità che sono un segnale basato sul markup e sull’attributo Importance, e che possono essere usati anche tramite JavaScript e l’API Fetch per influenzare la priorità dei recuperi delle risorse effettuati per i dati.

Si tratta in sintesi di una funzione che permette direttamente a sviluppatori ed editor di impostare la priorità preferita per le risorse da caricare e di suggerire al browser l’importanza relativa di una risorsa.

I priority hints possono funzionare in integrazione con preload, spiega l’articolo: ad esempio, anche con preload un’immagine Largest Contentful Paint avrà comunque una priorità bassa, e se viene messa dietro da altre risorse anticipate a bassa priorità, l’utilizzo di priority hints può comunque aiutare la velocità di caricamento dell’immagine.

Il valore dell’attributo Importance

Con la funzione sperimentale per i priority hints disponibile come origin trial in Chrome è quindi possibile fornire un suggerimento di priorità grazie all’attributo importance, che può essere usato su elementi come link, img, script e tag iframe e permette di specificare la priorità per i tipi di risorse come CSS, caratteri, script, immagini e iframe quando vengono scaricati utilizzando i tag supportati.

Sono tre i valori di importanza che possiamo attribuire:

High, se per noi quella risorsa ha una priorità elevata e desideriamo che il browser le dia la priorità (a condizione che l’euristica del browser non impedisca che ciò accada).
Low, per le risorse con priorità bassa, che il browser può trattare successivamente (sempre se l’euristica lo consente)
Auto, il valore predefinito che possiamo usare se non abbiamo una preferenza e vogliamo che sia il browser a decidere la priorità appropriata.

In pratica, quindi, l’attributo importance modifica gli elementi della pagina dando al browser web un suggerimento sul valore o meno di un elemento specificato della pagina stessa, o lascia semplicemente che sia il browser a decidere la sua priorità.

Quando usare i suggerimenti di priorità per le risorse

L’attributo importance può servire ad affrontare una serie di scenari pratici in cui impostare una priorità può determinare un vantaggio per il nostro sito. Questi sono alcuni dei casi d’uso segnalati da Google.

Aumentare la priorità dell’immagine LCP

Specificando importance=”high”sull’elemento dell’immagine, anticipiamo il caricamento di LCP e di altre immagini critiche. Ad esempio, nel video seguente c’è un confronto che mostra la pagina di Google Flights con un’immagine di sfondo LCP caricata con e senza suggerimenti di priorità – con la priorità impostata su alta, il tempo di LCP è migliorato da 2,6 s a 1,9 s.

Ridurre la priorità delle immagini above the fold

È possibile utilizzare l’attributo per ridurre la priorità delle immagini above the fold che potrebbero non essere importanti, ad esempio in un carosello di immagini – in un esperimento, questo ha consentito di ridurre il tempo di caricamento di 2 secondi.

Ridurre la priorità delle risorse precaricate

Per impedire alle risorse precaricate di competere con altre risorse critiche, possiamo fornire un suggerimento per ridurre la loro priorità e usare questa tecnica con immagini, script e CSS.

Ridefinire le priorità degli script

Gli script necessari per rendere interattive alcune parti della pagina sono essenziali, ma non devono bloccare altre risorse: possiamo contrassegnarli come async con priorità alta. È bene ricordare che gli script non possono essere contrassegnati come asincroni se si basano su stati DOM specifici, ma anche che, se sono più in basso nella pagina, possono essere scaricati con una priorità inferiore.

Ridurre la priorità per i recuperi di dati non critici

Il browser esegue fetch con una priorità alta: se abbiamo di fetches che possono essere attivati contemporaneamente, è possibile utilizzare la priorità alta predefinita per i recuperi di dati più critici e abbassarla per i dati meno critici.

Aumentare la priorità degli script async

Attualmente, la semantica prevede l’uso di <link rel=”preload”> per lo script async, ma la priorità con l’attributo importance funziona in modo migliore.

Diminuire la priorità degli script di fine corpo

Questa strategia consente una migliore sequenza con le immagini.

I vantaggi SEO di priority hints

Utilizzare le funzionalità di priority hints permette di segnalare le priorità degli script importanti per le nostre pagine, rendendo migliore l’esperienza degli utenti perché il browser renderizzerà la pagina in modo più veloce e fluido.

Attualmente, questa feature è in una fase definita origin trial e sarà implementata in Chrome 96, il cui rilascio è previsto per il 21 novembre 2021, e sono comunque già disponibili su Chrome Canary, che è la versione di prova di Chrome.

In realtà, Google Chrome aveva già lanciato una prova di priority hints due anni fa, ma non ha ricevuto molta attenzione: è facile ipotizzare che ora, con il maggior peso su user experience e metriche Core Web Vitals in seguito all’aggiornamento Page Experience, ci sia un interesse maggiore per una funzione che permette di migliorare alcuni aspetti spesso critici per raggiungere le soglie ottimali, specialmente nel LCP.

Ci sono comunque alcuni chiarimenti da fare sul funzionamento di priority hints, soprattutto per comprenderne i vantaggi pratici anche per la SEO.

Il principale aspetto da evidenziare è che l’attributo importance è un suggerimento e non una direttiva: di base, il browser cercherà di rispettare le preferenze dello sviluppatore, ma c’è anche la possibilità che applichi le sue preferenze per la priorità delle risorse come ritenuto necessario in caso di conflitti.

Dal punto di vista tecnico, poi, i priority hints non devono essere confusi con preload, perché:

Preload imposta un recupero obbligatorio e non è un suggerimento;
È più facile osservare e misurare gli effetti di un preload.

I suggerimenti di priorità possono integrare i preload aumentando la granularità dell’assegnazione delle priorità: ad esempio, se abbiamo già specificato un precarico nella parte superiore della pagina per un’immagine LCP, un suggerimento di priorità “alta” potrebbe non comportare guadagni significativi. Ma se il precarico era impostato su altre risorse meno importanti, un suggerimento ad alta priorità può aumentare l’LCP. In particolare, se un’immagine critica è un’immagine di sfondo CSS dovrebbe essere impostata con preload E importance = “high”.