Utilizzare le istruzioni di prerender e prefetching in HTML5

di Daniele Bochicchio,

I browser moderni implementano diverse tecniche per fare in modo che le risorse vengano scaricate e tenute in cache, velocizzando il caricamento di risorse che servono successivamente, oppure in scenari offline.

Le ultime versioni dei principali browser, in particolare, supportano due concetti: quello di prefecthing e quello di prerendering.
La prima tecnica consiste nello scaricare risorse insieme alla pagina, anche se non vengono referenziate, perché saranno utilizzate in seguito. La seconda istruisce il browser, aggiungendo al prefecthing un'ulteriore passo, necessario ad avere la pagina pronta per essere mostrata all'utente, caricandola ed eseguendola con una velocità superiore. Di fatto, in questo caso, il browser scambia la pagina corrente con quella pre-renderizzata all'atto della normale navigazione: la pagina è stata caricata ma non resa visibile, con l'effetto che l'utente la vedrà molto più velocemente all'atto della navigazione, perché il browser la scambierà con quella visualizzata in precedenza.

E' sufficiente inserire questi elementi nella pagina (tipicamente nel tag head):

<link rel="prefetch" href="/style2.css" />
<link rel="prerender" href="/play.html" />

La garanzia che il browser faccia il prerender non c'è, perché dipende dalla singola implementazione e da alcuni dettagli. Ad esempio, alcuni browser hanno un limite di una pagina al massimo, mentre altri ignorano tutte le direttive di prerender se ne vengono incluse più di una. E' invece possibile specificare più istruzioni di prefetch.

Il supporto è disponibile con IE 11+, Chrome 13+, FireFox.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi