Accelera il caricamento delle risorse con suggerimenti di priorità e fetchpriority

Quanto velocemente vengono caricate le tue risorse più critiche?

Questa domanda esatta ha i proprietari di siti Web (e gli esperti web esperti) su spilli e aghi. E si dà il caso che sia ciò che crea o rompe il tuo sito Web nei primi millisecondi.

Quando si tratta di ottimizzare il caricamento delle risorse, sono disponibili due opzioni:

1. Affidati interamente ai meccanismi dei browser per scaricare e recuperare le risorse in un ordine ottimale.
2. Cerca di aiutarli implementando suggerimenti sulle risorse.

Sfortunatamente, per quanto buoni siano i browser moderni, ogni sito/applicazione differisce per configurazione e contesto. E mentre sono abbastanza bravi nell'assegnare priorità alle risorse, in alcuni casi non è abbastanza.

Purtroppo, i suggerimenti sulle risorse forniscono un'influenza limitata sulla definizione delle priorità delle risorse.

Fortunatamente, c'è un nuovo suggerimento che puoi aggiungere alla tua casella degli strumenti per le prestazioni web: Suggerimenti prioritari.

E in questo articolo imparerai di più su:

• Quali sono i suggerimenti prioritari;
• Quando usarli;
• Come implementarli tramite fetchpriority;
• Come puoi testarli sul tuo sito.

Cominciamo!

Cosa sono i suggerimenti prioritari?

I suggerimenti di priorità sono un segnale che consente ai proprietari e agli sviluppatori di siti Web di indicare la priorità delle risorse (ad es. immagini, caratteri, CSS, script e iframe) quando i browser le caricano.

Il browser deve scaricare tutti i tipi di risorse nel processo di creazione di una pagina web. Come risorsa prioritaria, richiede e scarica prima il documento HTML.

Ma come fa un browser a determinare cosa caricare dopo?

Bene, i browser hanno una serie di priorità predeterminate per ogni tipo di risorsa:

Queste priorità predefinite di solito funzionano abbastanza bene, il che si traduce in buone prestazioni web.

Tuttavia, come menzionato da Addy Osmani nel suo articolo sui suggerimenti per la priorità, i browser possono fare ipotesi abbastanza fondate su cosa recuperare dopo.

Ma loro non conoscono il tuo progetto bene quanto te.

Quindi potrebbe essere necessaria una piccola messa a punto:

"I browser come Chrome hanno un'euristica per tentare di recuperare le risorse con la priorità appropriata in base a segnali come se si trovano nel viewport. Detto questo, senza Priority Hints, Chrome è in grado di aumentare la priorità per le immagini in viewport solo dopo il layout è stato completato. Molto spesso è troppo tardi e, a questo punto, può competere con tutto il resto. Un altro motivo per considerare l'utilizzo dei suggerimenti è che come autore di una pagina, probabilmente sai cosa è più importante che i tuoi utenti vedano per primo e può informare il browser in modo che possa ottimizzare per il tuo caso d'uso."

In precedenza, l'unica cosa che potevi fare era usare il precarico o la preconnessione.

E sebbene il precaricamento sia una direttiva obbligatoria che i browser devono rispettare, in alcuni casi la risorsa precaricata può comunque avere una priorità bassa.

Ad esempio, un'immagine Largest Contentful Paint (LCP) precaricata può avere una priorità bassa ed essere respinta da altre risorse ad alta priorità. In questi casi, i suggerimenti per la priorità possono integrare perfettamente il precaricamento e aiutare la rapidità con cui le risorse vengono caricate.

Ecco un webinar su Priority Hints, in cui Pat Meenan parla di Priority Hints in Chrome e li chiama persino "un cheat code" per LCP:

Questo è un ottimo esempio del potere dei suggerimenti prioritari.

Ora, vediamo quando dovresti implementare i suggerimenti prioritari nella tua strategia per le prestazioni web.

Quando utilizzare i suggerimenti prioritari

Ci sono 5 scenari principali in cui i suggerimenti prioritari potrebbero aiutare, secondo Google:

1. Hai diverse immagini above the fold, ma non tutte devono avere la stessa priorità. Ad esempio, in un carosello di immagini, solo la prima immagine visibile necessita di una priorità maggiore rispetto alle altre.
   
2. Le immagini dell'eroe all'interno del viewport iniziano con una priorità bassa. Dopo che il layout è completo, Chrome scopre che sono nel viewport e aumenta la loro priorità (sfortunatamente, gli strumenti di sviluppo mostrano solo la priorità finale - WebPageTest mostrerà entrambe). Questo di solito aggiunge un ritardo significativo al caricamento dell'immagine. Fornire il suggerimento di priorità nel markup consente all'immagine di iniziare con una priorità elevata e di iniziare a caricarsi molto prima.

Nota: La dichiarazione di script come asincroni o differiti indica al browser di caricarli in modo asincrono. Tuttavia, come si vede nella figura sopra, a questi script viene assegnata anche una priorità "bassa". Potresti voler aumentare la loro priorità garantendo al contempo il download asincrono, in particolare per tutti gli script critici per l'esperienza dell'utente.

Puoi utilizzare l'API JavaScript fetch() per recuperare risorse o dati in modo asincrono. Al recupero viene assegnata una priorità elevata dal browser. Potrebbero verificarsi situazioni in cui non si desidera che tutti i recuperi vengano eseguiti con priorità elevata e si preferisce invece utilizzare suggerimenti di priorità diversi. Questo può essere utile quando si eseguono chiamate API in background e le si mescolano con chiamate API che rispondono all'input dell'utente, come con il completamento automatico. Le chiamate API in background possono essere contrassegnate come priorità bassa e le chiamate API interattive contrassegnate come priorità alta.

Il browser assegna ai CSS e ai caratteri una priorità elevata, ma tutte queste risorse potrebbero non essere ugualmente importanti o richieste per LCP. È possibile utilizzare i suggerimenti per la priorità per ridurre la priorità di alcune di queste risorse.

Quasi tutti i siti Web rientrano nei primi due scenari. Per determinare se dovresti lavorare sul resto, scava più a fondo nel tuo codice (HTML/JS) o chiedi aiuto a uno sviluppatore web.

Come implementare i suggerimenti per la priorità: l'attributo fetchpriority

È possibile implementare i suggerimenti per la priorità utilizzando l'attributo HTML fetchpriority.

Puoi utilizzare l'attributo con:

• collegamento
• img
• sceneggiatura
• tag iframe

L'attributo fetchpriority accetta uno dei tre valori seguenti:

• alto: indica che ritieni la risorsa critica e desideri che il browser le dia la priorità.
• basso: segnala che ritieni la risorsa meno importante e desideri che il browser la deprioritizzi.
• auto: un valore predefinito quando non hai una preferenza e lascia che sia il browser a decidere la priorità appropriata.

In alternativa, puoi utilizzare l'API JavaScript Fetch:

Alcune cose da tenere a mente quando si utilizza l'attributo fetchpriority :

• fetchpriority non garantisce che una risorsa con priorità più alta venga caricata prima di altre risorse (con priorità più bassa) dello stesso tipo.
• fetchpriority non dovrebbe essere utilizzato per controllare l'ordine di caricamento stesso.
• fetchpriority non è una direttiva obbligatoria e non può forzare il browser a recuperare una risorsa o impedirne il recupero. Spetta al browser se recupererà la risorsa o meno.

Importante: analogamente ai suggerimenti per le risorse, i suggerimenti per la priorità devono essere utilizzati con cautela, poiché un uso eccessivo potrebbe comportare rallentamenti anziché miglioramenti delle prestazioni.

Come testare il tuo sito con suggerimenti prioritari

Prima di eseguire i test, dovresti sapere che i suggerimenti per la priorità sono disponibili solo in Chrome 101 (o versioni successive) ed Edge 101 (o versioni successive):

Ora alla domanda in questione:

Il modo più semplice sarebbe utilizzare uno strumento, quindi non è necessario modificare il codice manualmente.

Fortunatamente, la funzione Esperimenti di WebPageTest ti consente di testare funzionalità di prestazioni come i suggerimenti prioritari senza modificare il codice.

Tuttavia, la funzione Esperimento di WebPageTest fa parte del loro abbonamento a pagamento, quindi è necessario pianificare alcune spese extra.

Al contrario, se hai competenze tecniche, puoi mettere a punto il codice del tuo sito da solo e testare l'impatto dei suggerimenti prioritari.

Assicurati di eseguire i test dopo ogni modifica apportata.

Ricapitolare

Abbiamo coperto molto terreno, quindi ecco un breve riepilogo dei punti più importanti:

• I suggerimenti per la priorità ti consentono di indicare la priorità delle risorse del tuo sito.
• I suggerimenti per la priorità possono aiutarti a velocizzare il caricamento di immagini above-the-fold, immagini hero (elemento LCP), script asincroni e differiti, CSS e file di caratteri.
• I suggerimenti per la priorità possono essere implementati tramite l'attributo fetchpriority.
• Puoi utilizzare l'attributo fetchpriority con tag link, img, script e iframe.
• L'attributo fetchpriority accetta uno dei tre valori: alto, basso e automatico.
• Attenzione: i suggerimenti prioritari dovrebbero essere implementati con parsimonia poiché il loro uso eccessivo potrebbe portare a una riduzione delle prestazioni piuttosto che a miglioramenti della velocità.
• fetchpriority non è una direttiva obbligatoria e non può forzare il browser a recuperare una risorsa o impedirne il recupero. Spetta al browser se recupererà la risorsa o meno.
• I suggerimenti per la priorità sono disponibili in Chrome 101 o versioni successive.

Per misurare l'impatto dei suggerimenti prioritari sul tuo sito, esegui dei test dopo ogni modifica.

Strumenti di test popolari:

• Approfondimenti sulla velocità della pagina
• GTMetrix
• Pagina WebTest
• Faro
• Pingdom