Summary
Speed up your page by using resource directives:
- dns-prefetch: set up a DNS connection. Use this for all critical resources on external domains.
- preconnect: set up a DNS connection, plus some more. Use this for external sources you know the browser will need.
- preload: load the specified file in the cache. Use this for files that are required to display the page, such as a font that's specified in a stylesheet.
About Resource Directives
Resource Directives tell the browser which resources it should load first. Doing this correctly speeds up the loading time of a page. Adding a directive is straight-forward. Say we want to pre-connect to Google fonts so fonts are loaded quicker. We can add the following preconnect code to the head of our page:
<link rel="preconnect" href="https://fonts.gstatic.com">
We've just made the connection to Google Fonts a bit faster, and improved the overall loading time of the page.
To make meaningful improvements, you need to understand the difference between the directives and when to apply them. So let's dive in.
How resource directives improve performance
A web page is much more than just some HTML. You're using scripts, stylesheets, fonts, and images. Some of these reside on your server. Some may be sourced from third parties. While loading your page, the browser needs to fetch all these resources and turn them into a functioning web page. That requires a lot of connections. Resource directives help the browser decide where to start and save some time by running things in parallel.
dns-prefetch and preconnect
Preconnecting is all about setting up a connection. Most likely you're using various third-party scripts on your website. Examples are Google Analytics, Facebook pixels, Google Tag Manager, and external image providers.
Your browser needs some time to connect to those third parties. It needs to do a DNS lookup, set up the connection, and check for redirects. All that time adds up to the total loading time of your page.
Preconnecting is a way to tell the browser that it should be ready to connect to those third parties. You're preparing the browser, so it can complete its job faster. This results in faster loading times.
All you need to do is to add one line to the head of your page. Say we want to preconnect to Google Fonts. You need to add the following code to the head of your page:
<link rel="preconnect" href="https://fonts.gstatic.com">
The difference between dns-prefetch and preconnect
The technical details:
- dns-prefetch will do a DNS lookup
- preconnect will do a DNS lookup, plus the TCP negotiation and TLS handshake.
Forget the technical details, and remember that a preconnect is slightly more expensive in server resources. Therefore, you should only preconnect if you're sure you'll need the resource.
Additionally, browser support for DNS-prefetch is much better. Therefore you can always use dns-prefetch as a fallback, and include both in the head:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
Use preconnect sparingly. Connecting to more than 2 resources is usually unnecessary. Google Pagespeed Insights will show a warning: More than 2 preconnect links were found
Preloading key requests
Preloading goes a step further than just connecting. It's a hint to load the specified file as soon as possible. Contrary to preconnect and dns-prefetch, you should not provide a domain name, but the full URL of the file you're preloading.
Because the browser will load the file, and not just connect to its server, you should only preload files that are used on the page and would be discovered late by the browser.
A good example is fonts: say a font face is declared in CSS. Without preloading, the browser won't start loading that font after loading the CSS that specifies that font. By using preloading, you can instruct the browser to load that font ASAP. This reduces flickering texts while the page is loading.
Here's how you do that:
<link rel="preload" as="font" type="font/woff2" href="/fonts/fontawesome-webfont.woff2?" crossorigin/>
When to use preloading?
Some use cases for preloading are:
- Critical CSS: if you separated your stylesheet into a critical, inline part, and a below-the-fold stylesheet, it's recommended to preload the below-the-fold stylesheet. This helps to show the rest of the page properly for people that start scrolling quickly.
- Fonts defined in stylesheets: as described above, fonts may be defined in a stylesheet. Speed up the correct font display by preloading that font.
- Images defined in stylesheets: large background images defined in a stylesheet won't start loading until the CSS file is completely downloaded. By preloading the image, it will be displayed faster.
- Critical javascript: if you have a separate javascript file with critical javascript, it's a good idea to preload that, and make the page interactive ASAP.
Here's an example of a preloaded font: the network tab shows it now has high priority and is loaded even before the CSS that would otherwise trigger its loading.
Don't use preload for any other requests: you would just slow down the page load by unnecessarily loading resources that can be loaded later.
Cross-origin and As attributes
As you've seen in the above example, the preload element can include two additional attributes:
- Cross-origin: always include the cross-origin attribute when loading fonts.
- As: the as attribute explains the browser what type of file you're preloading. The most useful types are font, script, style, image. It helps the browser decide on the right priority, so it's recommended to always include the as attribute.
Browser support for resource hints
Resource hints are relatively new and not all browsers support them.
dns-prefetch is the most widely supported of the three, supported by all major browsers.
CanIUse dns-prefetch
Preconnect and Preload support is more limited: Firefox and Internet Explorer don't support these options.
CanIUse preconnect
CanIUse preload
Use dns-prefetch as a fallback for everything you're preconnecting, and preloading from an external site:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preload" as="image" href="https://www.example.com/background-image">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://www.example.com">
The above example preconnects to Google fonts, preloads a background image, and preconnects to both for browsers that don't support preconnect and preload.
Which resources to preconnect or preload?
Use preload only for the most critical resources, that are absolutely needed to display your page.
Use preconnect if you're sure that the resource on that domain needs to be loaded.
For less critical resources, use dns-prefetch. This will speed up the connection to those resources without blocking the loading of the rest of your page.
Google Pagespeed Insights or Google Lighthouse tell you which resources are good candidates for preloading or prefetching. Use these hints to decide what to preload.
Bonus: prefetch
Prefetch is very similar to preload, the only difference is that it's executed after the page is loaded. Preload gets a higher priority and tells the browser that that specific resource is required for the current page. Prefetch will happen later, for resources that are needed for a next navigation action.
Bonus (2): prerender
By prerendering, you specify the URL of a page. The browser will load that entire page with all its assets: images, javascript, stylesheets and what else. Don't do this. Unless you have a very specific reason, this will only slow down a page.
