Resource hinting in HTML

Resource hinting in HTML

we can use various directives for effective resource management of our webpages

TheWasmFrontier's photo
TheWasmFrontier
·

2 min read

Resource management is one of the most important tasks to do while creating a webpage to make our page performant. In HTML various directives are used to preload the resource, define the priority etc. to maintain good performance of our webpage

Today we will talk about 5 of them

  1. preload

  2. preconnect

  3. dns-prefetch

  4. prefetch

  5. Fetch priority API

preload

This directive should be used only with those dynamic resources that could not be discovered by the preload scanner of the browsers like background-image in CSS, @import directive in CSS, dynamic scripts etc.

<link rel="preload" href="some-bg-image.jpg" as="image">

it requires crossorigin attribute when we are loading resources from different origins.

Next.js uses it to preload the components of all of the links which appear in the viewport

<link rel="preload" href="https://someotherorigin.com/some-bg-image.jpg" as="image" crossorigin>

preconnect

This directive should be used to connect to an origin from which you are going to fetch large amounts of cross-origin resources before the preload scanner does so.

<link ref="preconnect" href="https://someotherorigin.com" crossorigin>

crossorigin attribute should be used if we want the resource to be fetched using CORS.

dns-prefetch

This directive should be used when we have multiple different endpoints to fetch resources from, this directive performs the DNS lookup for the endpoint which reduces the time required to load the resource by a little bit. It does not load the resource but just performs a DNS lookup.

<link rel="dns-pretech" href="https://someotherorigin.com">

prefetch

This directive is used to preload a resource that can be used by future pages that the user might navigate to in the future. It may lead to resource wastage as the user may never navigate to the webpage whose resources have been prefetched.

<link rel="prefetch" href="/next-page.js">

Fetch Priority API

Using this API we can set the priority of a resource on the webpage such that whether it should be loaded as a critical resource or low priority as non critical resource

 <img src="critical.jpg" fetchpriority="high">
 <img src="non-critical.jpg" fetchpriority="low">

you can refer to this article for more information

thanks for reading

HTML5webdev