Login/Register
What are the differences between html preload and prefetch?
Asked Answered
htmlpreloadprefetch
W

4

69

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?

Winn answered 11/10, 2018 at 16:1 Comment(0)
C
53

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

Careerist answered 19/2, 2020 at 7:26 Comment(2)
Is it correct to say that preload will be blocking the UI and prefetch will be non-blocking? – Ferroelectric
@Ferroelectric Based on the MDN documentation, preload should not block the page. "The preload value of the <link> element's rel attribute lets you declare fetch requests in the HTML's <head>, 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." – Whack
S
45

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.

Settera answered 11/10, 2018 at 16:1 Comment(0)
P
17

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.

Pirate answered 22/3, 2021 at 16:32 Comment(0)
D
8

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.

Diffident answered 19/2, 2020 at 7:20 Comment(1)
It doesn't need to be "next navigation". It's useful for hover images etc. – Aery

© 2022 - 2024 — McMap. All rights reserved.