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

Provaci
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