Speed Up Your Website With rel='preconnect'

Improving website performance often comes down to making things faster for the user. One simple yet effective technique to do this is using preconnect. Preconnect allows your browser to establish a connection to external domains before they’re needed, reducing wait times for key resources.

What is Preconnect?

When your website loads resources from external domains—whether it’s for images, analytics, or embedding third-party content—the browser has to establish a connection with that domain. This involves multiple steps like DNS lookups, establishing a secure connection, and other network handshakes. These steps take time, especially on slower networks.

By using <link rel="preconnect">, you can tell the browser to start setting up these connections early, before they’re needed. This way, when the actual resource is requested (like an image or script), the connection is already in place.

Here’s an example where I use preconnect for three key services:

1
<link rel="preconnect" href="https://trevorlasn.substack.com/embed" />
2
<link rel="preconnect" href="https://res.cloudinary.com" />
3
<link rel="preconnect" href="https://www.googletagmanager.com" />

• https://trevorlasn.substack.com/embed Preconnect to load my Substack newsletter embed faster.
• https://res.cloudinary.com Preconnect to speed up loading images hosted on Cloudinary.
• https://www.googletagmanager.com Preconnect to ensure analytics scripts load quickly.

By adding these preconnect tags, the browser will start the connection process to these domains early, improving page performance when the content from these domains is required.

Why Preconnect Helps

Without preconnect, the browser waits until the resource (like an image or script) is requested before establishing the connection. This can add several hundred milliseconds of delay—time spent waiting for DNS lookups, SSL handshakes, and other connection steps.

With preconnect, you’re telling the browser, “Hey, I’m going to need this domain soon, so go ahead and start the connection now.” When the browser later requests the actual resource, the connection is already in place, and the resource loads almost immediately.

With preconnect, here’s what happens:

1. The browser sets up the connection to Substack, Cloudinary, and Google Tag Manager in advance.
2. When the page tries to load your newsletter embed, the images, or the tracking script, the connection is already established.
3. The result? Faster load times, reduced latency, and a smoother user experience.

Preconnect vs. Preload

You might wonder how preconnect is different from preload. Preload is used when you know exactly which resource you’ll need and you want to start downloading it right away. Preconnect, on the other hand, is about setting up the connection early without fetching the resource itself immediately.

Use preconnect when you know which domain your resources will come from but don’t know exactly which resources will be requested (like with third-party APIs or embeds).

Example:

1
<!-- Preconnect to the domain -->
2
<link rel="preconnect" href="https://res.cloudinary.com" />
3

4
<!-- Preload a specific resource -->
5
<link rel="preload" href="https://res.cloudinary.com/images/sample.jpg" as="image" />

Preconnect saves you time on the connection setup, while preload fetches the resource itself as early as possible. Both can be used together in certain cases, but for establishing connections ahead of time, preconnect is the way to go.

Browser Support

Preconnect is supported in most modern browsers, so you can use it confidently:

• Chrome: 61+
• Edge: 79+
• Firefox: 58+
• Safari: 11+

It’s a widely supported feature, meaning you can add it to your pages without worrying about compatibility issues for most users.

Best Practices for Preconnect

• Use Preconnect for Critical Domains: Focus on domains that have a big impact on your page load, like those hosting fonts, media, or analytics. Preconnect can speed up these connections significantly.

• Avoid Overusing Preconnect: Each preconnect takes a small amount of CPU and bandwidth. If the connection isn’t used within 10 seconds, the browser closes it, so don’t overuse preconnect tags for domains that aren’t critical to the page load.

• Combine with DNS Prefetch: For older browsers that don’t support preconnect, consider adding <link rel="dns-prefetch"> as a fallback to at least handle the DNS lookup early.

Example:

1
<link rel="preconnect" href="https://res.cloudinary.com" />
2
<link rel="dns-prefetch" href="https://res.cloudinary.com" />

This way, if the browser doesn’t support preconnect, it will at least prefetch the DNS information, improving load time.