Precarica le risorse per velocizzare le navigazioni future

Scopri di più sull'indicazione della risorsa rel=prefetch e su come utilizzarla.

Demián Renzulli

Jeremy Wagner

La ricerca dimostra che tempi di caricamento più rapidi si traducono in tassi di conversione più elevati ed esperienze utente migliori. Se hai informazioni su come gli utenti si spostano nel tuo sito web e su quali pagine visiteranno probabilmente in seguito, 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 per le risorse che ti consente di implementare il pre-caricamento in modo facile ed efficiente.

Migliorare le navigazioni con rel=prefetch

L'aggiunta di <link rel=prefetch> a una pagina web indica al browser di scaricare intere pagine o alcune delle risorse (come 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 che non sono immediatamente necessarie, pertanto questa tecnica deve essere applicata con attenzione. Esegui il pre-caricamento delle risorse solo quando hai la certezza che gli utenti ne avranno bisogno. Valuta la possibilità di non eseguire il pre-caricamento quando gli utenti sono connessi a una rete lenta. Puoi rilevarlo con l'API Network Information.

Esistono diversi modi per determinare quali link prelevare. La più semplice è prelevare il primo link o i primi link della pagina corrente. Esistono anche librerie che utilizzano approcci più sofisticati, come spiegato più avanti in questo post.

Casi d'uso

Precaricamento delle pagine successive

Effettua il pre-caricamento dei 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 un prodotto, puoi eseguire il pre-caricamento della pagina del prodotto più apprezzato 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 la pagina di pagamento è in genere elevata, il che la rende una buona candidata per il precaricamento.

Sebbene il pre-caricamento delle risorse utilizzi una larghezza di banda aggiuntiva, può migliorare la maggior parte delle metriche relative al rendimento. Time to First Byte (TTFB) è spesso molto inferiore, in quanto la richiesta del documento genera un successo della cache. Poiché il TTFB sarà inferiore, anche le metriche successive basate sul tempo saranno spesso inferiori, tra cui Largest Contentful Paint (LCP) e First Contentful Paint (FCP).

Precaricamento di asset statici

Precaricare asset statici, come script o fogli di stile, quando è possibile prevedere le sezioni successive che l'utente potrebbe visitare. Questa funzionalità è particolarmente utile quando gli asset vengono condivisi su più pagine.

Ad esempio, Netflix sfrutta il tempo trascorso dagli utenti sulle pagine disconnesse per precaricare React, che verrà utilizzato una volta che gli utenti avranno eseguito l'accesso. Grazie a ciò, 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 pre-caricamento delle immagini può ridurre in modo significativo 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 l'LCP se vengono prerecuperati. Se l'elemento LCP della pagina successiva è un'immagine di sfondo CSS richiesta tramite la proprietà background-image, l'immagine verrà precaricata anche come risorsa dipendente dello stile CSS precompilato.
• Il pre-caricamento di JavaScript consente di elaborare lo script pre-caricato molto prima rispetto a quanto sarebbe necessario se dovesse essere recuperato dalla rete per primo durante la navigazione. Ciò può influire su Interaction to Next Paint (INP) di una pagina. Nei casi in cui il markup viene visualizzato sul client tramite JavaScript, il valore LCP può essere migliorato riducendo i ritardi di caricamento delle risorse e il rendering lato client del markup contenente l'elemento LCP di una pagina può avvenire prima.
• 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 comporta un rendering più rapido del testo ed elimina le variazioni del layout. Se una pagina futura utilizza il carattere prelevato e l'elemento LCP della pagina è un blocco di testo che utilizza un carattere web, anche il tempo LCP per quell'elemento sarà più veloce.

Precaricamento di chunk JavaScript on demand

La suddivisione del codice dei bundle JavaScript ti consente di caricare inizialmente solo parti di un'app e il resto tramite il caricamento lazy. 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 dividerla in tre chunk JavaScript: home, dialog e picker. La casa e la finestra di dialogo potrebbero essere caricate inizialmente, mentre il selettore potrebbe essere caricato su richiesta. Strumenti come webpack ti consentono di indicare al browser di eseguire il pre-caricamento di questi chunk 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 si trova già nella cache. Alcuni valori di esempio per questo attributo sono: 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 suggerimento di prefetch nell'intestazione HTTP è che il browser non deve analizzare il documento per trovare il suggerimento della risorsa, il che può offrire piccoli miglioramenti in alcuni casi.

Precaricare i moduli JavaScript con i commenti magici del webpack

webpack ti consente di eseguire il pre-caricamento degli script per percorsi o funzionalità che ritieni ragionevolmente che gli utenti visiteranno o utilizzeranno a breve.

Il seguente snippet di codice carica in modo lazy 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 che l'evento "submit" si verifichi per caricare questa funzionalità, puoi precaricare questa risorsa per aumentare le probabilità che sia disponibile nella cache al momento dell'invio del modulo da parte dell'utente. webpack consente di utilizzare i 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 iniettare il tag <link rel="prefetch"> nel documento HTML:

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

I vantaggi in termini di prestazioni del pre-caricamento dei chunk on demand sono un po' sfumati, ma in generale, puoi aspettarti di vedere risposte più rapide alle interazioni che dipendono da questi chunk on demand, poiché saranno disponibili immediatamente. A seconda della natura dell'interazione, ciò potrebbe conferire un vantaggio all'INP di una pagina.

Il pre-caricamento in generale viene preso in considerazione anche per la prioritizzazione delle risorse complessiva. Quando una risorsa viene prelevata, viene eseguita con la priorità più bassa possibile. Di conseguenza, le risorse precaricate non competeranno per la larghezza di banda necessaria 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 vengono visualizzati nell'area visibile e esegue il pre-caricamento delle risorse collegate durante i periodi di inattività. Un altro vantaggio: 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ò di cui l'utente ha bisogno.

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

Precaricamento sotto il cofano

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

Puoi utilizzare il prefetch 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 pre-caricamento non è stato completato e l'utente accede alla risorsa di pre-caricamento di destinazione, il caricamento in corso viene rilevato come navigazione dal browser (altri fornitori di browser potrebbero implementare questa funzionalità in modo diverso).

Il precaricamento avviene con la priorità "Più bassa", pertanto le risorse precaricate non competono per la larghezza di banda con le risorse richieste nella pagina corrente.

I file prerecuperati vengono memorizzati nella cache HTTP o nella cache in memoria (a seconda che la risorsa sia memorizzabile in cache o meno) per un periodo di tempo che varia in base ai 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 vengano caricate istantaneamente. 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 usi; procedi solo quando necessario e, idealmente, solo su reti veloci.