HTML <link rel="preconnect">

#preconnect #html #rel

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

Definition and Usage

The rel="preconnect" attribute of the <link> tag specifies that the browser should preemptively establish a connection to the external domain specified by the href attribute.

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

This allows the browser to reduce the time required to establish a connection to an external domain, making it faster to load resources from that domain (such as images, scripts, and fonts).

Before requesting resources from an external domain, the browser performs several connection steps:

It looks up the domain name to find the server's IP address. This is called a DNS (Domain Name System) lookup.
After confirming the IP address, it establishes a connection to exchange data with the server. This is called a TCP (Transmission Control Protocol) connection.
If a secure connection such as HTTPS is required, the browser establishes a secure connection via a TLS (Transport Layer Security) handshake.

These connection processes can vary depending on network conditions and may introduce a certain amount of latency when the browser first requests resources from an external domain.

Preconnecting to External Domains

The <link> tag's rel="preconnect" attribute allows the browser to establish a connection in advance to the external domain specified by the href attribute. This allows the browser to reduce the time required to establish a connection to an external domain, making it faster to load resources from that domain.

The simplest way to preconnect to an external domain is to add the <link> tag to the document's <head> tag.

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

The example above connects a stylesheet provided by Google to use Google Web Fonts.

The URL (https://fonts.googleapis.com) of the stylesheet provided by Google is an external domain. In the example above, the rel="preconnect" attribute of the <link> tag is used to specify that the browser should establish a connection in advance to the https://fonts.googleapis.com domain.

By specifying the external domain to preconnect to with the rel="preconnect" attribute of the <link> tag before requesting external resources, the browser prepares a connection to that domain in advance, reducing the time required to load resources afterward. You can repeat the above code for each external domain you want to preconnect to.

Important Considerations

# Apply Only to Necessary External Domains

The rel="preconnect" attribute of the <link> tag is quite useful, but applying it to every external domain can be counterproductive. This is because it can create unnecessary overhead for the browser and reduce the actual benefits of preconnecting. Be careful not to preconnect to too many external domains.

If you need to preconnect to many external domains, using the rel="dns-prefetch" attribute of the <link> tag is recommended.

The rel="dns-prefetch" attribute of the <link> tag can reduce DNS lookup time by allowing the browser to perform the DNS lookup, which is the first step in connecting to an external domain, in advance. Therefore, compared to the rel="preconnect" attribute of the <link> tag, it requires fewer connection-related tasks from the browser and can reduce the negative impact (such as performance degradation) on initial loading performance when used for multiple external domains.

# No Effect on the Same Domain

The rel="preconnect" attribute of the <link> tag saves the time required to establish a connection to an external domain. Because the same domain is already connected, preconnecting to it has no effect.

References