Optimize Website Load Performance Using Preload, Prefetch & Preconnect

To optimize web performance and user experience, critical assets must be loaded as quickly as possible.

Modern web browsers use a variety of strategies and techniques to improve overall page performance, such as prioritizing the most important resources to be fetched and loaded.

Here are some of the ways to achieve this:

DNS Prefetch

DNS Prefetching enables the browser to carry out DNS Resolution (determining the IP to contact) in the background without interrupting the user's experience of the current web page. It is typically used to reduce the time it takes to establish a connection because the browser will take care of the DNS lookup process beforehand. As a result, the user won't have to wait for the DNS lookup to complete when they click on external links or other resources that the page will later need, hence it reduces latency.

DNS Resolution is the process of converting hostname/domain name to its corresponding ip address which the computer understands to communicate.
For eg: google.com to 216.58.215.78

The browser is accountable for carrying out the DNS lookup procedure and discovers all resources on a web page that need a DNS lookup and must wait for the lookup to be finished before downloading/accessing anything. DNS lookups typically take between 20 and 120 milliseconds to complete.

It is required to resolve domain lookup only once for a domain name and then the rest of the request for that domain can be carried out via that connection, but still, we can try to save this for the first time. Additionally, after 3–4 attempts, the DNS may be cached (depending on the browser/system). However, for mobile users, the duration of the initial DNS lookup is crucial.

When to use:

• When we depend on numerous domains for different types of resources.
• When we know we will need a domain's resources but don't yet know the specific URL.

Example:

Amazon resolves DNS-Lookup for its many resources domain on its home page using DNS-Prefetch, which it may load.

Amazon Home Page-DNS Prefetch usage

• For loading external CSS, fonts, js, etc from some third-party domain.

For instance, while using Google Fonts on a website, must be loaded before the page is rendered. We can prefetch its domain in this way.

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

where,
X-DNS-Prefetch-Control: on/off : directs the browser whether or not to perform DNS Prefetch. Even when enabled, it will only work in browsers that support it.
href : refers to the domain name to be resolved, and it will work without a scheme as well, so https://fonts.gstatic.com and https://fonts.gstatic.com both would work.

To check where DNS-prefetch is supported: https://caniuse.com/link-rel-dns-prefetch

Preconnect

To establish a connection with a domain name, the browser follows these three important time-consuming steps:

1. DNS lookup
2. TCP handshake (Initial Connection)
3. TLS negotiation (on secure websites i.e. HTTPS)

Time taken by Domain Name Resolution steps

While, we saw during DNS-prefetch that it only takes care of DNS-lookup, on the other hand, Preconnect resolves all three steps in advance and reduces round-trip latency.

Setting up a Preconnect connection and having it open for too long increases network competition and costs for both the client and the server side. So it's recommended to connect no more than 4–6 connections.

You can preconnect a webpage, using the following code
<link rel="preconnect" href="//example.com">

Example:

Google uses preconnect to resolve domains beforehand from where it has to load scripts, CSS, js & fonts
<link rel="preconnect" href="https://www.gstatic.com">
<link rel="preconnect" href="https://ssl.gstatic.com">

Where DNS-Prefetch can be used over Preconnect ?

• To support some old browsers where only DNS-Prefetch is supported there it can be used as a fallback to Preconnect
• Since it is advised to connect only 4–6 domains via Preconnect but still if we want to connect more resources then we can use DNS-Prefetch to speed up third-party domains.

Preload

Preload fetches the resources required for the current navigation without blocking the window's on-load event. Basically, using this resource hint, we can tell the browser to request the content before the browser has determined it needs to make the request. As a result, the resource is already available when the browser eventually realizes it needs to access one of the preloaded resources and thereby, improving the performance.

Preload is useful to load resources that are referenced by other resources like:

• Fonts that are referenced within a CSS file
• Critical resources that JavaScript dynamically loads
• Images or content that appear only after an API call has been made

Example:

Meesho, an e-commerce website uses preload to proactively fetch fonts and images that the browser would have known about only after downloading and parsing style.css and HTML content.

<link rel="preload" as="style" href="https://static-assets.meesho.com/css/mier-fonts.css?display=swap">
<link rel="preload" as="image" fetchpriority="high" href="https://images.meesho.com/images/products/157167814/u2gkw_400.jpg">

References:

• https://blog.dareboost.com/en/2020/05/preload-prefetch-preconnect-resource-hints/
• https://www.keycdn.com/blog/resource-hints
• https://www.splunk.com/en_us/blog/learn/preload-resource-hints.html#:~:text=A%20preload%20is%20a%20resource,preloaded%2C%20it%20is%20already%20there.