Although everyone's goal is to reduce the web performance budget, it is still necessary to utilize third-party services. When using these services, the "DNS lookup" times can consume a significant portion of the budget, depending on the number of services. These loads affect various aspects of page speed, including First Contentful Paint (FCP).

The purpose of these two concepts is to optimize third-party connection times. Before understanding the differences between these two concepts, it is necessary to understand what exactly happens when a third-party request is made:

  1. The domain is resolved to obtain an IP address.
  2. A connection is established with the server.
  3. The connection is encrypted to ensure security.

This hierarchy is repeated for each third-party connection. This is where the difference between preconnect and dns-prefetch comes into play.

  • Preconnect: Ensures that all three steps mentioned above are pre-configured.
  • DNS-Prefetch: Only serves to convert the domain name to an IP address in the first step.

As you can see, preconnect is more comprehensive and beneficial. However, everything comes at a cost. Using preconnect for all your connections could negatively impact the optimization of your page. Therefore, you should use preconnect only for critical connections and use dns-prefetch for all other third-party connections.

image-14.png
Source: https://web.dev/preconnect-and-dns-prefetch/

Summary of Usage

Given the information above, here's a quick summary of their usage:

<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">

Browser Compatibility

While discussing their usage, it's also important to mention browser compatibility. These two closely related concepts are widely supported by modern browsers, but their usage doesn't completely overlap. Preconnect is supported by approximately 97% of browsers, while dns-prefetch is supported by 83% of browsers (as of June 2024).

Contribution to Web Performance Budget

  • Preconnect can provide a total speed improvement of 100-500ms.
  • DNS-Prefetch can speed up each connection by 20-120ms.

We plan to conduct our own tests to provide more satisfying local examples.

Lastly, I would like to recommend and credit Ceyhun Enki Aksan's blog, which greatly contributed to my understanding while preparing this article: Ceyhun Enki Aksan's Blog.