Prefetching: cos’è e perché usarlo per velocizzare il tuo sito

In questo articolo ci soffermiamo sul prefetching, una tecnica avanzata che proponiamo per ottimizzare la velocità dei siti web.

Il prefetching consente al browser di scaricare risorse in anticipo, cioè prima che l’utente ne abbia effettivamente bisogno, riducendo così i tempi di attesa durante la navigazione. Le risorse precaricate possono includere immagini, script, fogli di stile e altri elementi essenziali per una user experience fluida.

Ecco i principali vantaggi che emergono dall’articolo:

• Caricamento più rapido delle pagine: gli utenti beneficiano di un’esperienza più immediata e senza interruzioni.
• Riduzione del carico sui server: anticipando alcune richieste, il sito gestisce meglio il traffico e alleggerisce le risorse in momenti di picco.
• Prestazioni complessive migliorate: il prefetching contribuisce a utilizzare la rete e la cache in modo più efficiente.

L’articolo approfondisce anche le principali tipologie di prefetching:

• Link preload: si concentra sulle risorse fondamentali (JS, CSS, immagini, font).
• Resource hints: include preconnect, DNS prefetching e persino il prerender delle pagine.

In particolare, vengono descritte le tecniche operative:

• Preconnect: stabilisce connessioni anticipate con origini esterne tramite <link rel=”preconnect”>.
• DNS Prefetching: utilizza <link rel=”dns-prefetch”> per velocizzare la risoluzione dei domini.
• Preload: dà priorità alle risorse critiche nella fase di caricamento.
• Prefetch: memorizza anticipatamente richieste non critiche nella cache, utili ad esempio per la navigazione che l’utente potrebbe fare a breve. Una nota importante riguarda l’uso “intelligente” di queste tecniche: eccedere con preconnect e prefetch può appesantire la CPU o saturare la cache se le risorse precaricate non vengono poi utilizzate effettivamente dall’utente. Interessante anche il collegamento con l’intelligenza artificiale: l’AI può aiutare a prevedere con ancora maggiore precisione quali asset caricare in anticipo, in base al comportamento degli utenti. Ad esempio, realtà come eBay hanno testato l’anticipazione dei risultati di ricerca più probabili ottenendo un aumento delle conversioni.

Cos’è il prefetching? Definizione e funzionamento

In informatica si definisce prefetching il caricamento (fetch) di una risorsa prima che essa sia necessaria in modo da ridurre il tempo di attesa per quella risorsa.

Il prefetching è una tecnica che consente di anticipare il caricamento di risorse (come immagini, script o file CSS) prima che siano richieste in modo esplicito dall’utente. Questo approccio può ridurre di molto i tempi di caricamento delle pagine web, migliorando l’esperienza dell’utente finale.

Durante il prefetching, il browser scarica in background le risorse che potrebbero essere necessarie in futuro. Così, quando l’utente visita le pagine del sito, le risorse richieste sono già nella cache del browser e si caricano velocemente.

Vantaggi del prefetching per il tuo sito web

• • Tempi di caricamento più rapidi: le pagine web si aprono più velocemente, migliorando l’esperienza dell’utente (UX);

• • Riduzione del carico sul server: poiché alcune risorse vengono scaricate in anticipo, il server riceve meno richieste simultanee;

• • Miglioramento delle prestazioni complessive: il prefetching può contribuire a ottimizzare l’utilizzo delle risorse di rete e migliorare le prestazioni generali del sito web.

Tipi di prefetching: una panoramica completa

Il prefetching è stato introdotto per la prima volta in HTML5 ed esistono due standard W3C: Link preload e Resource hints

• • Link preload: sono richieste di specifiche URLs. Le più comuni includono JavaScript, CSS, immagini e font web.

• • Resource hints: i più comuni includono query DNS, apertura di connessioni TCP e pre-rendering delle pagine.

Preconnect: ottimizzare le connessioni anticipate

rel=”preconnect” informa il browser che la tua pagina intende stabilire una connessione con un’altra origine e che desideri che il processo inizi il prima possibile.

<link rel="preconnect" href="https://third-party-example.com" />

Questa connessione viene ottenuta ma non utilizzata direttamente. Rimarrà nel connection pool per un utilizzo successivo.

Usa preconnect con saggezza

Nell’utilizzo del preconnect bisogna tenere conto che:

• • preconnect è efficace solo per le risorse di terze parti e non per le risorse servite dal tuo server host;

• • preconnect dovrebbe essere usato con attenzione poiché può comunque richiedere tempo di CPU prezioso e ritardare altre risorse importanti, in particolare, su connessioni sicure;

• • il browser chiude qualsiasi connessione non utilizzata entro 10 secondi, quindi preconnect dovrebbe essere utilizzato solo per risorse critiche su domini di terze parti;

• • per tutte le altre risorse di terze parti, si può utilizzare dns-prefetch per ridurre i tempi di ricerca DNS.

DNS prefetching: velocizzare la risoluzione dei nomi di dominio

rel=”dns-prefetch” gestisce un piccolo sottoinsieme di ciò che viene gestito da <link rel="preconnect">.

Stabilire una connessione implica la ricerca DNS e l’handshake TCP e, per origini sicure, negoziazioni TLS.

rel=”dns-prefetch” indica al browser di risolvere solo il DNS di un dominio specifico prima che venga chiamato esplicitamente.

Quindi è bene utilizzare <link rel="preconnect"> per le connessioni più critiche mentre per domini di terze parti meno critici meglio utilizzare <link rel="dns-prefetch">.

<link rel="dns-prefetch" href="https://cdn.mysite.com" />

Aumenta la velocità di CDN con il DNS Prefetch

Il DNS prefetching può essere molto utile per i siti web che utilizzano content delivery networks (CDN). Risolvendo i nomi di dominio in anticipo, il browser può iniziare a caricare le risorse da questi domini il più presto possibile.

Quando si richiede un file dalla CDN per la prima volta, non è necessario attendere la ricerca DNS. È probabile che il file sia già risolto e in attesa nella cache.

Questo può ridurre il tempo di caricamento del tuo sito web da pochi a qualche centinaio di millisecondi.

Preload: caricamento prioritario delle risorse critiche

rel=”preload” informa il browser che è necessaria una risorsa come parte della navigazione corrente e che dovrebbe iniziare a essere recuperata il prima possibile.

Gli user-agents possono eseguire operazioni aggiuntive quando viene caricata una risorsa, ad esempio la decodifica preventiva delle immagini o la creazione di fogli di stile. Tuttavia, queste operazioni aggiuntive non possono avere effetti osservabili.

preload ti dà quindi un maggiore controllo sul processo di caricamento della pagina, consentendo di scaricare gli script in anticipo, ma di eseguirli in seguito. Ciò impedisce agli script di bloccare il thread principale nelle fasi critiche del caricamento della pagina, consentendo agli utenti di interagire più velocemente con la pagina.

Tali ottimizzazioni possono portare a cambiamenti nei Core Web Vitals del tuo sito ed è importante esserne consapevoli.

Il preload può avere un impatto su Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Time to Interactive (TTI), First Input Delay (FID) e Interaction to Next Paint (INP).

Preload degli script

I browser non eseguono file precaricati, quindi il preload separa il recupero del file dall’esecuzione, migliorando il Time to Interactive degli script.

<link rel="preload" href="script.js" as="script" />

Preload dei fogli di stile

Aspettare l’esecuzione di JavaScript prima di caricare CSS non essenziali può causare ritardi nel rendering quando gli utenti scorrono la pagina. È meglio usare preload per avviare il download in anticipo.

<link rel="preload" href="style.css" as="style" />

Preload di risorse definite nei CSS

I caratteri definiti con @font-face o immagini di sfondo definite nei file CSS non vengono rilevati finché il browser non scarica e analizza tali file CSS.

Il preload di queste risorse garantisce quindi che vengano recuperate prima del download dei file CSS.

<link rel="preload" href="Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin />

ATTENZIONE! I caratteri precaricati senza attributo crossorigin verranno recuperati due volte!

Prefetch: anticipare le richieste dell’utente

rel=”prefetch” è un po’ diverso da <link rel="preload"> e <link rel="preconnect">, nel senso che non tenta di far accadere qualcosa di critico più velocemente; cerca invece di far sì che qualcosa di non critico accada prima, se ce n’è la possibilità.

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

Funziona però solo per le risorse che possono essere memorizzate nella cache, come CSS, immagini, JavaScript, ecc. Quando una risorsa viene precaricata in cache, viene consegnata rapidamente quando l’utente naviga su una pagina con quella risorsa. Questo perché la risorsa è stata già recuperata in precedenza.

Un problema potrebbe essere che se un utente non visita la pagina con la risorsa precaricata, il suo browser avrà già scaricato la risorsa inutilmente. Questo aumenta la dimensione della cache senza benefici.

Prefetching e intelligenza artificiale: il futuro dell’ottimizzazione web

Algoritmi predittivi per un prefetching più accurato

Negli ultimi anni, il prefetching è stato adottato in combinazione con algoritmi di intelligenza artificiale (AI).

Questi algoritmi consentono di analizzare i percorsi di navigazione e prevedere quali dati potrebbero essere richiesti in futuro. Tale metodo può migliorare la precisione della navigazione, perché l’AI può trovare schemi non evidenti agli umani.

Vuoi aumentare le performance del tuo e-commerce? Contattaci per una consulenza e scopri cosa possiamo fare per il tuo store online!