"The high performance websites typically lead to higher visitor engagement, retention and conversions! "

Optimising your website’s loading speed is really one of the way to improve user experiences, especially on mobile, due to its limited processing power, slow internet connection, and unreliable bandwidth. There is a new way for web developers to keep their website loads fast, using "HTML5 Prefetch" other than using CDN, JavaScript compression, and CSS Sprites.

Introducing HTML5 Prefetch

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.

Example of Using HTML5 Prefetch Link

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.

Prefetch (Prerender) in Google Chrome

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>

When To Prefetch Documents / Assets?

Prefetching a website content is pretty useful, especially:

When your website consists of a series of pages, such as slideshow, photo gallery.

Loading common assets such as images, graphics, external scripts or stylesheets to be used on most pages throughout the website.

Conclusion

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?