- Tutorials / Mobile Web Development
- Friday, 22nd Nov, 2013
HTML5 Prefetch is a browser mechanism, which gives browser a hint to prefetch a document (could be websites, HTML files, Images, and etc) silently that users might visit in the near future.
By placing a set of prefeches in the <head> of a web page, the browser, once it has finished loading the current page, will fetch the linked documents and store them in the cache. So when the user visits the fetched item the browser can serve it up much quicker out of the browser cache.
Prefetching documents are extremely easy. All you need to do is to place link tag in <head> section:
<head> <link rel="prefetch" href="/images/onlywebpro-logo.jpeg"> <link rel="prefetch" href="/images/about-us.html"> </head>
Pretty easy right? But please do keep in mind that Mozilla Firefox, currently is the only web browser to support this feature with this syntax. If you want to implement prefetch for Google Chrome, you may need to change your syntax as in the example below.
In order to achieve the same in Google Chrome, we just need to substitute prefetch for prerender:
<head> <link rel="prefetch" href="/images/onlywebpro-logo.jpeg"> <!-- Firefox --> <link rel="prerender" href="/images/onlywebpro-logo.jpeg"> <!-- Chrome --> </head>
Prefetching a website content is pretty useful, especially:
Although, prefetch content seems easy and it’s an interesting idea for web developer to speed up the web page loading time, not many web browsers have the capability to support this features yet. I’m pretty sure, those web browsers will catch up soon, and it won’t harm the website if prefetch is implements now.
What do you think? Do you manage websites that prefetching could be helpful for?