Using Resource Hints to Accelerate Site Performance

Resource hints are snippets of HTML code that give the browser a head start by prompting selected files to begin loading sooner than if the browser discovered those same files through the normal course of evaluating and loading the page.

There are several types of resources hints, indicated with the rel attribute on the link element, each with a unique potential role in improving load time. Web browsers may also limit the number of domain/network connections made with resources hints, so resource hints should be used sparingly and purposefully.

DNS Prefetching

A DNS lookup is the process of turning a human-friendly domain name like example.com into the machine-friendly IP address like 123.54.92.4 that is actually needed in order to fetch a resource. For this process to happen it can take tens to hundreds of milliseconds.

We suggest using this on things such as Google fonts, Google Analytics, and your CDN.

But if you’re loading resources from other sites onto the page, the browser must spend time resolving the DNS information of each as it encounters them in the HTML. You can preempt this process by placing a dns-prefetch for external sites in the head of your page.

Example:

<!-- Prefetch DNS for external assets -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//www.google-analytics.com">
<link rel="dns-prefetch" href="//cdn.domain.com">

When the browser encounters this hint, it can start resolving the www.google-analytics.com domain name as soon as possible, even though it doesn’t know how it’ll be used yet. This enables the browser to get ahead of the game and do more work in parallel, decreasing the overall load time.

Use dns-prefetch when your page uses resources from a different domain, to give the browser a head start.

preconnect

Similar to dns-prefetch, preconnect goes further in the process of connecting to third-party domains and includes any needed security protocol(TLS negotiations, TCP handshakes). This in turn eliminates roundtrip latency and saves time for users.

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

In most cases, preconnect is preferable to dns-prefetch but isn’t supported by older web browsers. If desired, they can be used together, getting the benefit of preconnect in browsers that support it with a fallback to dns-prefetch:

<link href="https://www.jvm.com" rel="preconnect" crossorigin>

Consider using preconnect when you know for sure that you’re going to be accessing a resource and you want get ahead.

Be careful not to preconnect and then not use the connection, as this will both slow your page down and tie up a tiny amount of resource on the server you connect to too.

preload

While dns-prefetch and preconnect make the initial network connection, preload takes the process yet further and also downloads a specific file. This is ideal for resources that are important to the initial display of the page but not directly referenced in the HTML.

Generally it is best to preload your most important resources such as images, CSS, JavaScript, and font files.

For example, images that appear in above the fold content but are indirectly called for in a CSS file (rather than directly in the HTML like an img tag) are perfect candidates for preload.

Rather than waiting for the browser to analyze the HTML, download the CSS, analyze the CSS and then load the image referenced in the CSS, preload tells the browser to load the image right away.

Required Content Type

While dns-prefetch and preconnect only need the rel and href attributes, preload is a bit more complicated and adds the as attribute, which indicates the content type. Common as values include “image” for images, “style” for CSS, “script” for JavaScript and “font” for font files.

<link rel="preload" href="assets/web-fonts/DMSans-Regular.woff2" as="font" type="font/woff2" crossorigin>

Preload is a new web standard for loading resources for the current page, these can be script, style, image, font and document types.

Optional File Format

Like all link references, preload can also accept the type attribute to specify the MIME type of the file. For files that may not be supported by all browsers, the optional type attribute prevents browsers that don’t support a particular file format from downloading it at all.

<link rel="preload" as="video" type="video/webm" href="intro-video.webm">

prefetch

While dns-prefetch, preconnect and preload speed up loading resources that are needed as soon as possible, prefetch is a lower priority version of preload that downloads files very likely to be needed in the near future.

prefetch is typically used for files that will be needed on a page the user is likely to visit next.

prefetch is a low priority resource hint that allows the browser to fetch resources in the background (idle time) that might be needed later, and store them in the browser’s cache.

This example triggers a low priority download of the CSS styling for a page frequently visited after the current page:

<link rel="prefetch" as="style" href="blog.css">

prerender

prerender works like prefetch, but loads an entire page and all of its dependent files in the background.

<link rel="prerender" href="blog.html">

When To Use Each Type Of Resource Hint

Resource hints should be used purposefully and strategically to streamline the loading process. A quick review of how and when to use each type of resource hint:

• dns-prefetch & preconnect are for high priority but indirectly-called third-party domains like CDNs or external plugins.
• preload is for high priority but indirectly-called files like above-the-fold CSS background images.
• prefetch is for low priority files very likely needed soon, like HTML, CSS or images used on subsequent pages.
• prerender is for an entire page that’s a very likely subsequent navigation.

Points To Remember

• dns-prefetch & preconnect reference just the domain name, like https://example.com, whereas preload and prefetch reference a specific file, like header-logo.svg. prerender references an entire page, like blog.html.
• dns-prefetch & preconnect should also be used sparingly as some web browsers may limit the number of preemptive connections.
• Both prefetch and prerender should be used with care to avoid downloading files that aren’t used, which can be costly on mobile networks. Avoid using prefetch and prerender unless files are certain to be used later or extra data download isn’t an issue.
• Resource hints for font files (even when self-hosted) and CORS enabled resources will also need the crossorigin attribute:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

Similar articles you may like

• Speed Up Resource Loading with Priority Hints and fetchpriority
• Sass Interpolation – A Comprehensive Explanation
• A Guide to Web Font Optimization
• CSS Ellipsis (the 3 dots…) on Single OR Multiple Lines