67

Preload and prefetch are both used to request resources in advance so that later resource loading can be quick. It seems that I can interchange the two

<link rel="preload" href="foo.js" as="script">

<link rel="prefetch" href="foo.js">

without noticing anything difference.

What are their differences?

golopot
  • 10,726
  • 6
  • 37
  • 51

4 Answers4

51

preload

<link rel="preload"> tells the browser to download and cache a resource (like a script or a stylesheet) as soon as possible. It’s helpful when you need that resource a few seconds after loading the page, and you want to speed it up.

The browser doesn’t do anything with the resource after downloading it. Scripts aren’t executed, stylesheets aren’t applied. It’s just cached – so that when something else needs it, it’s available immediately.

prefetch

<link rel="prefetch"> asks the browser to download and cache a resource (like, a script or a stylesheet) in the background. The download happens with a low priority, so it doesn’t interfere with more important resources. It’s helpful when you know you’ll need that resource on a subsequent page, and you want to cache it ahead of time.

The browser doesn’t do anything with the resource after downloading it. Scripts aren’t executed, stylesheets aren’t applied. It’s just cached – so that when something else needs it, it’s available immediately.

Source

Dharman
  • 30,962
  • 25
  • 85
  • 135
  • 1
    Is it correct to say that preload will be blocking the UI and prefetch will be non-blocking? – hozefam Dec 02 '21 at 09:15
  • 3
    @hozefam Based on the MDN documentation, [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload) should not block the page. "The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance." – n4ks Feb 03 '22 at 13:38
41

Addy Osmani wrote an article that goes into the details of this, but the short version is:

preload is a declarative fetch, allowing you to force the browser to make a request for a resource without blocking the document’s onload event.

Prefetch is a hint to the browser that a resource might be needed, but delegates deciding whether and when loading it is a good idea or not to the browser.

Legends
  • 21,202
  • 16
  • 97
  • 123
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
14

As seen in this dareboost blogpost

Downloading a resource and loading into browser can break into majorly four steps :

  1. Resolve the DNS of the resource’s origin (if necessary, i.e. if the browser has not already done so).

  2. Connect to the origin server (if necessary, i.e. if the browser is not already connected).

  3. Fetch the resource (if necessary, i.e. if the resource is not already in the user agent cache and still valid).

  4. And the last – according to the type of resource and the reason for which it was fetched – its evaluation and use.

For the browser to download resources more efficiently, we can indicate how to optimize these different steps.

  1. dns-prefetch: indicates to the browser that it should perform the resolution of a given domain name (determining the IP to contact) before that domain is used to download resources.

  2. preconnect: indicates to the browser that it should connect a given origin, before that domain is used to download resources. Preconnecting involves, like – dns-prefetch, the DNS resolution, but also the TCP handshake and TLS negotiation (if the page is secure).

  3. prefetch: indicates to the browser that it can download a given resource, even if it is not detected in the page. The resource is downloaded with a low priority.

  4. preload: tells the browser that it must download a given resource as soon as possible, with high priority.

Nate Anderson
  • 18,334
  • 18
  • 100
  • 135
Sunny Goel
  • 1,982
  • 2
  • 15
  • 21
7

rel="preload" loads a resource early for the current document before the body is parsed, potentially saving overall loading time.

As a hint with a lower priority, rel="prefetch" caches a resource for the next navigation after the current document has been loaded.

Chong Lip Phang
  • 8,755
  • 5
  • 65
  • 100