🌐 Resource Preloading in HTML | One Byte Explainer

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 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 :

1. rel="preload": Actively fetch the resource and cache it, as needed for current navigation.
2. rel="prefetch": Fetch the resource in advance as it is needed for follow-up navigation.
3. rel="dns-prefetch": Perform DNS resolution for the resource for easy fetching later.
4. rel="preconnect": Perform a connection request to the resource and establish a connection for easy fetching later.
5. rel="prerender": Preload the resource in the background. However, one should note that this might negatively affect the user’s bandwidth.