5 New Dead Easy Ways to Make Your Website Appear Faster (Hint: Prefetch)

Make Your Website Appear Faster

Recent researches have found that the speed of loading a website affects how likely visitors will continue to browse it and the conversion rate.  Up to 40% of people abandon a website that takes more than 3 seconds to load. Lots of efforts will need to be put on reducing the size and respond speed of the website and Google has posted a comprehensive document about how to speed up websites using concatenation, minification, caching or gzipping images/assets.

With the advancement of browser technologies, new methods have come up to even make the website loading APPEAR to be much faster…… one of such method is to fully utilize the “idle” time while the visitor is browsing the website — a.k.a. Pre-fetching. The pre-fetching technique asks the browser to download likely to be useful resources in the background while the visitor is browsing the page, thus saving much time if the visitor is really clicking on the link to go to another page.

This technique will not trim down the size of your website but can make best use of time.

It is psychological more than technical.

There are currently 5 different ways of implementing pre-fetching in supported browsers (the supported browsers will follow the instruction to pre-fetch resources while un-supported browsers will simply ignore them):

  • DNS Prefetch
    • resolve the DNS of a domain first before the resource is actually downloaded from the domain to save time
    • useful for third party resources (e.g. facebook widget, addthis widget, etc.)
  • Preconnect
    • resolve the DNS + make TCP handshake to set up the necessary sockets to save even more time
  • Prefetch
    • actually request that asset and store it in the browser cache (lower priority)
    • useful for custom font files, etc.
    • note: actual implementation and sequence will be determined by browser
  • Subresource
    • actually request that asset and store it in the browser cache (higher priority)
    • useful for style and script files, etc.
  • Prerender
    • actually load the url indicated (including all styles, javascript and images) but is invisible to the visitor
    • consume much bandwidth and computing power, beware not to overuse this

To use these technique, one will just need to add the following lines in the <head> section of the html code:

  • <link rel=”dns-prefetch” href=”//example.com”>
  • <link rel=”preconnect” href=”//example.com”>
  • <link rel=”prefetch” href=”example-image.com”>
  • <link rel=”subresources” href=”style.css”>
  • <link rel=”dns-prefetch” href=”//example.com”>

That’s it. Your website will now appear to be much faster loading with the Prefetch loading technique!

Support website running for FREE, thanks!

If you find this post helpful and if you are thinking of buying from Amazon, please support the running cost of this website at no extra cost to you by searching and buying through the search box below. Thank you very much for your help!

Edward Chung

Edward Chung aspires to become a full-stack web developer and project manager. In the quest to become a more competent professional, Edward studied for and passed the PMP Certification, ITIL v3 Foundation Certification, PMI-ACP Certification and Zend PHP Certification. Edward shares his certification experience and resources here in the hope of helping others who are pursuing these certification exams to achieve exam success.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *