Prefetching/Preloading and prerendering content with HTML

by Jack Tarantino

Prefetching, preloading and prerendering are powerful ways to speed up your website using HTML markup. Instead of using javascript trickery or some manner of network manipulation, just instruct the browser to fetch information in the background and your website will be significantly faster.

What are prefetching, preloading and prerendering?

Prefetching is for telling the browser to look up DNS settings ahead of when they're needed. In practice, most of the requests your browser makes do not require a DNS lookup because the IP address of the server will have already been cached. This is usually because you've visited the domain before. Browsers like Google Chrome actually comb over webpages for links and automatically look up the DNS for unkown domains. When you're trying to build an application that is as fast as possible, you don't want to wait for a DNS lookup on one of your subdomains or an external domain. Lookups can take between 20 and 250 milliseconds(I bumped up that top number based on many stories of bad DNS servers from cheap ISPs) and most of them fall right in the middle of those numbers. Prefetching uses the following syntax:

<link rel="prefetch-dns" href="fully.qualified.domain.com">

Preloading is for telling the browser to download assets like images and scripts that you're not currently using but might be using soon. Most of the weight of websites today is in images and oversized scripts which can take a long time to download(A large, unoptimized image could take tens of seconds to download on a mobile or poor connection!). It's been demonstrated time and again that users will abandon your site if it takes too long to load so downloading assets in the background is critical if they're large/slow. Preloading uses the following syntax:

<link rel="prefetch" href="/assets/images/big-image.jpg">

Prerendering is the magical new practice of instructing the browser to download assets for and render an entire page in the background. The ability to prerender an entire page while your visitor's browser is idling is super powerful. When they click that "next page" button the page will display almost instantly. Your server-rendered templates will pop up immediately like with a javascript MVC-based site. If your site is doing all its routing client-side, prerendering isn't very practical but you can still get a speed bump by doing things like cacheing Angular templates in the background. Prerendering takes the following syntax:

<link rel="prerender" href="http://my-site.com/sign-up.html">

It should be noted that all three of these are just hints to the browser and do not guarantee that the browser will download anything. Specifically, both Google and Mozilla have lists of user/site actions that will cancel any prefetching/preloading/prerendering actions.

Prefetching, preloading and prerendering best practices:

When to use prefetching(dns):

  • When you're making AJAX requests to a domain other than the one you're on. This includes subdomains.
  • When you're dynamically rendering content on a page from a different domain. Example cases include generated links/buttons and lazyloading images.

When not to use prefetching(dns):

  • When there's a link on your page(Modern browsers should fetch that automatically for you)
  • In most cases really. Because of automatic prefetching it's hard to find cases when you'd need it other than dynamically-generated subdomains or something similar.

When to use preloading:

  • When you have different stylesheets for different pages and know a visitor is likely to visit another page.
  • When you know a visitor is likely to visit a "next page" with lots of images or other large files.
  • When you have a javascript MVC site and want to hint to the browser to download assets that aren't in the current view.

When not to use preloading:

  • When the asset is referred to somewhere else on the same page.
  • When you're not sure the user will actually require that asset. Like on a page visitors only go to 3% of the time.

When to use prerendering:

  • When you're certain that a user is going to visit a page and
  • When that pages has lots of assets that take a while to load.
  • When there's a "next page" that's very likely to be visited such as in a sign-up flow or the first link in a series of search results.
  • When an increase in page load speed would dramatically increase conversions.

When not to use prerendering:

  • When a user is not likely to visit a page.
  • When the amount of network data is limited(you don't want users to pay for pages they don't even visit).

Final thoughts

If your site runs on Rails, there's a really easy way to get this markup on your page; use the Preloadables gem to add prefetching, preloading and prerendering markup directly to pages!

Prefetching is only one way to speed up sites. I would strongly recommend using the lazyload attribute on image tags and defer/async on script tags whenever possible to avoid blocking downloads. lazyload tells a browser that an image is less important and can be loaded after other assets. This is super useful on pages with many images like a slideshow or tumblr-style page. defer and async tell browsers that your scripts are not blocking and don't need to be executed in a certain order. This is perfect for analytics scripts and advertisements as they're non-essential functionality.

Speaking of analytics, this is the only way to know for sure how visitors are using your site and what paths they're likely to follow. Use something like Google Analytics or Mixpanel to track user interactions and predict what you should be preloading. Needless to say, you should hook up both of those tools using the amazing Segment since they integrate with basically everything.