Resource hints are a set of HTML tags that allow you to provide hints to the browser about how it should handle resources on your website. These hints can be used to improve page load times and overall performance by helping the browser to prioritise resource loading and reduce latency.
Resource hints are like a trail of breadcrumbs that you leave for someone to follow. Just as breadcrumbs can help guide someone to a destination more quickly and efficiently, resource hints can help guide the browser to load resources in a more efficient manner.
There are several types of resource hints available, each with its own purpose:
Prefetch: Prefetch hints tell the browser to download resources that are likely to be needed in the future, such as images or scripts that are used on subsequent pages. This can help to reduce latency and improve page load
Prefetch code example:
<link rel=”prefetch” href=”/path/to/image.jpg”>
Preload: Preload hints tell the browser to download resources that are critical to the initial render of the page, such as CSS or JavaScript files. By doing so, the browser can prioritise the loading of these resources and reduce the overall load time of the page.
Preload code example:
<link rel=”preload” href=”/path/to/your/javascript.js” as=”script”>
Also see:
DNS-prefetch: DNS-prefetch hints tell the browser to perform a DNS lookup for a particular domain before the resource is actually needed. This can help to reduce latency and improve page load times by reducing the time it takes for the browser to look up the domain.
DNS-prefetch code example:
<link rel=”dns-prefetch” href=”//example.com”>
How to Implement Resource Hints
Implementing resource hints in your website is straightforward. You can add them directly to the HTML header of your page by including the appropriate link tag with the rel attribute set to the desired hint type (prefetch, preload, or dns-prefetch).
For example:
<head>
  <link rel=”prefetch” href=”/path/to/image.jpg”>
  <link rel=”preload” href=”/path/to/your/javascript.js” as=”script”>
  <link rel=”dns-prefetch” href=”//example.com”>
</head>
Note: not all browsers support all types of resource hints, so you should consult with a Pagespeed Specialist to determine the best approach for your specific website and business needs. Additionally, you should use resource hints judiciously, as overuse can lead to increased latency and slower load times.
This post is part of: Page Speed Optimisation: A Complete Guide — created by our Page Speed Optimisation Specialists.
In this series:
