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.
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 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 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 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.
Top comments (0)