🌐 Resource Preloading in HTML | One Byte Explainer
Everly Precia Suresh
Posted on June 15, 2024
This is a submission for DEV Computer Science Challenge v24.06.12: One Byte Explainer.
Explainer
Resource preloading in HTML can be achieved using the <link>
element with the rel
attribute to hint at the browser about resources that will be needed soon. Fetching resources in advance improves load time and webpage performance.
Additional Context
Here are some options you may consider :
-
rel="preload"
: Actively fetch the resource and cache it, as needed for current navigation. -
rel="prefetch"
: Fetch the resource in advance as it is needed for follow-up navigation. -
rel="dns-prefetch"
: Perform DNS resolution for the resource for easy fetching later. -
rel="preconnect"
: Perform a connection request to the resource and establish a connection for easy fetching later. -
rel="prerender"
: Preload the resource in the background. However, one should note that this might negatively affect the user's bandwidth.
💖 💪 🙅 🚩
Everly Precia Suresh
Posted on June 15, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.