What is Preconnect?

Preconnect (rel="preconnect") is an HTML rel attribute value that instructs the browser to connect to an external domain as early as possible. This helps reduce latency when the browser later requests resources from that domain.

For example, many websites integrate with third-party analytics services, such as Google analitico. However, the relevant Google Analytics script is loaded from an external domain (https://www.google-analytics.com/).

So, a developer can add the preconnect code below to the webpage.

<link rel="preconnect" href="https://www.google-analytics.com">

This code instructs the browser to establish a connection to the Google Analytics domain earlier than it normally would. That way, it can quickly fetch the script when it encounters the code instructing it to do so without needing to establish a fresh connection.

Without the preconnect code, the browser will only begin to establish a connection when it encounters the code instructing it to fetch the script. This may cause latency, as the browser must first perform DNS resolution, a TCP handshake, and TLS negotiation before it can start downloading the resource.

Preconnect is a resource hint. That is, it is part of a group of HTML directives that instruct browsers on how to load the resources required on a webpage. It es used with the HTML <link> tag and is usually placed in the <head> tag of the page’s HTML code.

Importance of Preconnect

Developers typically use the preconnect for crucial third-party assets, such as fonts, APIs, and scripts, hosted on external domains.

This helps to reduce latency, speed up page load time, and ensure the browser can quickly access resources on external domains. It also reduces the likelihood of SEO issues, such as cumulative layout shifts (CLS), which can negatively impact the user experience.

Without preconnect, the browser will only try to access the external domain when it needs the resource. As a result, other related resources on the page may have loaded before the required resource arrives.

In such cases, the delayed resource can alter the appearance of the page’s content. Fonts, for one, can disrupt the page’s layout and design. While the specific impact varies from page to page, the result is often suboptimal and in many cases, undesirable.

How Preconnect Works

Many websites load fonts from Google Fonts. Therefore, their webpage code will typically contain the following code instructing the browser to load their desired font from Google Fonts.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

However, the browser must first establish a connection with the Google Fonts domain before it can fetch the font in that URL. This connection requires the browser to interact with multiple systems, particularly the:

Domain Name System (DNS)
Seguridad de la capa de transporte (TLS)
Transmission Control Protocol (TCP)

This may take some time to complete and can become particularly obvious when the connection is slow. In such cases, the browser will use a fallback font until the desired font arrives.

This can negatively impact the user experience and cause cumulative layout shifts (CLS), which occur when the desired font replaces the fallback font. The cumulative layout shift is one of the metrics Google uses to evaluate your Elementos vitales web básicos and page experience, which is a factor de clasificación.

To speed up the connection and prevent issues like cumulative layout shift, developers include the following rel="preconnect" code to their webpage:

<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

los first code instructs the browser to preconnect to the stylesheet domain, while the second one instructs the browser to preconnect to the font file domain.

When the browser encounters them, it establishes a connection to the specified domains and completes its DNS resolution, TCP handshake, and TLS negotiation with them.

Later, when the browser encounters the code instructing it to fetch the font from Google Fonts, it reuses the already established connection, which reduces latency and speeds up the time it takes for the font to load.

Similarities Between Preconnect, Prefetch, and Preload

Preconnect, preload (rel="preload"), and prefetch (rel="prefetch") are related resource hints. Like preconnect, they guide the browser on how to load resources that may or will be required on a webpage. Specifically:

Preconnect instructs the browser to establish an early connection to an external domain
Preload instructs the browser to load a critical resource like a font or script early during the initial page load
Prefetch instructs the browser to load resources that may be needed later, such as content for the next page

In simpler, non-technical terms:

Preconnect prepares the connection
Peload fetches critical resources early
Prefetch fetches non-critical resources for future use

Bloggers typically use all three, along with other resource hints, to significantly improve page load time and user experience.

Preconnect Best Practices

rel="preconnect" is a helpful resource hint for developers who want to improve user experience. However, it is only effective when used correctly. Here are some best practices to keep in mind.

1 Only Use Preconnect for Critical Third-Party Domains

Preconnect uses up bandwidth, browser, and server resources. It also consumes a part of the user’s data plan. Browsers also have limits on the number of simultaneous connections they can manage.

Therefore, use the preconnect resource hint sparingly. Specifically, ensure to only use it for essential resources that are required early in the page load. Do not overuse it, and refrain from using it for non-critical resources.

2 Place It in the <head> Tag of the HTML Code

Place preconnect hints in the document’s <head> tag. While you can technically place it in the <body> tag, the browser may not see it early enough, which will negate the whole point of adding it in the first place.

3 Avoid Using Preconnect for Resources on the Same Domain

It is not necessary to preconnect resources on the same domain as the webpage. The browser already has those connections open or can manage them efficiently. So, preconnect will not introduce any performance benefit.