Resource Hints
Page Speed ChecklistThe Best Explanation Of Resource Hints On The Innerweb
Resource hints preemptively trigger the sequence of network connections and file downloads involved in loading the page and are ideal for resources that are not directly referenced in the HTML.
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. Support varies, but most modern browsers can take advantage of the performance benefit. 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-prefetch
Similar to looking up an address on a map, when a user visits a website the browser begins the process of establishing a connection with the web server by finding the domain name on the internet. Although this usually takes only milliseconds, if a website loads files from a separate domain name - common for third-party resources - the browser makes a connection for each domain.
dns-prefetch
tells the browser to start that process right away, rather than as the need is discovered later in the loading process, saving that time.
<link rel="dns-prefetch" href="https://example.com">
preconnect
Similar to dns-prefetch
, preconnect
goes further in the process of connecting to third-party domains and includes any needed security protocol, saving even more time.
<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 rel="preconnect" href="https://example.com">
<link rel="dns-prefetch" href="https://example.com">
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.
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.
This example preloads a CSS background image file that's needed for above-the-fold content but isn't referenced directly in the HTML:
<link rel="preload" as="image" href="header-logo.svg">
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.
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, whereaspreload
andprefetch
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
andprerender
should be used with care to avoid downloading files that aren't used, which can be costly on mobile networks. Avoid usingprefetch
andprerender
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>
Resource hints can accept the optional media
attribute to specify conditions like media type or media queries to load files selectively for different screen and device configurations.
Putting It All Together
The exact configuration will vary depending on the resources that are loaded, but this is a simple example of how resource hints can help improve loading speed:
<!-- other <head> stuff -->
<!-- domain of font file(s) referenced in font CSS -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- images referenced in critical.css -->
<link rel="preload" as="image" href="header-logo.svg">
<link rel="preload" as="image" href="background-texture.jpg">
<!-- optionally increase loading priority of asynchronously-loaded font CSS -->
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:400&display=swap">
<!-- critical CSS -->
<link rel="stylesheet" href="critical.css">
<!-- asynchronous font CSS -->
<link rel="stylesheet" media="print" onload="this.onload=null;this.removeAttribute('media');" href="https://fonts.googleapis.com/css?family=Roboto:400&display=swap">
<!-- no-JS fallback for asynchronous font CSS -->
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400&display=swap">
</noscript>
</head>
(This example includes a technique to eliminate the render blocking effect of Google Fonts.)
Loading Structure
Make the most of resource hints by using them as part of a comprehensive system to load files efficiently and eliminate render blocking resources. Learn more about the best way to structure the loading process for page speed:
Eliminate Render Blocking Resources