Skip to main content

Do you really know preload, prefetch, preconnect and dns-prefetch?

Β· 4 min read

We all know that the speed at which HTML external files load affects the first screen rendering time.To make it faster to load or use external resource files, we can add preload or prefetch to the link tag to implement preloading.

preload​

peload prioritizes resource loading so that it starts loading earlier (preloading) and can be used more quickly when needed. In addition, the onload event must wait until all resources on the page are loaded, and when preload is added to a resource, the resource will not block the onload.

how to use preload​

Suppose we now want to link an external main.js script. You might write it like this.

<script src="main.js"></script>

Now we want to preload the main.js script will be available as soon as they are required for the rendering of the page later on. We can add the preload attribute to the <link> tag in the <head> section.

<head>
  <link rel="preload" href="main.js" as="script" />
</head>

In addition to preloading scripts, preload can also specify other resource types via as, such as:

  • style : css stylesheet;
  • font : font file;
  • image : image file;
  • audio : audio file;
  • video : video file;
  • document : HTML document intended to be embedded by a <frame> or <iframe>.
  • embed : resource that is embedded in inside an embed element.
  • track : WebVTT captions track file.
  • fetch : Resource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.

prefetch​

preload is used to pre-load resources for the current page, while prefetch is used to load resources for future use (such as the next page) and tells the browser to download when it is free, which minimizes the priority of downloading resources.

prefetch

For example, configure the following code on the home page:

<link rel="prefetch" as="script" href="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js" />

We can see from the page that the download priority of the script has been lowered to lowest:

prefetch

After the resource is downloaded, it is stored in the browser cache. If the script is introduced in page A when the page is switched from the home page to page A, the browser directly reads the resource from the Prefetch cache to optimize resource loading.

prefetch-cache

preconnect​

When the browser requests a resource from the server, it needs to establish a connection. Establishing a secure connection requires the following three steps:

  • Query domain names and resolve them into IP addresses (DNS Lookup);
  • Establish an connection with the server;
  • Encrypt connections to ensure security (SSL);

All three of these steps require the browser to communicate with the server, and the back and forth between requests and responses can take a lot of time.

preconnect

At this point, you can optimize with preconnect or DNS-Prefetch, but what's the difference? How do you use it?

When we need to other sites under the domain of resource requests, needs to establish a connection with the domain, and then you can start download resources, if I know is which domain and communication, it can not establish a connection first, then when the need for resource requests can be downloaded directly.

Assuming the current site is https://a.com, the home page of this site needs to request the resource https://b.com/b.js. When comparing normal requests with requests with 'preconnect' configured, they appear differently on the request timeline:

preconnect

To establish a connection to https://b.com, do the following:

<link rel="preconnect" href="https://b.com" />

Using preconnect to establish early connections to third-party sources can reduce load times by 100ms to 500ms, which may seem trivial, but is a significant improvement in page performance and user experience.

dns-prefetch​

Usually we remember a website by its domain name, but for a server, it remembers them by IP. The browser uses DNS to convert the site to an IP address, which is the first step in establishing a connection and usually takes about 20ms to 120ms. Therefore, this step can be saved by dns-prefetch.

Why do you need dns-prefetch to reduce the first DNS lookup resolution when you can reduce the total connection setup time with preconnect?

If a page introduces a lot of third-party domain resources and they are pre-connected through preconnect, the optimization effect is not good, or even worse, so the alternative is to use preconnect for the most critical connections. For others, dns-prefetch can be used.

<link rel="dns-prefetch" href="https://cdn.bootcss.com" />

Therefore dns-prefetch can be used as a backup option for browsers that do not support preconnection, and can be configured with both:

<link rel="preconnect" href="https://cdn.bootcss.com" />
<link rel="dns-prefetch" href="https://cdn.bootcss.com" />

This article is original, without authorization, any media or personal we media and any statement reproduced

Commercial infringement will be investigated, if you need authorization please contact[email protected]

The original link:https://www.jstyro.com/blog/do-you-really-known-preload-prefetch-preconnect-dns-prefetch

Buy me a coffee