Velocizzare un sito web con HTML5 link prefetching

In poche parole, il link prefetching è una tecnica per istruire il browser web a scaricare alcune risorse in background. Il browser utilizza il suo tempo di inattività per scaricare e memorizzare nella cache le risorse specificate.

Di conseguenza, quando i visitatori del sito visualizzano risorse interessate dal prefetch, il browser li serve rapidamente direttamente dalla cache, senza che nessun altra richiesta verso la rete sia necessaria.

HTML5 Link prefetchingnon è supportato da tutti i browser web. E’ possibile usare questo strumento per verificare se il vostro browser supporta la funzionalità.

Utilizzo del tag Prefetch

È possibile specificare le risorse per precaricare con <link rel = “prefetch” />

Il tag sopra riportato indica al browser di precaricare il link http://miodominio.com/pagina.html. Oltre a pagine intere, si possono far precaricare anche immagini e altre risorse.

Il seguente codice mostra come effettuare il prefetch di un’immagine:

In questo caso il browser precarica solo l’immagine e la serve velocemente quando richiesto dall’utente.

In breve

La tecnica del prefetching può essere utilizzata anche per memorizzare nella cache risorse provenienti da domini diversi (cross-domain). Secondo i documenti di Mozilla Developers, sono permessi soltanto url di tipo http:// (dunque niente HTTPS).

Se si sta scaricando qualcosa in background, il prefetching sarà ritardato fino a quando il download non sarà completato.

Questa tecnica non dovrebbe essere utilizzata in modo aggressivo, in modo da non memorizzare nella cache ogni risorsa del sito web.

Usare con cautela il link prefetching

La tecnica del prefetching è meravigliosa per velocizzare il caricamento delle pagine di un sito web, ma è necessario utilizzarla con attenzione; fare il prefetching in modo aggressivo può aumentare il carico sul server.

Di seguito due semplici casi di utilizzo del prefetching:

se si stanno visualizzando pagine successive di una presentazione, è possibile utilizzare il prefetching per accelerare e rendere più veloce e fluida la navigazione;
è possibile precaricare le immagini e altre risorse utilizzate in tutte le pagine del sito web.