Resource hints preemptively trigger the sequence of network connections and file downloads involved in loading the page. These are most useful for important resources that are not directly referenced in the HTML, giving 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 they should be used sparingly and purposefully.
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.
preconnect goes further in the process of connecting to third-party domains and includes any needed security protocol, saving even more time.
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
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 both important to the initial display of the page and not directly referenced in the HTML.
Images that are needed for above the fold content and indirectly called for through 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 an image referenced in the CSS,
preload tells the browser to load the image right away.
preconnect only need the
preload is a bit more complicated and adds the
as attribute, which indicates the file type. Common
This example preloads a CSS background image file that's needed for above-the-fold content but isn't referenced directly in the HTML:
preload a little more complicated still, for files that may not be supported by all browsers like some video file formats, the optional
type attribute will prevent browsers that don't support a particular file type from downloading it at all.
preload speed up the loading of resources that are needed as soon as possible,
prefetch is a lower priority version of
preload that downloads files that will very likely 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:
prerender works like
prefetch, but loads an entire page and all of its dependent files in the background.
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.
A summary of how to use each type of resource hint:
preconnectare for high priority but indirectly-called third-party domains like CDNs or external plugins.
preloadis for high priority but indirectly-called files like above-the-fold CSS background images.
prefetchis for files very likely needed on subsequent pages like HTML, CSS or images for the next page.
prerenderis for an entire page that's a very likely subsequent navigation.
And a few points to remember:
preconnectreference just the domain name, like https://example.com, whereas
prefetchreference a specific file, like header-logo.svg.
prerenderreferences an entire page, like blog.html.
preconnectshould also be used sparingly as some web browsers may limit the number of preemptive connections.
prerendershould be used with care to avoid downloading files that aren't used, which can be costly on mobile networks. Avoid using
prerenderunless 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
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:
Learn more about the best way to structure the loading process for speed:HTML Structure