MDN describes link prefetching as: "Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future. A web page provides a set of prefetching hints to the browser, and after the browser is finished loading the page, it begins silently prefetching specified documents and stores them in its cache. When the user visits one of the prefetched documents, it can be served up quickly out of the browser’s cache."
"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>
Link prefetch is able to handle dynamic content which generated by server side. Here is an example, let's say you have a blog, you want to prefetch the next entry of your blog, you may write your link prefetch with the combination of PHP syntax as in the example below:
<link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>;"> <link rel="prerender" href="<?php echo get_next_posts_page_link(); ?>;">
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?
