Netscape DevEdge

Skip to: [content] [navigation]

Prefetching Content for Increased Performance

This article shows how to speed up web page loading times by prefetching content for sites that a user is highly likely to visit.

Introduction

Link prefetching is a browser feature that allows an HTML page to retrieve web content when an end user's browser connection is idle. The prefetched content gets stored into the browser's cache, and will therefore appear quickly once the user goes to the page containing the prefetched content. It's important to note that prefetching will be stopped when the user clicks on a link, loads a new page, or makes the browser do any sort of networking activity. Partially prefetched content is still stored in the user's cache.

The prefetching mechanism described in this article is the one implemented in Netscape Gecko-based browsers.

How to Set Up Prefetching

Figure 1 : How to prefetch content in an HTML document

Using the HTML link element:
<head>
  <link rel="prefetch" href="/images/big.jpg">
</head>

Using a meta header
<meta HTTP-EQUIV="Link" CONTENT="</images/big.jpg>; rel=prefetch">

As shown in Figure 1, a web page can specify what content may be prefetched via the link tag with the rel attribute set to prefetch or next and the href attribute pointing to the content that should be prefetched. The link tag has to be inside the head tag to make prefetching work. Is is also possible to do the same with a meta tag in the HTML document. An HTML document can contain multiple such prefetching "hints." Each hint is processed serially (one at a time), not in parallel. Prefetching is broken off when the browser needs to connect to the network, such as loading new content.

Whenever Netscape 7.x prefetches content, it sends a X-moz: prefetch header with that request. This allows the server to distinguish a prefetch request from a normal HTTP request by the browser.

What Can Be Prefetched?

HTML documents can be prefetched simply by pointing to the html file (<link rel="prefetch" href="document.html"> for example), however none of the linked media such as images and external stylesheets/javascript files are prefetched. Since a document can contain multiple prefetching commands, it's easily possible to prefetch external media as well by adding more hints.

What Cannot Be Prefetched?

There are some important restrictions as to what can be prefetched.

Example

An example of prefetching is the DevEdge Wallpaper Gallery, where the user can navigate several pages with DevEdge-themed wallpapers. Each image is about 120k, so a end user will usually have to wait a bit before the image is retrieved and displayed. Two versions of the Gallery exist for comparison - one with prefetching hints and one without prefetching. Even on a broadband connection the images load much faster out of the cache than freshly from the network. When testing, be sure to clear your cache each time you run the example. You can clear your Netscape 7.x cache by going to the Edit menu, choosing Preferences, expanding the Advanced item from the left-hand tree and clicking on Cache. Then click the "Clear Cache" button.

Example with prefetching
Example without prefetching

There is also a narrowband-testable version where the images are under 20k in size:
Example with prefetching (for narrowband users)
Example without prefetching (for narrowband users)

One real-life example of prefetching is on AOL Search. The top two search results are prefetched, as there is a high likelihood that the user will visit those pages.

Supported Browsers

Netscape 7.01 and above as well as Mozilla 1.2+ support link prefetching. Opera 7 will prefetch the content referenced by the link tag with an rel attribute set to "next" only if the user presses "ctrl-x".

Browsers which do not support link prefetching will simply ignore the prefetching code.

Recommendations

Prefetching makes sense when it's very likely that the user will visit the prefetched content. An example would be the top story on a news site, the top search results of a search query, or, in case of a image gallery, the next image to be shown.

Resources

A+R