Scopri di più sull'indicazione della risorsa rel=prefetch e su come utilizzarla.
Pubblicato il 12 settembre 2019, ultimo aggiornamento: 8 febbraio 2025
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 ottenere questo risultato con <link rel=prefetch>, che ti consente di implementare il pre-caricamento in modo efficiente.
Migliorare il rendimento del sito con rel=prefetch
L'aggiunta di <link rel=prefetch> a una pagina web indica al browser di scaricare alcune delle risorse (come script o file CSS) di cui l'utente potrebbe aver bisogno in futuro:
<link rel="prefetch" href="/css/styles.css">
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.
Casi d'uso
Il pre-caricamento ha molti casi d'uso per velocizzare le pagine web scaricando le risorse in anticipo.
Effettua il prelievo 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).
Precaricare gli 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 il LCP quando vengono prerecuperati. Se l'elemento LCP della pagina successiva è un'immagine di sfondo CSS richiesta utilizzando la proprietà
background-image, l'immagine verrà precaricata anche come risorsa dipendente dello stile 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 sull'Interaction to Next Paint (INP) di una pagina. Nei casi in cui il markup viene visualizzato sul client utilizzando 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. Se 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.
Precaricare i 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="//css/styles.css">
...
</head>
Puoi anche avviare il pre-caricamento con 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.
Precarica i moduli JavaScript con i commenti magici di webpack
webpack ti consente di eseguire il pre-caricamento degli script per le route o le funzioni che ritieni ragionevolmente che gli utenti visiteranno o utilizzeranno a breve.
Il seguente snippet di codice carica in modo lazy una funzione 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 funzione, puoi prelevare questa risorsa per aumentare le probabilità di averla disponibile nella cache entro il momento in cui 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" 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, questo 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 precaricata, 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 pre-caricamento più intelligente con le librerie che utilizzano prefetch sotto il cofano:
- 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.
Prefetch 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 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 se la risorsa è memorizzabile nella cache, altrimenti vengono eliminati e non vengono utilizzati.
Conclusione
L'utilizzo di prefetch può migliorare notevolmente le prestazioni web di un sito scaricando in anticipo le risorse necessarie in futuro. prefetch è supportato nella maggior parte dei browser moderni. 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.