How resource hints can help to improve website performance?
Tags: preload, prefetch, resourcehint, prerender
Published: 2024-01-15 12:32:21

Website performance improvement is one of the main concerns for webmasters. There are numerous methods and tips with which a website performance can be improved. Resource hints are one of those technical solutions that can perform a significant role in case of web page performance optimization.

## Resource hints introduction
Resource hints are used to notify the browsers how to behave with a page’s resources, so the page’s loading time will be decreased and the users will experience a better and faster web page visit experience. Resource hints are mostly used with the `<link>` rel attribute, but there are some other types of resource hints that are used differently.

Resource hints can be used in the HTML as `<link>` in the `<head>`, `<script>`, or they can be set as HTTP header.

![Resource hints usage percentage in HTTP header vs HTML markup
](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ewdetj7ffipjd5nc14k.png)
As shown above, it is more common to use resource hints in the HTML in preference to the HTTP header, because it is much easier to add or modify them in the HTML.

## What are the types of resource hints?
`preconnect`, `preload`, `prefetch`, and `dns-prefetch` are four resource hint types that are used with the `<link>` rel attribute.
There are also `Fetch Priority API` and `speculation rules API` which are considered resource hints as well.

### 1. preconnect
The `preconnect` resource hint is used to connect to crossorigin servers before the crossorigin resources are requested shortly. It is recommended to use the preconnect resource hint for the critical resources when there are many external resources to be loaded.

As an example, if you use Google fonts on your website, it is better to preconnect the fonts and add `crossorigin` attribute to the `<link>`, because it tells the browser that the preconnected resources are fetched through Cross-Origin Resource Sharing **(CORS)** mechanism, so the browser will use the same opened connection to access the fonts, otherwise, a new connection will be opened.

```
<link rel="preconnect" href="https://example.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
```
💡To preconnect the Google fonts, you need to preconnect to the https://fonts.googleapis.com where the `@font-face` is served, and to the https://fonts.gstatic.com where the font files are served.

### 2. dns-prefetch
The `dns-prefetch` is another resource hint which is used for crossorigin resources and is less costly than `preconnect`. This resource hint **only** does the DNS lookup on crossorigin servers. When there are many connections to crossorigin resources to be established, it is recommended not to overuse `preconnect` feature, but to use `dns-prefetch` resource hint instead.

💡Some old browsers may not support `preconnect`, you need to add `dns-prefetch` in an extra <link> after `preconnect` resource hint as a fallback.

💡The `dns-prefetch` must be loacated **AFTER** the `<link rel="preconnect">`.

```
<link rel="dns-prefetch" href="https://example.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
```
### 3. preload
The `preload` resource hint is used to download the critical resources that are needed for the initial page loading like the font files and the LCP element like featured image or image background in the CSS. By using `preload`, the browser downloads the resources before the parser arrives at their line in DOM. The `preload` can be used for both the website’s and crossorigin resources.

```
<link rel="preload" href="/lcp-image.jpg" as="image">
<link rel="preload" href="/critical.css" as="style">
```
If you want to use this resource hint for the external **CORS** resources, you need to use the `crossorigin` attribute to avoid downloading resources twice which causes more bandwidth usage. There is the opposite story for the non-CORS resources as well. You should **NOT** use `crossorigin` for those non-CORS resources to avoid downloading files for the second time.

```
<link rel="preload" href="/font.woff2" as="font" type="font/woff2 crossorigin>
```
As shown above, the “as” attribute should be used for crossorigin resources which is another important attribute that prevents the browsers from downloading resources more than one time. 

In the same example, the `as="font" type="font/woff2` tells the browser to download this resource as a font, so the browser will consider the resource type while prioritizing the resource downloading queue.

💡Fonts are considered as CORS resources, so it is mandatory to use the `crossorigin` attribute for fonts, even if they are self-hosted.

💡Avoid excessive use of `preload` resource hint as it downloads the resources with a high priority and overusing it can cause higher bandwidth usage and has negative effects on some Core Web Vitals (CWV) metrics’ scores and every rendering process-related parameter.

[Oxyplug Preload WordPress plugin](https://www.oxyplug.com/products/oxy-preload/) can help WordPress websites in preloading featured images without any need to make changes to the websites’ codes.

### 4. prefetch
The `prefetch` is another practical resource hint with which the browser can request the next-navigation resources with low priority. This resource hint can help to reduce loading time for next pages and is helpful in many cases. For example, if there is a specific user behavior pattern on your website, you can decide which resources be prefetched to boost loading speed, but in general, this feature can be costly too due to fetching resources that may not be utilized in the near future.

```
<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="/next-page.css" as="style">
```
💡It is possible to inject `<link rel=”prefetch”>` in a page dynamically.

💡Google recommends using the `speculation rules API` for prefetching instead of `<link rel=”prefetch”>`.

💡The `rel=”prefetch”` caches the resources in the HTML cache, while by using `speculation rules API`, the resources will be processed and kept in the memory and are available when they are requested.

[Oxy Prefetch and Prerender](https://www.oxyplug.com/products/oxy-prefetch/) is a light WordPress plugin with which prerendering and prefetching pages can be easily done without making changes to the website’s codes manually.

### 5. Fetch Priority API
The `Fetch Priority API` is another resource hint with which the priority of the resources on a page can be increased, so they can be loaded sooner. In modern browsers, page loading is done in two phases, first, the resources that are critical resources for initial page loading are loaded, and in the second phase, the rest of resources with a lower priority are fetched. By changing the priority of resources using `fetchpriority=”high”`, the resources with the **high** value will be fetched sooner during the mentioned first phase.

One of the effective usages of Fetch Priority API is for LCP images. By using `fetchpriority=”high”`, the LCP image can be fetched with a high priority and it can directly impact the LCP score.

```
<div class="gallery">
  <div class="lcp">
    <img src="img/lcp-element.jpg" fetchpriority="high">
  </div>
  <div class="thumbnails">
    <img src="img/thumbnail-2.jpg" fetchpriority="low">
    <img src="img/thumbnail-3.jpg" fetchpriority="low">
    <img src="img/thumbnail-4.jpg" fetchpriority="low">
  </div>
</div>
```
💡The `fetchpriority` attribute can be used in `<link>`, `<img>`, and `<script>` elements.

💡Before, the images on a page were loaded with a low priority, but after the Chrome 117 update, the first five images that are in the viewport, have the `medium` priority and the first two images are loaded immediately after the initial page loading. By changing the `fetchpriority` of the important images to high, they can be loaded sooner.

### 6. Speculation rules API
The `speculation rules API` is a method that is used to prefetch or prerender next-navigations. Earlier prerendering was done using `rel=”prerender”` attribute, but after getting deprecated, the prerendering process is done through `speculation rules API`.

💡The `<link rel=”prefetch”>` is only supported on the **Chromium-based browsers**. For other browsers, you need to use `speculation rules API` to prefetch resources.

```
<script type="speculationrules">
{
  "prefetch": [
    {
      "source": "list",
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>
```

```
<script type="speculationrules">
{
  "prerender": [
    {
      "source": "list",
      "urls": ["next.html", "next2.html"]
    }
  ]
}
</script>
```

## Which browsers do support resource hints?
The resource hints are almost supported in almost all modern browsers. You can find general information about resource hints browser support in the table below:

| Resource hint        | Chrome           | Edge  | FireFox | Opera | Safari |
| ------------- |:-------------:| -----:| -----:| -----:| -----|
| preconnect      | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| dns-prefetch      | ✔️ | ✔️ | ⚠️ | ✔️ | ✔️ |
| preload | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
| prefetch | ✔️ | ✔️ | ✔️ | ✔️ | ❌ |
| Fetch Priority API | ✔️ | ✔️ | ❌ | ✔️ | ✔️ |
| Speculation rules API | ✔️ | ✔️ | ❌ | ✔️ | ❌ |

⚠️**FireFox** only supports `dns-prefetch` on HTTP origins, but it does not support `dns-prefetch` on HTTPS origins.

ℹ️ The table above was prepared based on the information provided here: https://caniuse.com/?search=resource%20hints

## Conclusion
To sum up, by using resource hints, the page loading speed can be improved significantly, and it can result in better page performance and user experience. However, the way the resource hints are used is important as well, because overusing them can cause high bandwidth consumption and may have a negative impact on the loading speed.