Precarica le risorse per velocizzare le navigazioni future

Scopri di più sul suggerimento per le risorse rel=prefetch e su come utilizzarlo.

Demián Renzulli

Jeremy Wagner

Le ricerche dimostrano che tempi di caricamento più rapidi generano tassi di conversione più elevati e migliori esperienze utente. Se conosci il modo in cui gli utenti si spostano nel tuo sito web e quali pagine visiteranno probabilmente in seguito, puoi migliorare i tempi di caricamento delle navigazioni future scaricando in anticipo le risorse per tali pagine.

Questa guida spiega come raggiungere questo obiettivo con <link rel=prefetch>, un suggerimento sulle risorse che ti 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 delle risorse (ad esempio script o file CSS) di cui l'utente potrebbe aver bisogno in futuro:

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

Il suggerimento prefetch consuma byte aggiuntivi per le risorse non immediatamente necessarie, quindi questa tecnica deve essere applicata in modo ponderato; precarica le risorse solo quando hai la certezza che gli utenti ne abbiano bisogno. Valuta la possibilità di non eseguire il precaricamento quando gli utenti utilizzano connessioni lente. Puoi rilevarlo utilizzando 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, illustrati più avanti in questo post.

casi d'uso

Precaricamento delle pagine successive

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 nell'elenco. In alcuni casi, la navigazione successiva è ancora più facile da prevedere: nella pagina del carrello degli acquisti, la probabilità che un utente visiti di solito è elevata ed è quindi una buona candidata per il precaricamento.

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

Precaricamento degli asset statici

Precarica gli asset statici, come script o fogli di stile, quando è possibile prevedere le sezioni successive che l'utente potrebbe visitare. Ciò è particolarmente utile quando questi asset sono condivisi tra molte pagine.

Ad esempio, Netflix sfrutta il tempo trascorso dagli utenti sulle pagine disconnesse per precaricare React che verrà utilizzato all'accesso degli utenti. Grazie a ciò, ha ridotto il tempo all'interattività del 30% per le navigazioni future.

L'effetto del precaricamento degli asset statici sulle metriche sul rendimento dipende dal precaricamento della risorsa:

• Il precaricamento delle immagini può ridurre notevolmente i tempi di LCP per gli elementi immagine LCP.
• Il precaricamento dei fogli di stile può migliorare sia FCP che LCP, poiché il tempo impiegato dalla rete per scaricare il foglio di stile viene eliminato. Poiché i fogli di stile bloccano il rendering, possono ridurre l'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à anche precaricata come risorsa dipendente del foglio di stile precaricato.
• Il precaricamento del codice JavaScript consentirà l'elaborazione dello script precaricato molto prima rispetto a quanto accadrebbe se fosse stato necessario recuperarlo prima dalla rete durante la navigazione. Questo può influire sulle metriche di reattività come First Input Delay (FID) e Interaction to Next Paint (INP). Nei casi in cui il markup viene eseguito sul client tramite JavaScript, la metrica LCP può essere migliorata riducendo i ritardi nel caricamento delle risorse e prima il rendering lato client del markup contenente l'elemento LCP di una pagina.
• Il precaricamento dei caratteri web che non sono ancora utilizzati dalla pagina corrente consente di eliminare le variazioni di layout. Nei casi in cui viene utilizzato font-display: swap;, il periodo di scambio del carattere viene eliminato, velocizzando il rendering del testo ed eliminando le variazioni di layout. Se una pagina futura utilizza il carattere precaricato e l'elemento LCP della pagina è un blocco di testo che utilizza un carattere web, la metrica LCP per quell'elemento sarà più veloce.

Precaricamento dei blocchi JavaScript on demand

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

Ad esempio, se hai una pagina che contiene un pulsante che apre una finestra di dialogo che contiene un selettore di emoji, puoi dividerlo in tre blocchi JavaScript: Home, Finestra di dialogo e Selettore. La home page e la finestra di dialogo potrebbero essere caricate inizialmente, mentre il selettore potrebbe essere caricato on demand. Strumenti come webpack ti 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> al <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 è già presente nella cache. I 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 di specificare un suggerimento di precaricamento nell'intestazione HTTP è che il browser non deve analizzare il documento per trovare il suggerimento sulla risorsa, il che può offrire piccoli miglioramenti in alcuni casi.

Precaricamento dei moduli JavaScript con commenti magici del webpack

Il webpack ti consente di precaricare gli script per percorsi o funzionalità che probabilmente alcuni utenti visiteranno o utilizzeranno a breve.

Lo snippet di codice riportato di seguito carica una funzionalità di ordinamento dalla libreria lodash per ordinare un gruppo di numeri che verrà inviato tramite un modulo:

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

Invece di attendere che l'evento "submit" venga caricato per caricare questa funzionalità, puoi precaricare la risorsa per aumentare le probabilità che venga memorizzata nella cache nel momento in cui l'utente invia il modulo. 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 al 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 un po' specifici, ma in generale ci si potrebbe aspettare di vedere risposte più rapide alle interazioni, che dipendono da questi blocchi on demand, poiché saranno immediatamente disponibili. A seconda della natura dell'interazione, questo potrebbe apportare un beneficio all'INP di una pagina.

Il precaricamento in generale tiene conto anche dell'assegnazione della priorità delle risorse complessiva. Quando una risorsa viene precaricata, avviene alla priorità più bassa possibile. Pertanto, le risorse precaricate non si contenderanno la 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 le librerie che usano prefetch in background:

• quicklink utilizza l'API Intersection Observationr per rilevare quando i link entrano nell'area visibile e precarica le risorse collegate durante il tempo di inattività. Bonus: il link rapido pesa meno di 1 kB.
• Guess.js utilizza i report di analisi per creare un modello predittivo che viene 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 utilizza una rete lenta o Save-Data è attivo.

Funzioni di precaricamento

Gli hint delle risorse non sono istruzioni obbligatorie e spetta al browser decidere se e quando vengono 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 implementarlo in modo diverso).

Il precaricamento avviene con la priorità "Più bassa", quindi le risorse precaricate non competono 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 possa essere inserita nella cache o meno) per un periodo di tempo che varia a seconda del 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 far sembrare che le pagine si carichino all'istante. prefetch è ampiamente supportato nei browser moderni, il che rende una tecnica interessante per migliorare l'esperienza di navigazione per molti utenti. Questa tecnica richiede il caricamento di byte extra che potrebbero non essere utilizzati, quindi presta attenzione quando la utilizzi; fallo solo quando necessario e, idealmente, solo sulle reti veloci.