What are the Resource hints-Preload, Preconnect, Prefetch and how to use them to optimize the website
According to w3.org resource hints is
A resource hint link is a
dns-prefetch,preconnect,prefetch, orprerenderrelationship that is used to indicate an origin or resource that should be connected to, or fetched, by the user agent.
Before jumping to its types we need to understand What is resource hints
Resource hints are hints or simple instructions that tell the browser or user agent, how it should handle specific resources or web pages. In other words, we can say, this set of instructions allows the browser to prioritize resources that need to be fetched and rendered.
how to use implement resource hints in your browser?
<link rel="dns-prefetch" href="htttps://dummy.com" as="image">
Resource hints are just guidelines that help the browser to decide, how to handle different resources.
Types of resource hints:
Preload: Load the resources that are critical but are later discovered by the browser.
Pre-connect: Use to establish a connection to other domains in the background like the CDN server.
Prefetch: Fetch the data that is used in the next navigation.
In this article, we are covering Preload only. For Prefetch and Preconnect check out my other articles.
(1)Preload: Although Preload is categorized as a hint or instruction but it is more like a command or you can say preload forces the browser to follow the instructions.
Definition: Preload is a declarative fetch allowing you to force the browser to download the resources that may be discovered later by the browser but these resources are crucial for the page, without blocking the document’s onload event.
<link rel="preload" as="image" href="profile.jpg">
Notes: By just preloading web fonts Shopify saw an improvement in time to text paint by 50%.
Use cases: You can preload images/content that appears after an API call is made. This is totally the developer's responsibility to use preload in the right manner, if these resources are mishandled then it can also put down website performance by just downloading unnecessary resources which is also a waste of bandwidth.
Important points related to Preload:
(1) Preload hints are mandatory and they help the browser to set resource priority.
(2) If you use preload excessively then it can use up valuable resources i.e bandwidth etc.
(3) Preload happens at the most critical time so use it wisely.
(4) It is bad practice to load the resources that are unused.
(5) Always preload critical content only.
(6) Avoid preloading contents which are non-existent.
(7) Preload data is stored in the HTTP cache.
(8) Preload overrides the priorities set by the browser.
(9) Preload helps the browser to determine the resource type so that these resources can be used in the future.
(10) Preload does not execute the filet but loads in the browser so that it can be consumed whenever needed.
Let’s do some practical:
Summary: This is all about preload, in the coming articles, i will cover pre-connect and prefetch in detail so stay tuned. I hope this help.
