Prebrowsing Resource Hints

As a web developer, you probably know how important it is to optimize the performance of your website or web application. One of the factors that affects the speed and user experience of your site is the network latency, which is the time it takes for the browser to communicate with the server and download the resources needed to render the page. Fortunately, there are some techniques that can help you reduce the network latency and improve the loading time of your site. These techniques are called Prebrowsing resource hints, and they allow you to tell the browser to perform some actions in advance, before the user actually requests them.

In this article, I will explain the three main types of Prebrowsing resource hints:

??preload, ??prefetch, ??preconnect, and how you can use them.

1- Preload is a resource hint that tells the browser to load a specific resource as soon as possible, even before it is needed by the page. This is useful for resources that are essential for the initial rendering of the page, such as images, fonts, stylesheets, or scripts. By preloading these resources, you can avoid blocking the rendering of the page and improve the perceived performance.

To use preload, you need to add a link tag to the head of your HTML document, with the rel attribute set to preload, and the href attribute set to the URL of the resource. You also need to specify the type of the resource using the as attribute, which helps the browser to set the correct priority, headers, and content security policy for the request.

For example, to preload a font file, you can use the following code:

<link rel="preload"  as="font" crossorigin>        

Note that you need to add the crossorigin attribute for resources that are loaded from a different origin than your site, otherwise the browser will not apply the preload hint. You can also use the media attribute to specify the media query that the resource matches, which helps the browser to load only the relevant resources for the current device.

For example, to preload an image that is only used for screens larger than 600px, you can use the following code:

<link rel="preload"  as="image" media="(min-width: 600px)">        

You can also use the image srcset and image sizes attributes to preload responsive images, which allows the browser to choose the best image source and size for the current device. One thing to keep in mind when using preload is that you should only preload resources that are critical for the initial rendering of the page, and that you will use within a few seconds after the page load. Otherwise, you may waste bandwidth and resources, and the browser may warn you that the resource was not used. If you want to preload resources that are not critical for the initial rendering, but may be needed later, you can use prefetch instead.

2- Prefetch

Prefetch is a resource hint that tells the browser to load a specific resource in the background, after the page has finished loading. This is useful for resources that are not essential for the current page, but may be needed for the next navigation, such as images, fonts, stylesheets, or scripts. By prefetching these resources, you can reduce the network latency and improve the loading time of the next page.To use prefetch, you need to add a link tag to the head of your HTML document, with the rel attribute set to prefetch, and the href attribute set to the URL of the resource. You do not need to specify the type of the resource, as the browser will use the default priority and headers for the request. For example, to prefetch a script file, you can use the following code:

<link rel="prefetch" >        

One thing to keep in mind when using prefetch is that you should only prefetch resources that are likely to be needed for the next navigation, and that are not too large or too many. Otherwise, you may waste bandwidth and resources, and the browser may limit or cancel the prefetch requests. If you want to prefetch resources that are not likely to be needed for the next navigation, but may be useful for future navigations, you can use prerender instead.

3- Preconnect

Preconnect is a resource hint that tells the browser to establish a connection with a specific origin, before the browser requests any resources from that origin. This is useful for origins that are used to load multiple resources for the page, such as images, fonts, stylesheets, or scripts. By preconnecting to these origins, you can reduce the network latency and improve the loading time of the resources.To use preconnect, you need to add a link tag to the head of your HTML document, with the rel attribute set to preconnect, and the href attribute set to the origin of the resource. You do not need to specify the type of the resource, as the browser will use the default priority and headers for the request. For example, to preconnect to an origin that hosts images, you can use the following code:

<link rel="preconnect" >        

Note that you need to add the crossorigin attribute for origins that are different from your site, otherwise the browser will not apply the preconnect hint. One thing to keep in mind when using preconnect is that you should only preconnect to origins that are used to load multiple resources for the page, and that are not too many or too far away. Otherwise, you may waste bandwidth and resources, and the browser may limit or cancel the preconnect requests. If you want to preconnect to origins that are not used to load multiple resources for the page, but may be useful for future requests, you can use dns-prefetch instead.

Follow Muhammad Afzal for more articles on frontend system design.