Home » Tutorials » Mobile Web Development » Speed Up Page Loads Time Using Prefetch / Prerender

Speed Up Page Loads Time Using Prefetch / Prerender

Speed Up Page Loads Time Using Prefetch / Prerender

  • Stumble it!
  • Share

"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?


  • Replacing jQuery Animation With CSS Hardware Accelerated
  • Launch Native iOS Google Maps Via Your Web App
  • Testing & Troubleshooting Retina Display Content Without Actual Device

  • josh

    I’m curious as how it would handle dynamic content? Load everything but server generated content? Or would it display it in whatever form it would be on load?

    • http://www.onlywebpro.com onlyWebPro

      Hi Josh,

      Thanks for your question. If I’m not mistaken, Link prefetch is able to handle dynamic content which generated by server side. Here is an example, let’s say you have a wordpress blog, you want to prefetch the next entry of your blog, you may write your link prefetch with the combination of wordpress PHP syntax as in the example below:


      <link rel="prefetch" href="">
      <link rel="prerender" href="">

      I hope my answer could help to solve your question.

  • George

    We have been preloading images for years, totally cross-browser compatible, from css1

    .hiddenPic {display:none;}

    • http://www.onlywebpro.com onlyWebPro

      Hi George,

      Yes! this is one of the technique to preload images using CSS.

      Thanks for sharing to community! :)

Android, iOS Development Tutorials