Youn

Posted on Aug 28

HTML <link rel="prefetch">

#prefetch #rel #html

😄 This post is based on the content from coding.courses.

Definition and Usage

The rel="prefetch" attribute of the <link> tag specifies that the browser should preemptively fetch the resource specified by the href attribute and store it in the cache. It is used to prefetch and cache pages that the user is likely to navigate to next from the current page, or resources loaded after the page has finished loading (such as scripts, images, and CSS files).

<link rel="prefetch" href="/app/module.css">

By doing this, resources expected to be used in the future are cached in advance.
When these resources are used later after the web page has loaded, there is no need to load them over the network from scratch, which saves loading time.

Usage Notes

# Prefetch

Understanding the term "prefetch" makes it easier to understand <link rel="prefetch"> and helps you better figure out how to use it.

"prefetch" refers to caching necessary data (or resources) in advance before they are needed, and then immediately using the cached version when needed. This helps speed up the loading and use of data and resources.

The <link rel="prefetch"> is the way this prefetching concept is applied in HTML.

# How to Implement

The simplest way to implement rel="prefetch" with the <link> tag is to add the <link> tag to the document's <head> tag.

Specify the resource path as the value of the href attribute.

<head>
    ...
    <link rel="prefetch" href="/app/module.js">
    <link rel="prefetch" href="/app/module.css">
    ...
</head>

You can use multiple <link> tags with rel="prefetch" in a single document.

# Important Considerations

There are several important considerations when using the rel="prefetch" attribute of the <link> tag.

- Apply Only to Resources Needed Later

Instead, <link rel="prefetch"> fetches pages that the user is likely to visit later, or resources needed after the page has finished loading, and stores them in the browser's cache. This can potentially speed up page loading when those resources are needed later, since they are already stored in the local cache.

- Distinguishing Between Same-Origin and Cross-Origin Resources

For example, assume that the URL of a web page is https://example.com/page-1.html.

In addition to https://example.com/styles.css from the same domain, resources from an external domain, such as https://other-domain.com/image.png, can also be prefetched using . However, when fetching resources from an external domain, appropriate CORS configuration is required depending on the browser's security policies.

- rel="prefetch" Can Only Be Used With the <link> Tag

The rel="prefetch" attribute can only be used with the <link> tag.
Using this attribute with tags other than the <link> tag, such as <a>, <img>, <video>, and <meta> tags, has no effect.

- Avoid Using Multiple <link rel="prefetch"> Tags for the Same Resource

Using multiple <link rel="prefetch"> tags for the same resource is not efficient and may put an unnecessary burden on the browser. If multiple prefetch requests occur at the same time, they can result in unnecessary network traffic and inefficient use of the browser's cache memory.

- <link rel="prefetch"> Does Not Affect JavaScript's onload Event

The JavaScript onload event occurs after all page resources have been loaded and the DOM tree has been fully constructed. The onload event is designed to occur after the DOM tree has been fully constructed and all resources have been loaded.

Resources prefetched using <link rel="prefetch"> do not affect DOM tree construction or the loading of other resources, so they do not affect when the onload event is triggered.

Therefore, when using the onload event to determine whether page loading has completed, there is no need to consider resources prefetched using <link rel="prefetch">.

- <link rel="prefetch"> Does Not Work Recursively

Practical Examples

# Prefetching the Next Page

While the user is visiting the current page, required resources for the next page can be prefetched to minimize the time required to navigate to that page.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Prefetching the Next Page</title>
        <link rel="prefetch" href="next-page.html">
    </head>
    <body>
        <h1>Current Page</h1>
        <a href="next-page.html">Go to the next page</a>
    </body>
</html>

# Optimizing Asynchronous Component Loading

In web applications, asynchronously loaded components can be prefetched to minimize loading delays when users request those features.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Optimizing Asynchronous Component Loading</title>
        <!-- Prefetch an asynchronously loaded component -->
        <link rel="prefetch" href="async-component.js">
    </head>
    <body>
        <h1>Current Page</h1>
        <p>
            To load the asynchronous component,
            click <button id="load-component">here</button>.
        </p>
        <script>
            const btn = document.getElementById("load-component");

            btn.addEventListener("click", () => {
                // Load the component asynchronously
                import("async-component.js").then(module => {
                    // Use the loaded component
                });
            });
        </script>
    </body>
</html>

References