32

I remember reading about a meta tag that makes the browser preload a page. What's the tag again?

Leo Jiang
  • 24,497
  • 49
  • 154
  • 284

5 Answers5

62

Prefetching is included in a W3C spec under the name Resource Hints. It is implemented in Firefox, Chrome, IE 11, Edge, Opera after 12.1, and the Android Browser from 4.4.4, see the caniuse prefetch page for more and up-to-date details.

Also see the caniuse and spec pages for related technologies (supported browsers afterwards are retrieved from caniuse and up-to-date as of September 2015):

  • Prerendering caniuse / spec (IE 11, Edge, Chrome, Opera)
  • Preconnecting caniuse / spec (Firefox, Chrome 46, Opera 33)
  • DNS Prefetching caniuse / spec (IE9 (see note below), IE10, every other browser except Opera Mini and perhaps iOS Safari and the Android Browser)

IE 9 implemented DNS prefetching only but called it "prefetch" (caution!). Chrome for a while (at least as far as 2013) only did prerendering and DNS prefetching. IE11 implements lazyload, for images; Microsoft has tried to get it in the spec but so far it isn't. iCab is stated to have been the first browser to implement prefetching, although this behaviour was automatic, not controlled by the markup.

Historical background

The Mozilla Application Suite, and later, Firefox, implement the spec (the spec is actually based on Mozilla's early implementation of prefetching, which was somewhat based on the Link: header specified in RFC 2068 which has now been superseeded by RFC 2616 [which does not reference the Link: header]. See this old version of the docs () for more detail.) As per the documentation on MDN ():

Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.

The browser looks for either an HTML <link> or an HTTP Link: header with a relation type of either next or prefetch.

So the syntax is:

<link rel="prefetch" href="/path/to/prefetch" />

You can also use the Link: HTTP header:

Link: </page/to/prefetch>; rel=prefetch

Or a <meta> to simulate that same HTTP header:

<meta http-equiv="Link" content="&lt;/page/to/prefetch&gt;; rel=prefetch">

Note that the next relation can also be used, but its main function is to indicate the "next" page in the navigation, so you should not use it for resources or unrelated information. Prefetching is also performed on HTTPS connections.

iCab

iCab seems to () have implemented an early prefetching around 2001. iCab apparently prefetched all links to content pages (not resources), not following any hint the developer would have left in the markup.

Community
  • 1
  • 1
Félix Saparelli
  • 8,424
  • 6
  • 52
  • 67
  • don't forget about prerender for Chrome/IE http://code.google.com/chrome/whitepapers/prerender.html – albert Oct 20 '11 at 04:19
  • 1
    Link prefetching has been in WebKit for at least 3 years now, but I only have seen anecdotal and second-hand reports of it being available in iOS >= 4.4. DNS prefetching has been in Safari since at least 5.0.1. – Félix Saparelli Nov 19 '13 at 03:51
  • 2
    Made this community wiki because, as much as I love reputation, this topic is complex and far-reaching and really needs some love from people who know better than I do. Go, contribute! – Félix Saparelli Dec 07 '13 at 12:30
  • Hi, I was messing around with link prefetching for a while. I am just wondering that, if I add `` tags which contains `href`s of resources I want to prefetch dynamically to the page (using javascript), will it work? – Aruna Tebel Dec 14 '15 at 11:56
  • Not sure (try! and report back). But if you're using JS anyway, it would probably be just as easy to request the resources directly. – Félix Saparelli Dec 15 '15 at 05:32
5

There are a couple of ways how you can preload a page:

  • DNS prefetching tells the browser that some of the resources from another domain would be needed, so it can resolve the domain as quickly as possible. To do this, you have to add <link rel="dns-prefetch" href="//example.com"> in the <head> of the document. This might be helpful if you need to use 3rd party elements.
  • Preconnect takes it a step further and not only resolves domain names, but also makes a TCP handshake. If you preconnect to HTTPS it will do a TLS negotiation. In the header you have to add <link rel="preconnect" href="https://example.com/">
  • Prefetch downloads the resource and stores it in the browser cache to use it later. You can do <link rel="prefetch" href="imgs/image.png">. Note that this is up to the browser to decide whether it makes sense to download the resource (it might ignore you)
  • Prerender is the most powerful option. It tells the browser to request the URL and download all the assets. <link rel="prerender" href="http://example.com/page">. You should be pretty sure that the person will open the page, otherwise you will just waste his bandwidth.
Matthias Braun
  • 32,039
  • 22
  • 142
  • 171
Salvador Dali
  • 214,103
  • 147
  • 703
  • 753
  • 1
    One thing to note is that prerender has very low support (https://caniuse.com/#feat=link-rel-prerender) with the assumption that Google Chrome will soon deprecate it: https://groups.google.com/a/chromium.org/forum/#!msg/blink-dev/0nSxuuv9bBw/EMfaclV-AwAJ. Probably because it is easy to abuse and waste users band-width. – Null Sep 16 '18 at 11:38
3

Some user agents may choose to preload when this is present, but you can't bet on it.

<link rel="next" href="http://www.example.com/link-reference">
Stefan Kendall
  • 66,414
  • 68
  • 253
  • 406
Syntax Error
  • 4,475
  • 2
  • 22
  • 33
  • And this very post will improve the google-result of this question, as SO is indexed quite heavily and gets amazing page ranking. As per the one of the goals of this site, if the information only exists on one-off websites or web-pages across the internet, it would be better off here. – Stefan Kendall Oct 20 '11 at 03:19
2

This might not be a good answer to the question, but just for the info InstantClick.js can preload your links before you actually click on it.

How does it work

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by. InstantClick makes use of that time to preload the page, so that the page is already there when you click.

RSK
  • 17,210
  • 13
  • 54
  • 74
1

Prealoding the assets, is one of the hardest as well as simplest tasks in a FLASH or HTML5 project because we have done FLASH to HTML5 conversion projects.

The easiest kinds of preloaders are static preloaders used to load the movie in which they exist. For these preloaders, all you need to do is stop the movie on a preloader screen, usually the first frame of the movie, and keep it there until you are able to determine that the movie has been completely loaded into the Flash player.

The Preloader also stops any flickering or delay when changing uncached images on a web page since the same image has to be downloaded from the server every time it is needed to be displayed.

We have used jQuery HMTL5 Loader in our web apps(HTML5), you can see the Github Repo here.

This plugin needs a JSON file to get the files that it has to preload, and it can preload images, html5 video and audio sources, script and text files. In addition to this, it has a different type of loaders (circular,line, big counter,etc) and additional features so on.

It is implemented like this.

<script>
    var loaderAnimation = $("#html5Loader").LoaderAnimation();
    $.html5Loader({getFilesToLoadJSON:'json file',
        onUpdate: loaderAnimation.update,
        debugMode:false
    });
</script>

Its working perfectly in different browsers including Chrome, FireFox, Safari, Opera, etc and in mobile browsers.

Note: We have used this for our HTML5 web applications which runs in different platforms including android and iOS.

Tony Jose
  • 1,654
  • 1
  • 13
  • 25