Share via

Prerender and prefetch support

  • Article

Use prerender and prefetch in Internet Explorer 11 to improve your website's navigation. Prerender (also called preload) specifies a webpage to be loaded (rendered) in the background while the user reads the current page and prefetch identifies resources to be downloaded in the background. Because both features download content before it's needed, the resources are instantly available when needed by the user.

Here, you'll learn how to use link elements to prerender webpages and prefetch resources in the background.

  • Improve performance by getting things in advance
  • Loading background resources effectively
  • Specification

Improve performance by getting things in advance

As a user reads a webpage using IE11, the browser can load and render additional content in the background. As a web developer, you can identify the webpage and resources the user is likely to need next. By doing so, you improve the perceived performance of your website because the content is ready and can be displayed more quickly.

Suppose you've written an article that's broken into separate webpages. As the user reads each page, you can preload the next so that it's displayed when the user is ready for it. Or, if you've created a site containing several articles, you can use the home page to download stylesheets, images, and other resources used on each page so that each article loads more quickly.

You can use the link element to do this. As of IE11, the following values are now supported for the rel attribute:

Value Description and example
prerender

Identifies a webpage to load in the background, in case the user wants to navigate to it next.

Example:

IE11 can prerender one page in the background. If a second prerender request is encountered, it replaces the first request. Additional prerender requests are ignored.
prefetch

Identifies a resource file, such as an image or a CSS stylesheet, to be downloaded into the cache.

Example:

IE11 supports up to ten (10) prefetch requests. Additional requests are ignored.
dns-prefetch

Identifies a DNS query to resolve the background, so that requests can occur more quickly.

Example:

 

Note  Internet Explorer also supports the "next" and "prev" values for the rel attribute. For more info, see Determining flip ahead targets.

 

These link element values are supported only for top-level documents; they are ignored when applied to child (iframe) documents.

Target URLs must refer to individual filenames (relative or fully-qualified). Wildcards are not supported.

Loading background resources effectively

When you use the link element to preload a webpage, IE11 loads and renders the page in the background.

Loading a webpage in the background does not reduce the time required to load the page. The page requires the same number of network requests, whether it's loaded in the foreground or the background.

The difference comes from the user's perspective. Because prerendered pages load and render in the background, they display immediately when the user clicks the link. Because users don't watch the page load, they feel that it displays more quickly.

Prerendering requires these conditions:

  • If the user is on a metered network, the ability to prerender webpages depends on the data usage plan for the device used to view the page.
  • The target URL can't be a file download.
  • The target URL uses either the "http://" or the "https://" protocols.
  • The target URL is a top level document; that is, it can't be an iframe document.
  • Only one webpage can be prerendered at a time.
  • The document containing the link element is visible; that is, it is loaded in the foreground tab and is not minimized.

Pages can't be fully rendered in the background if any of these conditions apply:

  • The target page triggers a user interface change, such as an alert box, a call to window.open, or a security notification.
  • The target page automatically plays a media file using the video or audio element.
  • The target page modifies the travel log.
  • The F12 tools window is open.

In these cases, the target page is paused while in the background. When the user chooses the target page, it's displayed and rendering resumes from where it was paused.

Prerendered pages are not always displayed to the user. These conditions cause prerendered pages to be discarded from memory without being displayed:

  • The user doesn't open the target page within five minutes.
  • The user opens a different page.
  • The user switches to a different tab or browser instance.
  • A JavaScript process adds a new link element that requests a different webpage to prerender.
  • An error occurs while loading the target page, including HTTP error code 500 (server error), 404 (resource not found), or related errors (such as connection problems).

When a prerendered page is discarded and then requested later, it's loaded from the hosting server directly. If the page is still in browser cache, it might load more quickly; however, this is not guaranteed.

Loading a page in the background may lead to certain side-effects. Specifically, for activities run during a load event, you might find:

  • Microsoft ActiveX controls aren't loaded until the user displays the page. Use the readyState property to verify the objects are available before relying on them in JavaScript.

  • Certain animations may not appear when the page is displayed. This is likely because they've already run while the page was loaded in the background.

  • Timers may give unexpected results.

  • Cookies, cached content, and changes made by asynchronous operations (such as IndexedDB and web storage) are retained.

If you run into these or other related side effects, use the Page Visibility API to determine when the page is visible. Animations, for example, should be delayed until the page is visible. To learn more, see Effective use of prerender and prefetch.

Specification

HTML5, Section 4.12.5.9