Precarica le risorse per velocizzare le navigazioni future

Scopri di più sul suggerimento della risorsa rel=prefetch e su come utilizzarlo.

Demián Renzulli

Jeremy Wagner

La ricerca dimostra che tempi di caricamento più rapidi si traducono in tassi di conversione più elevati e migliori esperienze utente. Se sai come gli utenti si spostano nel tuo sito web e quali sono le pagine che probabilmente visiteranno dopo, puoi migliorare i tempi di caricamento delle navigazioni future scaricando in anticipo le risorse per queste pagine.

Questa guida spiega come farlo con <link rel=prefetch>, un suggerimento delle risorse che consente di implementare il precaricamento in modo semplice ed efficiente.

Migliora la navigazione con rel=prefetch

L'aggiunta di <link rel=prefetch> a una pagina web indica al browser di scaricare intere pagine o alcune risorse (come script o file CSS) di cui l'utente potrebbe avere bisogno in futuro:

<link rel="prefetch" href="/articles/" as="document">

Il hint prefetch consuma più byte per le risorse che non sono immediatamente necessarie, quindi questa tecnica deve essere applicata in modo ponderato. precarica le risorse solo quando hai la certezza che gli utenti ne avranno bisogno. Valuta la possibilità di non eseguire il precaricamento quando gli utenti utilizzano connessioni lente. Puoi rilevarlo con l'API Network Information.

Esistono diversi modi per stabilire quali link precaricare. Il più semplice consiste nel precaricare il primo link o i primi link nella pagina corrente. Esistono anche librerie che utilizzano approcci più sofisticati, spiegati più avanti in questo post.

Casi d'uso

Precaricamento di pagine successive in corso...

Precarica i documenti HTML quando le pagine successive sono prevedibili, in modo che, quando si fa clic su un link, la pagina venga caricata immediatamente.

Ad esempio, in una pagina della scheda di prodotto, puoi precaricare la pagina del prodotto più popolare dell'elenco. In alcuni casi, la navigazione successiva è ancora più facile da prevedere: nella pagina del carrello degli acquisti, la probabilità che un utente visiti la pagina di pagamento è in genere elevata, il che la rende una buona candidata per il precaricamento.

Sebbene il precaricamento delle risorse utilizzi larghezza di banda aggiuntiva, può migliorare la maggior parte delle metriche sulle prestazioni. Time to First Byte (TTFB) è spesso molto inferiore, in quanto la richiesta del documento genera un successo della cache. Poiché il TTFB sarà più basso, anche le metriche successive basate sul tempo saranno spesso più basse, tra cui Largest Contentful Paint (LCP) e First Contentful Paint (FCP).

Precaricamento di asset statici

Precarica gli asset statici, come script o fogli di stile, quando possono essere previste sezioni successive che l'utente potrebbe visitare. Ciò è particolarmente utile quando questi asset sono condivisi su molte pagine.

Ad esempio, Netflix sfrutta il tempo che gli utenti trascorrono sulle pagine disconnesse per precaricare React, che verrà utilizzato una volta effettuato l'accesso. Grazie a ciò, il team ha ridotto del 30% il tempo all'interattività per le navigazioni future.

L'effetto del precaricamento di asset statici sulle metriche delle prestazioni dipende dalla risorsa precaricata:

• Il precaricamento delle immagini può ridurre significativamente i tempi LCP per gli elementi immagine LCP.
• Il precaricamento dei fogli di stile può migliorare sia FCP che LCP, in quanto il tempo di download del foglio di stile verrà eliminato. Poiché i fogli di stile bloccano il rendering, possono ridurre il valore LCP quando vengono precaricati. Nei casi in cui l'elemento LCP della pagina successiva sia un'immagine di sfondo CSS richiesta tramite la proprietà background-image, l'immagine verrà precaricata anche come risorsa dipendente del foglio di stile precaricato.
• Il precaricamento di JavaScript consente di elaborare lo script precaricato molto prima rispetto a quanto accadrebbe se fosse necessario recuperarlo prima dalla rete durante la navigazione. Questa operazione può avere effetto sull'interazione con Next Paint (INP) di una pagina. Nei casi in cui il markup viene eseguito sul client tramite JavaScript, l'LCP può essere migliorato riducendo i ritardi nel caricamento delle risorse e il rendering lato client del markup contenente l'elemento LCP di una pagina può avvenire più rapidamente.
• Il precaricamento dei caratteri web che non sono già utilizzati nella pagina corrente può eliminare le variazioni del layout. Nei casi in cui viene utilizzato font-display: swap;, il periodo di scambio del carattere viene eliminato, il che permette di velocizzare il rendering del testo ed eliminare le variazioni del layout. Se una pagina futura utilizza il carattere precaricato e l'elemento LCP della pagina è un blocco di testo che utilizza un carattere web, anche l'LCP per quell'elemento sarà più veloce.

Precaricamento di blocchi JavaScript on demand

La suddivisione del codice nei bundle JavaScript consente di caricare inizialmente solo parti di un'app e il caricamento lento del resto. Se utilizzi questa tecnica, puoi applicare il precaricamento a route o componenti che non sono immediatamente necessari, ma che verranno probabilmente richiesti a breve.

Ad esempio, se hai una pagina che contiene un pulsante che apre una finestra di dialogo contenente un selettore di emoji, puoi dividerlo in tre blocchi JavaScript: Home, finestra di dialogo e selettore. Inizialmente è possibile caricare la home page e la finestra di dialogo, mentre il selettore potrebbe essere caricato on demand. Strumenti come webpack consentono di indicare al browser di precaricare questi blocchi on demand.

Come implementare rel=prefetch

Il modo più semplice per implementare prefetch è aggiungere un tag <link> a <head> del documento:

<head>
  ...
  <link rel="prefetch" href="/articles/" as="document">
  ...
</head>

L'attributo as consente al browser di impostare le intestazioni corrette e di determinare se la risorsa si trova già nella cache. Valori di esempio per questo attributo includono: document, script, style, font, image e altri.

Puoi anche avviare il precaricamento tramite l'intestazione HTTP Link:

Link: </css/style.css>; rel=prefetch

Un vantaggio della specifica di un hint di precaricamento nell'intestazione HTTP è che il browser non ha bisogno di analizzare il documento per trovare il suggerimento di risorsa, il che può offrire piccoli miglioramenti in alcuni casi.

Precaricare i moduli JavaScript con i commenti magici del webpack

webpack ti consente di precaricare script per percorsi o funzionalità che ragionevolmente determinati utenti visiteranno o utilizzeranno a breve.

Il seguente snippet di codice esegue il caricamento lento di una funzionalità di ordinamento dalla libreria lodash per ordinare un gruppo di numeri che verranno inviati da un modulo:

form.addEventListener("submit", e => {
  e.preventDefault()
  import('lodash.sortby')
    .then(module => module.default)
    .then(sortInput())
    .catch(err => { alert(err) });
});

Invece di attendere il comando "Invia" che si verifichi per caricare questa funzionalità, puoi precaricare la risorsa per aumentare le probabilità che sia disponibile nella cache al momento dell'invio del modulo da parte dell'utente. webpack consente l'utilizzo dei commenti magici all'interno di import():

form.addEventListener("submit", e => {
   e.preventDefault()
   import(/* webpackPrefetch: true */ 'lodash.sortby')
         .then(module => module.default)
         .then(sortInput())
         .catch(err => { alert(err) });
});

Questo indica a webpack di inserire il tag <link rel="prefetch"> nel documento HTML:

<link rel="prefetch" as="script" href="1.bundle.js">

I vantaggi in termini di prestazioni del precaricamento dei blocchi on demand sono leggermente specifici, ma in generale, ci si potrebbe aspettare di vedere risposte più rapide alle interazioni che dipendono da quei blocchi on demand, poiché saranno immediatamente disponibili. A seconda della natura dell'interazione, ciò potrebbe conferire un vantaggio all'INP di una pagina.

Il precaricamento in generale tiene conto anche dell'assegnazione della priorità delle risorse complessiva. Una risorsa precaricata viene precaricata con la priorità più bassa possibile. Di conseguenza, le risorse precaricate non si contenderanno larghezza di banda per le risorse richieste dalla pagina corrente.

Precaricamento intelligente con quicklink e Guess.js

Puoi anche implementare un precaricamento più intelligente con librerie che utilizzano prefetch in background:

• quicklink utilizza l'API Intersection Observer per rilevare quando i link entrano nell'area visibile e precarica le risorse collegate durante i tempi di inattività. Bonus: il quicklink pesa meno di 1 kB.
• Guess.js utilizza i report di analisi per creare un modello predittivo utilizzato per precaricare in modo intelligente solo ciò che è probabile che l'utente abbia bisogno.

Sia quicklink che Guess.js utilizzano l'API Network Information per evitare il precaricamento se un utente si trova su una rete lenta o se ha attivato Save-Data.

Precaricamenti dietro le quinte

Gli hint delle risorse non sono istruzioni obbligatorie e spetta al browser decidere se e quando devono essere eseguiti.

Puoi utilizzare il precaricamento più volte nella stessa pagina. Il browser mette in coda tutti i suggerimenti e richiede ogni risorsa quando è inattiva. In Chrome, se il caricamento di un precaricamento non è terminato e l'utente accede alla risorsa di precaricamento destinata, il carico in corso viene rilevato come navigazione dal browser (altri fornitori di browser potrebbero implementare questa funzione in modo diverso).

Il precaricamento viene eseguito nella la priorità, quindi le risorse precaricate non sono in concorrenza per la larghezza di banda con le risorse richieste nella pagina corrente.

I file precaricati vengono archiviati nella cache HTTP o nella cache in memoria (a seconda che la risorsa sia memorizzabile o meno nella cache), per un periodo di tempo che varia in base al browser. Ad esempio, in Chrome le risorse vengono conservate per cinque minuti, dopodiché vengono applicate le normali regole Cache-Control per la risorsa.

Conclusione

L'utilizzo di prefetch può migliorare notevolmente i tempi di caricamento delle navigazioni future e persino fare in modo che le pagine vengano caricate all'istante. prefetch è ampiamente supportato nei browser moderni, il che lo rende una tecnica interessante per migliorare l'esperienza di navigazione per molti utenti. Questa tecnica richiede il caricamento di byte aggiuntivi che potrebbero non essere utilizzati, quindi fai attenzione quando la utilizzi. farlo solo quando necessario e, idealmente, solo su reti veloci.