Precarica le risorse per velocizzare le navigazioni future

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

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.

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">

Un diagramma che mostra come funziona il prefetch dei link.

Il suggerimento prefetch consuma byte aggiuntivi per le risorse che non sono immediatamente necessarie, pertanto questa tecnica deve essere applicata con attenzione. Effettua 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: in una 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 pre-caricamento.

Sebbene il pre-caricamento delle risorse utilizzi una larghezza di banda aggiuntiva, può migliorare la maggior parte delle metriche relative al rendimento. Il tempo di risposta (TTFB) sarà spesso molto più basso, poiché la richiesta del documento genera un hit 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 che gli utenti trascorrono nelle pagine in cui non hanno eseguito l'accesso per eseguire il pre-caricamento di React, che verrà utilizzato una volta che gli utenti avranno eseguito l'accesso. Grazie a questo, ha ridotto il tempo di interattività del 30% per le navigazioni future.

L'effetto del pre-caricamento degli asset statici sulle metriche sul rendimento dipende dalla risorsa pre-caricata:

  • Il pre-caricamento delle immagini può ridurre in modo significativo i tempi LCP per gli elementi immagine LCP.
  • Il pre-caricamento dei fogli di stile può migliorare sia il FCP che l'LCP, in quanto il tempo di rete per il 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 per primo dalla rete 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 non ancora utilizzati dalla pagina corrente può eliminare i cambiamenti di 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 prefetch a percorsi o componenti non 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 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 aiuta il browser a impostare le intestazioni corrette e a determinare se la risorsa è già nella cache. Alcuni valori di esempio per questo attributo sono: document, script, style, font, image e altri.

Puoi anche avviare il pre-caricamento 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.

Precaricamento dei moduli JavaScript con commenti magici 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 si verifichi l'evento "submit" per caricare questa funzionalità, puoi precaricare questa risorsa per aumentare le probabilità di averla disponibile nella cache quando l'utente invia il modulo. webpack lo consente utilizzando 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 apportare un vantaggio all'INP di una pagina.

Il pre-caricamento in generale viene preso in considerazione anche per la priorità 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.

Puoi anche implementare un pre-caricamento più intelligente con le librerie che utilizzano prefetch sotto il cofano:

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

I suggerimenti sulle risorse non sono istruzioni obbligatorie ed è compito del browser decidere se e quando eseguirli.

Puoi utilizzare il prefetch più volte nella stessa pagina. Il browser mette in coda tutti i suggerimenti e richiede ogni risorsa quando è inattivo. 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 utilizzala con cautela; utilizzala solo quando necessario e, idealmente, solo su reti veloci.