Youn

Posted on Sep 1

HTML <link rel="dns-prefetch">

#prefetch #rel #html

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

Definition and Usage

The rel="dns-prefetch" attribute of the <link> tag specifies that the browser should preemptively perform DNS resolution for the external domain specified by the href attribute and cache IP address and other information required for connection.
This reduces latency when the browser connects to that domain, thereby improving connection speed.

<link rel="dns-prefetch" href="https://another-domain.com">

The rel="dns-prefetch" attribute of the <link> tag is used to improve connection speed when the current web page needs to connect to external domains.
There are many cases where a web page needs to connect to external domains.

When connecting to Google's service domain to use web fonts provided by Google
When connecting to the corresponding domain to add external libraries or scripts to a web page
When using externally hosted images or media on a web page

In these cases, using <link rel="dns-prefetch">
can improve page loading speed by allowing the page to connect to the corresponding external domains more quickly.

Usage Notes

# DNS Resolution for a Domain

Users remember websites by domain names, but servers identify them by IP addresses.
This is why DNS (Domain Name System) exists.
Browsers use DNS to convert a domain name into its corresponding IP address. This process is performed first when connecting to a domain. For example, suppose you link a CSS file provided by Google to use web fonts on your page. This file is located at an external domain path, https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap.

<head>
    ...
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap">
    ...
</head>

Using <link rel="dns-prefetch">
performs DNS resolution for the linked domain in advance and caches IP address and other information required for connection, saving DNS resolution time for the domain.

# How to Implement

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

<head>
    ...
    <link rel="dns-prefetch" href="https://fonts.googleapis.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital@0;1&display=swap">
    ...
</head>

This allows the browser to perform DNS resolution required to load Google web fonts in advance, which can improve page loading speed.
You can repeat the above code for each external domain you want to connect to.

# Important Considerations

- Not Supported by All Browser

The rel="dns-prefetch" attribute of the <link> tag is supported by many modern browsers, but it may not be supported by older browsers or some browsers.

- Do Not Overuse

Using the rel="dns-prefetch" attribute of the <link> tag for all external domains is not recommended. It should only be used when necessary. Excessive DNS lookups can consume unnecessary resources. This unnecessary resource consumption can cause the browser to operate inefficiently. In general, you should try not to perform more than 10 DNS lookups.

- Do Not Apply to Unused External Domains

Do not use it for external domains that are not even used on the current page.
This is simply wasteful and only causes unnecessary resource consumption by performing DNS lookups for domains that are not actually needed. This can cause the browser to operate inefficiently.

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

The rel="dns-prefetch" attribute can only be used with the <link> tag.

- Performance Improvement May Be Minimal.

The rel="dns-prefetch" attribute of the <link> tag can help improve web page loading speed, but the actual perceived speed improvement may be minimal. In particular, the effect may not be significant when the user's internet connection speed is slow or when the web page size is large.

References