Assisti il browser con suggerimenti sulle risorse

Nell'ultimo modulo sull'ottimizzazione del caricamento delle risorse, hai scoperto come varie risorse della pagina, come CSS e JavaScript, possono influire sulla velocità di caricamento della pagina e come puoi ottimizzarle e ottimizzare la loro distribuzione per velocizzare il rendering di una pagina. È il momento perfetto per passare a un aspetto più avanzato del caricamento delle risorse, che consiste nell'aiutare il browser a caricarle più velocemente utilizzando i suggerimenti per le risorse.

Gli hint delle risorse possono aiutare gli sviluppatori a ottimizzare ulteriormente il tempo di caricamento della pagina comunicando al browser come caricare e dare la priorità alle risorse. Il primo insieme di suggerimenti per le risorse, come preconnect e dns-prefetch, è stato il primo a essere introdotto. Nel tempo, tuttavia, preload e l'API Fetch Priority hanno seguito per fornire funzionalità aggiuntive.

Gli hint delle risorse indicano al browser di eseguire in anticipo determinate azioni che potrebbero migliorare le prestazioni di caricamento. I suggerimenti per le risorse possono eseguire azioni come ricerche DNS anticipate, connettersi ai server in anticipo e persino recuperare le risorse prima che il browser le rilevi normalmente.

I suggerimenti per le risorse possono essere specificati in HTML, in genere all'inizio dell'elemento <head>, o impostati come intestazione HTTP. Ai fini di questo modulo, sono trattati preconnect, dns-prefetch e preload, nonché i comportamenti di recupero speculativo forniti da prefetch.

preconnect

L'hint preconnect viene utilizzato per stabilire una connessione a un'altra origine da cui recuperi risorse critiche. Ad esempio, potresti ospitare le tue immagini o i tuoi asset su una CDN o un'altra origine diversa:

<link rel="preconnect" href="https://example.com">

Utilizzando preconnect, prevedi che il browser intenda connettersi a un server cross-origin specifico in un futuro molto prossimo e che il browser debba aprire la connessione il prima possibile, idealmente prima di attendere che lo faccia il parser HTML o lo scanner di precaricamento.

Se in una pagina hai una grande quantità di risorse multiorigine, utilizza preconnect per le risorse più importanti per la pagina corrente.

Uno screenshot dei tempi di connessione per una risorsa nel pannello di rete di Chrome DevTools. La configurazione della connessione include tempo di stallo, negoziazione del proxy, ricerca DNS, configurazione della connessione e negoziazione TLS.
Una visualizzazione delle tempistiche di connessione come mostrato nel pannello di rete di Chrome DevTools. I tempi all'interno del riquadro rosso sono quelli coinvolti nella configurazione di una connessione con un server cross-origin, che preconnect può alleviare stabilendo le connessioni prima, anziché al momento della scoperta della risorsa cross-origin.

Un caso d'uso comune per preconnect è Google Fonts. Google Fonts consiglia di preconnect al dominio https://fonts.googleapis.com che pubblica le dichiarazioni @font-face e al dominio https://fonts.gstatic.com che pubblica i file dei caratteri.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

L'attributo crossorigin viene utilizzato per indicare se una risorsa deve essere recuperata utilizzando la condivisione delle risorse tra origini (CORS). Quando utilizzi il suggerimento preconnect, se la risorsa scaricata dall'origine utilizza CORS, ad esempio i file dei caratteri, devi aggiungere l'attributo crossorigin al suggerimento preconnect.

dns-prefetch

Sebbene l'apertura anticipata delle connessioni ai server cross-origin possa migliorare significativamente il tempo di caricamento iniziale della pagina, potrebbe non essere ragionevole o possibile stabilire connessioni a molti server cross-origin contemporaneamente. Se temi di utilizzare eccessivamente preconnect, un suggerimento per le risorse molto meno costoso è il suggerimento dns-prefetch.

Come suggerisce il nome, dns-prefetch non stabilisce una connessione a un server cross-origin, ma esegue in anticipo la ricerca DNS. Una ricerca DNS si verifica quando un nome di dominio viene risolto nel suo indirizzo IP sottostante. Sebbene i livelli di cache DNS a livello di dispositivo e rete contribuiscano a rendere questo processo generalmente rapido, richiede comunque un po' di tempo.

<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

Le ricerche DNS sono piuttosto economiche e, a causa del loro costo relativamente basso, in alcuni casi potrebbero essere uno strumento più appropriato di un preconnect. In particolare, può essere un suggerimento per le risorse utile da utilizzare nei casi di link che rimandano ad altri siti web che ritieni l'utente seguirà probabilmente. dnstradamus è uno strumento che esegue questa operazione automaticamente utilizzando JavaScript e utilizza l'API Intersection Observer per inserire suggerimenti dns-prefetch nell'HTML della pagina corrente quando i link ad altri siti web vengono visualizzati nel viewport dell'utente.

preload

L'istruzione preload viene utilizzata per avviare una richiesta anticipata di una risorsa necessaria per il rendering della pagina:

<link rel="preload" href="/lcp-image.jpg" as="image">

Le direttive preload devono essere limitate alle risorse critiche scoperte in ritardo. I casi d'uso più comuni sono i file di caratteri, i file CSS recuperati tramite dichiarazioni @import o le risorse CSS background-image che hanno maggiori probabilità di essere Largest Contentful Paint (LCP) candidates. In questi casi, questi file non vengono rilevati dallo scanner di precaricamento perché la risorsa viene citata in risorse esterne.

Analogamente a preconnect, la direttiva preload richiede l'attributo crossorigin se precarichi una risorsa CORS, ad esempio i caratteri. Se non aggiungi l'attributo crossorigin o lo aggiungi per richieste non CORS, la risorsa viene scaricata dal browser due volte, sprecando larghezza di banda che avrebbe potuto essere utilizzata meglio per altre risorse.

<link rel="preload" href="/font.woff2" as="font" crossorigin>

Nel precedente snippet HTML, il browser riceve l'istruzione di precaricare /font.woff2 utilizzando una richiesta CORS, anche se /font.woff2 si trova sullo stesso dominio.

prefetch

La direttiva prefetch viene utilizzata per avviare una richiesta a bassa priorità per una risorsa che verrà probabilmente utilizzata per le navigazioni future:

<link rel="prefetch" href="/next-page.css" as="style">

Questa direttiva segue in gran parte lo stesso formato della direttiva preload, ma l'attributo rel dell'elemento <link> utilizza invece il valore "prefetch". A differenza della direttiva preload, tuttavia, prefetch è in gran parte speculativa in quanto avvii il recupero di una risorsa per una navigazione futura che potrebbe o meno verificarsi.

A volte prefetch può essere utile, ad esempio se hai identificato un flusso utente sul tuo sito web che la maggior parte degli utenti segue fino al completamento, un prefetch per una risorsa di rendering critica per le pagine future può contribuire a ridurre i tempi di caricamento.

API Fetch Priority

Puoi utilizzare Fetch Priority API tramite l'attributo fetchpriority per aumentare la priorità di una risorsa. Puoi utilizzare l'attributo con gli elementi <link>, <img> e <script>.

<div class="gallery">
  <div class="poster">
    <img src="img/poster-1.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>

Per impostazione predefinita, le immagini vengono recuperate con una priorità inferiore. Dopo il layout, se l'immagine si trova all'interno dell'area visibile iniziale, la priorità viene aumentata a Alta. Nel precedente snippet HTML, fetchpriority immediatamente indica al browser di scaricare l'immagine LCP più grande con una priorità Alta, mentre le immagini in miniatura meno importanti vengono scaricate con una priorità inferiore.

I browser moderni caricano le risorse in due fasi. La prima fase è riservata alle risorse critiche e termina una volta scaricati ed eseguiti tutti gli script di blocco. Durante questa fase, il download delle risorse con priorità Bassa potrebbe subire ritardi. Utilizzando fetchpriority="high" puoi aumentare la priorità di una risorsa, consentendo al browser di scaricarla durante la prima fase.

Demo dei suggerimenti sulle risorse

Verifica le tue conoscenze

A cosa serve il suggerimento per la risorsa preconnect?

Esegue solo una ricerca DNS per il server cross-origin.
Apre una connessione a un server cross-origin, inclusa la ricerca DNS, nonché la negoziazione della connessione e di TLS prima che il browser la rilevi.

Che cosa ti consente di fare l'API Fetch Priority?

Specifica la priorità relativa per gli elementi <link>, <img> e <script>.
Specifica la priorità con cui viene scaricato l'HTML della pagina corrente.

Quando conviene utilizzare il suggerimento prefetch?

Quando hai un'alta confidenza che le risorse o le pagine che intendi precaricare siano necessarie all'utente.
Se l'utente non ha dichiarato una preferenza esplicita per la riduzione dell'utilizzo dei dati.
Per tutte le risorse o le pagine di cui l'utente potrebbe aver bisogno, indipendentemente dal fatto che ne abbia effettivamente bisogno in futuro.

A seguire: rendimento delle immagini

A questo punto, probabilmente ti senti abbastanza sicuro delle tue conoscenze in merito alle considerazioni generali sul rendimento per quanto riguarda l'HTML della pagina, l'elemento <head> e i suggerimenti per le risorse. Tuttavia, esistono ottimizzazioni aggiuntive specifiche per i diversi tipi di risorse che le pagine caricano comunemente. Nel prossimo modulo verrà trattato il tema del rendimento delle immagini, che può aiutarti a fare in modo che le immagini del tuo sito web vengano caricate il più rapidamente possibile, indipendentemente dal dispositivo dell'utente.