Save 100–500 ms webpage load time using Resource Hints

Sitebee

Technical SEO
Staff member
Preload, dns-prefetch, prerender, preconnect, and prefetch are commonly known as Resource Hints (by W3C). They are used for informing the web browser that your website intends to establish connections to assets and resources, and that you would like the process to start as soon as possible.

You can speed up the webpage load time around 100–500 ms (milliseconds) by establishing early connections to important third-party origins (source Google) and first-party origins. If you translate that to Core Web Vitals assessment it will potentially speed up LCP (Largest Contentful Paint) and FID (First Input Delay) by up to half a second.

You are most likely to see or implement browser resource hints in the HTML head section of a webpage. They are used for early browser connections to asset files such as Stylesheets and JavaScript files (and even images).

Below is an example of a preload within the HTML head.
Code:
<!-- preload stylesheet via HTML head -->
<link rel="preload" href="/assets/main.css" as="style">

Code:
<!—Resource Hints family via HTML head -->
<link rel="prefetch" href="/assets/main.css" as="style" />
<link rel="preload" href="/ assets/main.css" as="style" />
<link rel="preconnect" href="https://website.com" />
<link rel="dns-prefetch" href="https://website.com" />
<link rel="prerender" href="https://website.com/resource.php" />


Were you aware that you can implement resource hints such as preloading and prefetching using HTTP Headers?
Code:
# Add Header Preload Stylesheet via HTTP header
Link: < /assets/main.css >; rel=preload; as=style

The HTTP headers are used to pass additional information between the clients and the server through the request and response header.
Code:
# Add Headers Resource Hints family via HTTP header
Link: < /assets/main.css>; rel= prefetch; as=style
Link: < /assets/main.css>; rel=preload; as=style
Link: < https://website.com>; rel= preconnect; as=style
Link: < https://website.com>; rel= dns-prefetch; as=style
Link: < https://website.com/resource.php>; rel=prerender; as=style

By using resource hints, you are instructing the browser that you would like to fetch the assets much sooner than the browser would otherwise discover them.