What are the differences between html preload and prefetch?

Question

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

Answer 1

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. This is not to be confused with browser preloading in which only resources declared in HTML are preloaded. 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.