New project announcement
I shipped skillcraft.ai - a tool that helps you find the best learning resources tailored to your goals. All you need to do is tell it what you want to learn, and I’ll find the right resources to get you there.
Up to date
Published
4 min read

Trevor I. Lasn

Building tools for developers. Currently building skillcraft.ai and blamesteve.lol

Speed Up Your Website With rel='preconnect' and increase PageSpeed Insights Score

Using link rel='preconnect' can improve your website's performance by reducing connection setup times to key external domains.

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:

<link rel="preconnect" href="https://trevorlasn.substack.com/embed" />
<link rel="preconnect" href="https://res.cloudinary.com" />
<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


<!-- Preconnect to the domain -->
<link rel="preconnect" href="https://res.cloudinary.com" />
<!-- Preload a specific resource -->
<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


<link rel="preconnect" href="https://res.cloudinary.com" />
<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.


Found this article helpful? You might enjoy my free newsletter. I share dev tips and insights to help you grow your coding skills and advance your tech career.


Check out these related articles that might be useful for you. They cover similar topics and provide additional insights.

Webdev
4 min read

How To Implement Content Security Policy (CSP) Headers For Astro

Content Security Policy (CSP) acts like a shield against XSS attacks. These attacks are sneaky - they trick your browser into running malicious code by hiding it in content that seems trustworthy. CSP's job is to spot these tricks and shut them down, while also alerting you to any attempts it detects.

Oct 16, 2024
Read article
Webdev
13 min read

10 Essential Terminal Commands Every Developer Should Know

List of useful Unix terminal commands to boost your productivity. Here are some of my favorites.

Aug 21, 2024
Read article
Webdev
12 min read

Robust Data Fetching Architecture For Complex React/Next.js Apps

How I use the 'Three Layers of Data' architecture pattern for React and Next.js apps to avoid common pitfalls, tech debt, and improve performance

May 4, 2025
Read article
Webdev
4 min read

Optimize Your Astro Site's <head> with astro-capo

Automatically improve your Astro site's performance using astro-capo

Oct 19, 2024
Read article
Webdev
5 min read

Add Auth to Astro 5 with Clerk in 5 Minutes

The simplest setup for adding Clerk authentication to your Astro project, with minimal code

Dec 18, 2024
Read article
Webdev
4 min read

Open Dyslexic Font: Improve Your Web Accessibility

How to implement the Open-Dyslexic font to enhance readability for users with dyslexia

Oct 12, 2024
Read article
Webdev
4 min read

HTTP CONNECT: Building Secure Tunnels Through Proxies

Understand how HTTP CONNECT enables HTTPS traffic through proxies

Nov 28, 2024
Read article
Webdev
3 min read

align-content: The Simplest Way to Center Content with CSS

Finally, we can center things in block layouts without flexbox gymnastics

Dec 13, 2024
Read article
Webdev
7 min read

How to Land Your First Tech Job

A developer's guide to tech interviews - from someone who sits on both sides of the table

Oct 24, 2024
Read article

This article was originally published on https://www.trevorlasn.com/blog/preconnect-to-required-origins. It was written by a human and polished using grammar tools for clarity.