The concept of prefetching is pretty simple. We often know about resources the browser is likely to need before the browser does. Prefetching involves either giving the browser hints of pages or resources it is likely to need so that it can download them ahead of time, or actually downloading resources into the browser cache before needed so that the overhead of requesting and downloading the object can be preemptively handled or done in a non-blocking way.

There are many ways to prefetch content, but here are 3 simple options.

DNS Prefetching

DNS is the protocol that converts human readable domains (mysite.com) into computer readable IPs (123.123.123.123). DNS resolution is generally pretty fast and measured in 100′s of milliseconds, but because it must happen before any request to the server can be made it can cause a cascade effect that has a real impact on the overall load time of a page. Often we know about several other domains that will need to be loaded for resources later in the page or user session, such as subdomains for static content (images.mydomain.com) or domains for 3rd party content. Some browsers support a meta tag that identifies these domains that need to be resolved so the browser can resolve them ahead of time. The tag to do this is pretty straight forward:

<link href="//my.domain.com" rel="dns-prefetch" />
<link href="http://my.domain.com/" rel="prefetch" /> <!– IE9+ –>

Adding this tag causes the browser to do the DNS resolution ahead of time, instead of waiting until a resource requires it later. This technique is probably most valuable to preload DNS for content on other pages on your site that visitors are likely to go to. This feature is supported in Chrome, Firefox, and IE9+.

Although shaving a few hundred milliseconds might seem trivial, in aggregate this can be a measurable gain. It’s also a safe optimization and easy to implement. I was curious to see how often this technique is used, so I crawled the top 100K Alexa sites. It turns out only 552 sites (0.55%) are currently using DNS prefetching. This is a cheap win, and something more sites should leverage.

Resource Prefetching

Images make up a large portion of the overall bytes of many major websites today. Often the overhead of making the requests and downloading images can have a significant performance impact. In many cases, though, the site developer knows when an image will be needed that won’t be detected early by the browser, such as an image loaded from an ajax request or other user action on the page. Resource prefetching is when you load an image, script, stylesheet, or other resource into the browser preemptively. This is most often done with images, but can be done with any type of resource that can be cached in the browser.

Of the three techniques I’m covering here, this is by far the oldest and the most used. Unfortunately I can’t give a concrete number about adoption because there are too many ways to implement this to detect in my Alexa crawl. Still, many sites don’t properly leverage this technique and even just preloading a few images can make a huge difference for the user experience.

Page Prefetching / Prerendering

Page prefetching is very similar to resource prefetching, except that we actually load the new page itself preemptively. This was first made available in Firefox. You can hint to the browser that a page (or an individual resource) should be prefetched by including the following tag:

<link rel="prefetch" href="/my-next-page.htm">

In the case of prerendering, the browser not only downloads the page, but also the necessary resources for that page. It also begins to render the page in memory (not visible to the user) so that when the request for the page is made it can appear nearly instantaneous to the user. Prerendering was first added in Chrome. You can hint that a page should be prerendered by including the following tag:

<link rel="prerender" href="http://mydomain.com/my-next-page.htm">

This technique is by far the most controversial and the riskiest of the three. Prerendering a page should only be done when there is a high confidence that the user will go to that page next. The most well known example of this is Google Search, which will prerender the first result of the page if the confidence is high enough. I found only 95 examples of this in my crawl of the Alexa Top 100k sites. Although this technique is clearly not for every use case, I think many more sites could leverage this to improve the user experience.

The Downsides

Prefetching in general is often a controversial topic. Many people argue that it is not efficient and leads to a waste in bandwidth. It also uses client resources unnecessarily (most notably on mobile devices). Also worth mentioning is that in some cases prefetching or prerendering of pages can have adverse effects on analytics and log tracking since there is no obvious way to discern a user visiting the page (and seeing it) or simply the browser prerendering without the user’s knowledge.

Conclusion

Despite all of these cautions, prefetching can be a huge win. The fastest request is always the one we never have to make and getting as much into the cache as possible is the best way to make that happen. By making these expensive requests when the user is not waiting on them, we can greatly improve the perceived performance of even the slowest sites on the slowest networks. If you’re not already doing so, it’s worth trying these techniques on your site. The results will vary, so be sure to use Real User Measurement (e.g. Torbit) to find out how much of an improvement prefetching makes for you.

ABOUT THE AUTHOR

Jon Fox photo

Jon Fox (@jfox85) is the co-founder and CTO of Torbit where he writes code to help make the web faster. Torbit is a company offering Dynamic Content Optimization and a free Real User Measurement tool called Insight. Prior to making the web faster, Jon made comments better as the co-founder and CTO of IntenseDebate, which was later acquired by Automattic.

41 Responses to “Speed Up Your Site Using Prefetching”

  1. EricLaw [ex-MSFT]

    I’m almost positive that IE10 now supports rel=”dns-prefetch” although it is correct that IE9 only supported rel=”prefetch”. It’s also worth noting that IE10 maintains a DNS-Prefetch cache, whereby the browser keeps tracks of hostnames that it should DNS-preresolve (and optionally preconnect) if the user revisits a previously visited page in a future browsing session. I suspect other browsers may have this optimization now as well.

    When prefetching resources within the browser, take care not to follow the anti-optimization of using an IMG tag to fetch a non-image resource, as this hurts performance rather than helping it: http://blogs.msdn.com/b/ieinternals/archive/2012/05/05/problems-with-using-img-to-prefetch-script-or-css.aspx.

  2. dale

    one thing i did not read is where to put the code?? does it go into the htaccess or into a meta??

  3. Johann

    I agree more people should use DNS prefetches, especially to prefetch ad servers. If you look at AdSense or Amazon, there are usually man host names involved — for example, for Amazon, the browser needs to look up 11 host names.

  4. mark

    since there is no obvious way to discern a user visiting the page (and seeing it) or simply the browser prerendering without the user’s knowledge

    Page Visibility API

    From https://developers.google.com/chrome/whitepapers/prerender

  5. Adonis K.

    @dale, obviously your inside your HTML’s head tag

  6. Useful Website Articles & Tutorials | Code Chewing

    [...] DNS prefetching; http://calendar.perfplanet.com/2012/speed-up-your-site-using-prefetching/ [...]

  7. Markus

    DNS prefetching sounds interesting and would make sense if it’s supported by the main browsers.

    Is there a list available which browsers support this?

  8. John J. Locke

    I found this article via the Harry Roberts’ article on performance. The prefetch is a technique I had never heard of before, but I think a lot more people will be implementing it now. Performance is definitely something that going to be part of a Front End developer’s job going forward. Thanks so much for sharing.

  9. Andrew

    Can I call js/css files this way? and if so should i be?

  10. Get a Website

    Hello my loved one! I want to say that this article is awesome, nice written and include approximately all important infos. I would like to see more posts like this .

  11. 酷 script » Blog Archive » 前端性能优化

    [...] 通过预取加速你的网站 [...]

  12. 前端性能优化 | 醉凡尘……

    [...] 通过预取加速你的网站 [...]

  13. 前端性能優化 | 飛洛奇工作室

    [...] 通過預取加速你的網站 [...]

  14. 前端性能优化 | 知马力

    [...] 令人感到困惑之处在于有两篇文章似乎有不同的观点;基于来自MDN的文章,貌似这种预取指令只是示意浏览器仅在它空闲时才有可能会对href所指的资源进行预取。然而,与此矛盾的是,来自Planet Performance的这篇文章貌似在说,如果浏览器支持rel="prefetch"的话,它就一定会预取href中所指的资源,并没有提及是否要在浏览器空闲时才进行预取。我在WebKit的Inpsector中的瀑布图中所看到的情况是后者说得是对的,但是在打开Developer Tools的情况下(薛定谔测不准。。。)WebKit的表现及其怪异,我就观察不到预取动作的情况了,这也就是我说,我无法100%保证我说的是对的。要是谁能解释清楚这方面的情况,我将不胜感激。 [...]

  15. Быстродействие фронтенда для дизайнеров и разработчиков

    [...] Дальнейшее чтение: Speed Up Your Site Using Prefetching. [...]

  16. Eliza Alton

    thanks wowowo good

  17. Rajesh

    Thanks a lot for sharing these pre-fetching tips.

  18. mobile man

    i think google have very less loading and fastest thats a best example we can see.

  19. priya patel

    How it Works

    What DNS prefetching will is arrange to resolve domain names before we have a tendency to, the users, try and follow a link. this is often accomplished exploitation the computer’s integral DNS resolution mechanism. Once a website name has been resolved, if we have a tendency to do navigate thereto domain, there’ll be no effective delay because of DNS resolution time. whereas downloading speed remains identical, trying up the science address before hand can prevent associate simply perceptible second or 2 once going from page to page. a decent example wherever DNS prefetching will extremely assistance is once a user is viewing a page with several links to varied domains, like an enquiry results page. once the browser encounters associate a link that doesn’t share identical name because the current location, it 1st checks its cache so, lacking a cached copy, resolves the domain to the associated science address through letter of invitation from a DNS server. These requests happen within the background therefore on not block the rendering of the page. Moreover, since all this takes place in parallel with the user’s reading of the page, it places solely a negligible load on processor and network resources. what proportion navigation time can a user save will vary from a median savings of concerning two hundred milliseconds for non-cached content, to at least one to 2 seconds for the worst DNS resolution delays.

  20. 使用预加载提速你的网站 « 潜行者M

    […] 原文:Speed Up Your Site Using Prefetching […]

  21. My Repair Centre

    Can you do this in Magento ?

  22. Dkicker

    @Repair
    Yes you can in Magneto.

    Only need add line

  23. http://ruswood.ru/index.php?go=reliz&action=details&id=56

    Link exchange is nothing else except it is just placing
    the other person’s weblog link on your page at proper place and other person will also do
    similar in favor of you.

    Also visit my webpage :: wacker neuson (http://ruswood.ru/index.php?go=reliz&action=details&id=56)

  24. Bermudas Calvin Klein

    Does your site have a contact page? I’m having trouble locating it but, I’d like to shoot
    you an email. I’ve got some ideas for your blog you might be interested
    in hearing. Either way, great website and I look forward to seeing it develop over time.

  25. Pure Logic Edmonton

    Outstanding! Continue the good work. :-D

  26. nice watches for women

    Amazing blog! Is your theme custom made or did
    you download it from somewhere? A design like yours with a few
    simple adjustements would really make my blog stand out. Please let me know where you got your
    design. Thanks

  27. Concetta

    First of all I want to say superb blog! I had a quick question in
    which I’d like to ask if you do not mind. I was curious to find
    out how you center yourself and clear your mind prior to writing.
    I have had a difficult time clearing my mind in getting my ideas out.
    I do enjoy writing however it just seems like the first 10
    to 15 minutes are wasted simply just trying to figure out how
    to begin. Any suggestions or hints? Cheers!

  28. Kristin

    It’s not my first time to visit this site, i am browsing this site dailly and obtain nice facts from here daily.

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>
And here's a tool to convert HTML entities