Lightning Fast Websites with Prefetching

Lightning Fast Websites with Prefetching

This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.

In this article, I’ll discuss prefetching, what it is and how developers can use it to wow visitors with high performance websites.

What Is Prefetching?

Although optimizing a website for initial page load is great, for the highly interactive websites users expect today this might not be enough.

What if browsers knew which link users are about to click, or which page they are about to visit next, so that content automagically appears on their screen at the speed of light?

But browsers can do that now. In fact, some major browsers are smart enough to make this kind of guesses based on visitors’ browsing patterns, document markup and structure, users’ device, connectivity, etc. Therefore, browsers already try to anticipate the resources to build the page visitors are likely to access, get those resources ready and display the page at warp speed when users need it. However, developers can use their knowledge of the website or web application to help browsers locate those crucial resources more accurately.

This is what prefetching is, a hint for browsers to foresee users’ every browsing wish and make it come true in a snap.

You can find prefetching in the Resource Hints specification led by Ilya Grigorik.

In what follows, I’m going to discuss:

  • DNS-prefetching
  • Link/Resource prefetching
  • Prerendering (Page prefetching)

DNS-Prefetching

The internet is a network of computer-readable IP addresses (e.g., 87.87.87.87) that are referenced by human-readable hostnames (e.g., yoursite.com). DNS is the protocol that converts hostnames into IP addresses.

Each time the browser makes an HTTP request for a resource on a different domain, it can spend a few milliseconds to resolve the domain to the associated IP address.

If a website has a Twitter or Facebook widget, Google Analytics and perhaps one or two custom web fonts, then it must have links to other domains. This makes DNS lookups unavoidable.

DNS prefetching helps to decrease waiting time for visitors because the browser performs DNS lookups before it sends a request for resources located on other domains.

So, let’s say developers know a website will make a request to somewidget.example.com. They can drop a hint for the browser suggesting it can go ahead and prefetch that hostname’s DNS by adding a rel attribute to the link with the value of dns-prefetch, like this:

[code language=”html”]
<link rel=”dns-prefetch” href=”//somewidget.example.com”>
[/code]

Now, when the request to somewidget.example.com takes place, the browser has already performed the DNS lookup ahead of time and users get the results delivered a bit sooner.

Browser support for DNS-prefetch at this time is present in all major desktop browsers. When support for DNS-prefetching is lacking, browsers simply retrieve resources in the usual way. No big deal.

What if the browser never requests the DNS-prefetched resource? Thankfully, DNS-prefetching is not a costly operation since it doesn’t send more than just a few hundred bytes over the network. Once again, no harm done.

Link Prefetching

Continue reading %Lightning Fast Websites with Prefetching%


Source: Sitepoint