Resource Hinting Techniques
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="preconnect" attribute to the
<link > element.
<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 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
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>
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.