🌐 Resource Preloading in HTML | One Byte Explainer
Everly Precia Suresh

Everly Precia Suresh @everlygif

About: Passionate about software development and emerging technologies, I'm committed to exploring diverse fields and driving innovation.

Location:
India
Joined:
Jan 24, 2022

🌐 Resource Preloading in HTML | One Byte Explainer

Publish Date: Jun 15 '24
18 0

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.

Comments 0 total

    Add comment