What are the differences between html preload and prefetch?

Question

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.

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.

Prefetch , Preload , Preconnect are called resource hints

Preload is different from Prefetch in that it focuses on fetching a resource for the current navigation. prefetch focuses on fetching a resource for the next navigation.

Preload

preload is a new web standard that offers more control on how particular resources are fetched for current navigation. This is the updated version of subresource prefetching which was deprecated in January 2016. This directive can be defined within a element for example as . Generally it is best to preload your most important resources such as images, CSS, JavaScript, and font files. The preload directive actually overcomes this limitation and allows resources which are initiated via CSS and JavaScript to be preloaded and define when each resource should be applied.

Prefetch

prefetch is a low priority resource hint that allows the browser to fetch resources in the background (idle time) that might be needed later, and store them in the browser's cache. Once a page has finished loading it begins downloading additional resources and if a user then clicks on a prefetched link, it will load the content instantly

Preconnect

The final resource hint we want to talk about is preconnect. The preconnect directive allows the browser to setup early connections before an HTTP request is actually sent to the server. This includes DNS lookups, TLS negotiations, TCP handshakes. This in turn eliminates roundtrip latency and saves time for users.

For more info : https://www.keycdn.com/blog/resource-hints

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.

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.