What is Prefetching?
Prefetching, also known as DNS prefetching, is the process of resolving your site’s IP address before a visitor clicks its link. It’s an important tool for reducing latency associated with DNS resolution, thereby enhancing your site’s user experience (UX).
Often confused with server-side caching, prefetching differs in that it functions within each visitor’s browser—without affecting network or browser resources. It does so by resolving your site’s IP address before a visitor clicks its link.
The prefetching process can be broken down as follows:
1. A visitor’s browser begins rendering one of your cached web pages.
2. Concurrently, their browser looks ahead at links embedded on the page and resolves their domain names.
3. Before a visitor clicks one of those links, its target IP has already been fetched and the browser can immediately begin pulling content.
Domain names contained within a webpage’s hyperlinks can be sensed and prefetched by most browsers. But they might not pick up those within scripts, or those in markup injected by analytics and social sharing platforms. Prefetching may also miss addresses that redirect to other domains.
Here, it’s possible for web developers to manually specify domains browsers are to prefetch by inserting DNS directives in the page’s <head> section, e.g.:
<link rel="dns-prefetch" href="//someserver.com">
Additional Site Optimization Methods
In addition to prefetching, other website optimization methods include preloading and pre-rendering.
Preloading – Resources (e.g., script files, images, stylesheets) are stored in a browser’s local cache in advance. Developers do this by adding <link rel=”preload”> instructions in a page’s <head> section. Here is a JavaScript example:
<link rel="preload" href="http://cdn.someserver.com/library.js">
Since requested resources are pulled from the local browser cache rather than having to be downloaded, subsequent page requests are sped up. In contrast to prefetching, however, this method is resource and network intensive and should only be used when there’s a high likelihood a given resource will be accessed in the near future.
Pre-rendering – An entire page—including its resources—is loaded while simultaneously being rendered in the background. Page load times are dramatically reduced and your site visitor’s perception is that of near-instantaneous visibility once a page is requested. The following is an example of the pre-rendering directive:
<link rel="prerender" href="http://someserver.com/page.html">
But like preloading, pre-rendering is an intensive process that should be used judiciously. That is, it’s only of benefit when it’s fairly certain any given site visitor is going to request a given page.
Site Optimization Using a CDN
Prefetching is just one method for speeding up content delivery and preventing visitors from leaving your site because of slow page load times.
Content delivery networks (CDNs) achieve this by storing cached copies of your site content on a network of strategically placed points of presence (PoPs). At the ready for rapid retrieval, content is served to site visitors from the PoP located in their geographic vicinity, decreasing round trip time.
Beyond basic content caching, CDN site optimization methods include image optimization, minification, and anycast traffic routing, covered earlier in this series.
Try Imperva for Free
Protect your business for 30 days on Imperva.
