When you input a URL to fetch content using the browser, certain processes occur under the hood - DNS resolution, request/response cycle and rendering.

• The Domain Name Server (DNS) matches the domain name to an IP address.
• The browser sends an HTTP request to the server and the server sends back an HTTP response.
• The browser begins rendering the HTML on the page while also requesting any additional resources.

Each subsequent request completes a request/response cycle and is rendered in turn by the browser. This request/response cycle is referred to as a round trip. This varies depending on network conditions. Establishing the connection ahead of time helps reduce the round trip and make applications faster.

In this article, I'm going to explore resource hinting techniques, the difference between them and performance gains that can be achieved with them.

Preload, Prefetch, and Preconnect

Preload, Prefetch and Preconnect are resource hinting techniques used to inform the browser of your intention to resolve specified domain names or establish connection to specified domains as soon as possible. Hinting browsers about needed resources helps improve the page load time as connections to important third-party origins must have been established prior to when they are needed.

This can be achieved by adding the rel="preload", rel="prefetch" or rel="preconnect" attribute to the <link > element.

Preload

Preload offers control on fetching resources for the current navigation. It is a high-priority hint. This is useful for fetching important resources - images, CSS, JavaScript, and font files needed to render a page without blocking the document's onload event and storing them in the cache. Using this, you can speed up resource loading and minimize the amount of time that fallback text is shown (for font files) when users visit your site.

<link rel="preload" href="https://domain.com" as="script">

For font files, you need to set crossorigin attribute as they are loaded in anonymous mode. When this is omitted, the browser performs DNS lookup only.

<link
  rel="preload"
  href="https://fonts.domain.com/font.woff2"
  as="font"
  type="font/woff2"
  crossorigin
>

Prefetch

Prefetch focuses on fetching a resource for the next navigation. It is a low-priority hint to the browser that a resource might be needed. There are different types of prefetching - link, DNS, and prerendering.

• Link prefetching notifies the browser to fetch resources that the user might request and store them in cache.

<link rel="prefetch" href="https://domain.com">

• Due to the limit placed on the number of domains the browser can pre-connect to at a specific time, DNS prefetch comes in handy. DNS prefetching notifies the browser to perform DNS lookups at the background. This minimizes latency and can be achieved by adding the rel="dns-prefetch" attribute to the <link> element. This is useful for fetching external resources - CDNs, Google Analytics, Google fonts etc.

<link rel="dns-prefetch" href="https://cdn.livechatinc.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://js-agent.newrelic.com">

• Prerendering is very similar to prefetching. It aggregates resources that the user is likely to navigate to next. In addition, it renders the entire page in the background. To test if a page is prerendered, navigate to chrome://net-internals/#prerender

Preconnect

Preconnect notifies the browser to setup connections (DNS lookups, TLS negotiations, TCP handshakes) before an HTTP request is sent to the server. This eliminates roundtrip latency and saves time for users.

<link href="https://cdn.domain.com" rel="preconnect" crossorigin>

Conclusion

Resource hinting helps to improve page load time when you need to use resources from third-party domains. However, only preconnect to critical third-party origins you will use within 10 seconds. If the connection is not used as soon as possible, the browser closes. This results to wasting time and users bandwidth needed to fetch other useful resources.