Il web è un sistema di risorse distribuite, questo significa che per caricare una pagina web è spesso necessario ottenere file e risorse da web server differenti, situati anche in nazioni differenti. Questa struttura può creare dei ritardi dal momento in cui l’utente preme un link fino a quando la pagina richiesta si carica completamente. Il problema è particolarmente evidente nei siti che includono dipendenze JavaScript, plugins e altre risorse come media e fogli di stile.
In alcuni casi è possibile prevedere la prossima pagina che l’utente leggerà oppure il link che verrà cliccato. Ad esempio quando un utente sta leggendo un articolo suddiviso in più pagine è molto probabile che seguirà il link “prossima pagina”. Per migliorare l’esperienza utente non sarebbe male se il browser iniziasse a caricare in sottofondo la seconda pagina prima ancora che l’utente clicchi il link, così da rendere poi istantaneo il passaggio da una all’altra pagina senza dover attendere ulteriori caricamenti.
Questo è il principale motivo che ha portato allo sviluppo del prerendering e prefetching nei browser moderni in modo da anticipare le mosse dell’utente, nei casi in cui le mosse siano fortemente prevedibili. Queste funzioni vengono chiamate Resource Hints, puoi trovare maggiori informazioni seguendo questo link https://w3c.github.io/resource-hints/.
Per Google la velocità è giustamente una mission e gli sviluppi di Chrome seguono da sempre questa logica. In questo video viene descritta la tecnologia dietro a “Google Search with Instant Pages”
Vediamo le differenze tra Prefetch e Prerender.
La tecnica del Prefetch
Il concetto di prefetching è incluso nelle specifiche HTML5. Il Prefetching permette all’autore di un sito di includere una tag nell’HTML che indica al browser una risorsa da scaricare non appena sarà finito il caricamento della pagina attiva. Quando il browser incontra il tag inizierà a richiedere la o le risorse come ad esempio un’immagine o una pagina HTML.
Il Prefetch permette di scaricare singole risorse come immagini, pagine HTML, fogli di stile, etc. L’impatto del Prefetch sulla velocità di caricamento della pagina dipende quindi da quale risorsa si pre-carica.
La sintassi ha tre variabili: il prefetch infatti può essere inserito con tag , come intestazione HTTP e come meta tag.
Note
Alcune note sull’utilizzo del Prefetch:
- Il Prefetch può essere usato anche per richiamare risorse da domini differenti, anche file di cookies
- Il Prefetch potrebbe impattare sulle visite registrate da strumenti di web analytics perchè non è detto che l’utente visiti la pagina pre-caricata
- Mozilla è l’unico browser che supporta a pieno il Prefetch
DNS-Prefetch
Identifica la ricerca del DNS per risolvere in background in modo da fornire una risposta più rapida.
Prerender
Il Prerendering estende il concetto di Prefetching ma è una tecnica principalmente seguita da Google per Chrome. Invece che limitarsi a scaricare singole risorse, il Prerender esegue tutto il lavoro necessario per mostrare la pagina completa all’utente non appena esegue il click.
Il Prerendering si comporta come se l’utente aprisse in background una pagina (click con il bottone di mezzo del mouse) e alla fine della lettura si spostasse sulla nuova pagina. Tuttavia la pagina aperta in background risulta invisibile all’utente e, non appena l’utente preme il link, il contenuto della tab viene sostituito immediatamente alla tab attiva.
Dal punto di vista dell’utente, la pagina semplicemente viene caricata più velocemente di prima.
Il prerendering è una funzionalità avanzata ed in fase di sperimentazione, errori di implementazione possono causare user-experience negative, un maggiore utilizzo di banda del webserver oppure un caricamento più lento delle pagine. Dovresti valutare l’implementazione del Prerender soltanto se hai molta confidenza sui funnel di navigazione e sui link che l’utente visiterà. Ad esempio, il Prerendering può essere una buona idea per gli articoli suddivisi in più pagine.
Per implementare il Prerendering è necessario inserire nell’HTML una breve tag:
Quando il browser incontra questo elemento inizierà a scaricare la pagina linkata, l’evento accade durante il parsing della pagina oppure in seguito quando l’elemento è inserito dinamicamente nel documento via JavaScript.
Ricordati che il tag è soltanto un consiglio per il browser il quale deciderà in autonomia se scaricare o meno il link.
Note
Alcuni casi in cui il Prerender non funziona:
- L’utente utilizza un browser vecchio, dove la funzione di prerendering non è abilitata di default
- L’utente ha disattivato il prerendering nelle Impostazioni
- Un’altra pagina è già prerender. Il prerender funziona al massimo per un singolo URL
- Ci sono molteplici direttive PreRender sulla pagina
- L’utente naviga in una finestra di navigazione in incognito (Chrome)
Quale usare?
Usa il Prerender perchè include quanto offerto dal Prefetch a altro ancora. Il prerender è supportato da Chrome, IE11 e Firefox.
Come verificare l’attivazione del Prerender
Per verificare il funzionamento del prerender è possibile usare il task manager di Google Chrome.
L’immagine seguente mostra una pagina di esempio che include nell’head HTML il tag link Prerender. Quando termina di caricare la pagina esempio, Chrome carica anche la pagina indicata nel prerender, l’attività è visibile nel task manager sotto la voce “Attività” con nome “Prerender”.
Se vedi l’attività di prerender nel task manager di Chrome sei sicuro di aver implementato bene la funzione.
Risorse ed approfondimenti
- developers.google.com/chrome/whitepapers/prerender
- developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
- msdn.microsoft.com/en-us/library/ie/dn265039(v=vs.85).aspx
- blog.chromium.org/2011/06/prerendering-in-chrome.html
- googlewebmastercentral.blogspot.ch/2011/06/announcing-instant-pages.html
- Preconnect, prefetch and prerender (PDF)
- igvita.com/posa/high-performance-networking-in-google-chrome/
Lascia un commento