Di cosa parliamo
Vuoi migliorare il ranking e la user experience del tuo sito web? Inizia a utilizzare i Priority Hints, ovvero i suggerimenti prioritari di Google.
In questo articolo approfondiamo come i Priority Hints aiutano gli sviluppatori ad avere un controllo sempre più performante sul caricamento delle risorse, come nascono e come poterli sfruttare a seconda delle tue necessità!
Cosa sono i Priority Hints
I Priority Hints sono uno strumento innovativo recente ed utilissimo agli sviluppatori con cui è possibile indicare al browser l’importanza relativa di una risorsa rispetto alle altre risorse e avere quindi maggiore controllo sull’ordine di caricamento delle stesse.
Un esempio della loro straordinaria efficacia e di come ogni sviluppatore e web editor dovrebbe utilizzarli è stato fornito proprio dal team di Google Chrome: con l’attributo HTML Priority Hint inserito su un’immagine di sfondo, il tempo di download dell’immagine è diminuito di 1,9 secondi!
Come funzionano i Priority Hints
I browser assegnano ai CSS e ai fonts utilizzati un’alta priorità nella viewport (la parte del browser che viene visualizzata dall’utente).
Con i suggerimenti prioritari puoi stabilire una priorità maggiore a una o più immagini così come alle varie parti costitutive del layout html della tua pagina (div, h1, h2, h3, p, a, ecc…). Con questo sistema puoi velocizzare le tue pagine in base alle tue esigenze.
I Priority Hints possono essere inseriti, oltre che alle immagini, anche nei markup dei collegamenti, degli script, degli iframe.
Come viene influenzata la priorità nel browser
Con i suggerimenti prioritari viene introdotto l’attributo di importanza, “importance”, che permette di influenzare la priorità di caricamento di una risorsa.
Con l’attributo “importance” possono essere suggeriti ai browser i valori:
- high: la risorsa ha priorità se l’euristica del browser non impedisce che ciò accada
- low: la risorsa ha bassa di priorità se l’euristica del browser lo consente
- auto: il browser decide la priorità più appropriata per la risorsa
Gli sviluppatori possono influenzare la priorità delle risorse in modo limitato utilizzando gli attributi “preload” e “preconnect”.
Con “preload” si indica al browser quali sono le risorse critiche che si desidera scaricare prima che vengano scoperte durante la lettura della pagina (ad esempio i caratteri inclusi nei fogli di stile, le immagini in background o le risorse caricate dagli script). Ad esempio:
<link rel="preload" as="image" href="/immagine.jpg" importance="high">
Invece, “preconnect” torna utile quando si conosce un’origine ma non necessariamente l’URL esatto di una risorsa che sarà necessaria.
Altri attributi come async e defer vengono utilizzati per script esterni.
Quanto è presente l’attributo async gli script vengono caricati in maniera asincrona perciò la pagina può venire mostrata subito, senza aspettare nulla. Con l’attributo defer gli script che lo contengono vengono eseguiti nell’ordine con cui sono presenti nella pagina html dopo il parsing del codice da parte del browser.
Ad esempio:
<script src="script_esterno.js" async></script>
<script src="script_esterno.js" defer></script>
Come inserire i Priority Hints
Durante l’analisi effettuata dal browser vengono scoperte e scaricate risorse quali immagini, script, CSS e viene assegnato ad esse il livello di priorità presente nel markup. Ovviamente, questo normalmente avviene in modo automatico secondo una logica di importanza, ad esempio dando rilevanza ai link css riportati nell’head del layout html. Questo però non sempre è sufficiente per avere una pagina ottimizzata in modo ideale.
I Priority Hints vanno inseriti all’interno dei collegamenti, degli iframe. Questo vale anche per gli script a priorità bassa che vengono scaricati in modo asincrono o posticipato.
Quando utilizzare i Priority Hints
Puoi utilizzare i Priority Hints per impedire alle risorse precaricate di competere con altre risorse critiche e scegliere di ridurre la loro priorità in immagini, script e CSS.
Con tutte queste accortezze l’esperienza utente sarà nettamente migliorata perché potrai inserire i suggerimenti prioritari andando a indagare le heatmap (le mappe di calore) che ti aiutano ad identificare le aree delle pagine del tuo sito web in cui gli utenti focalizzano maggiormente il loro sguardo, così da dare priorità o meno (perché vale anche il processo inverso!) a: un’immagine, un pulsante o qualunque altro elemento di azione.
Alcuni esempi pratici per te
Un modo per vedere l’attributo per l’alta priorità “high” in azione è il seguente:
<img src="/logo.png” importance="high" alt="logo">
Un altro esempio che puoi sfruttare quando hai diverse immagini above the fold (la parte superiore delle pagine web visibile senza fare scroll con il mouse) ma vuoi definire un ordine di priorità differente per ciascuna di esse. Come può accadere nel caso di un carosello di immagini:
<ul class="carousel"><img class="carousel_item" src="1.jpg" importance="high" />
<img class=”carousel_item” src=”2.jpg” import=”low” />
<img class=”carousel_item” src=”3.jpg” import=”low” />
</ul>
La prima immagine sarà quella che verrà caricata per prima e poi seguiranno le altre!
In conclusione
Ottenere la sequenza di caricamento desiderata non sarà più un problema!
L’implementazione dei suggerimenti prioritari è agli inizi, dunque è bene essere consapevoli che il loro comportamento potrebbe cambiare nel tempo.
Sfrutta i Priority Hints per migliorare l’ottimizzazione SEO e i Core Web Vitals del tuo sito web: i tuoi utenti ti ringrazieranno e anche nella SERP sarai avvantaggiato rispetto a chi non ne fa uso!
