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.
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.
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.
There are some important restrictions as to what can be prefetched.
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.
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.
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.