🌐 Resource Preloading in HTML | One Byte Explainer

everlygif

Everly Precia Suresh

Posted on June 15, 2024

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

  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.
💖 💪 🙅 🚩
everlygif
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.

Related

Dev challenge - Algorithms
devchallenge Dev challenge - Algorithms

June 24, 2024

One Byte Explainer: Large Language Models
Data Compression: Under 256 characters
devchallenge Data Compression: Under 256 characters

June 24, 2024