How to Configure HTTP Preconnect on Cloudflare Workers Sites

In 2023, most websites rely on some external services for certain features. For example, if you’re a podcaster, you may want to add your latest episode to a blog post using the embed player from Transistor.fm (my favorite podcast host). Similarly, if you’re loading static assets from a CDN, that CDN may have its own domain name (cdn.brianli.com on this site). In this post, you’ll learn how to configure HTTP Preconnect for a static site hosted on Cloudflare Workers Sites!

What is HTTP Preconnect?

When your browser loads a page that includes requests to external domains, it has to first establish connections with those domains. Specifically, these are the steps your browser has to take for each external domain.

Do a DNS lookup to find the IP address of the domain.
Establish a connection to the server IP.
Perform the necessary SSL handshakes to secure the connection.

Let’s take the HTML document below as an example.

<head>
  <meta charset="utf-8">
  <title>HTTP Preload Example</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Some header here...</h1>
  <p>Some text here...</p>
  <script src="https://external-domain.com/script.js"></script>
</body>

If you make a request to this page, a request to https://external-domain.com won’t be made until the browser parses everything above it. If this external domain responds quickly, this may not be an issue at all. However, website performance is hugely important in 2023, so it’s best to optimize external requests as much as possible.

With HTTP Preconnect, we can instruct the web browser to perform DNS lookups and process SSL handshakes as soon as possible without having to wait for the external domain to be found during HTML parsing!

How to Configure HTTP Preconnect

There are two ways to configure HTTP Preconnect. The first method involves adding a <link> tag in the <head> of your HTML document, and the second method requires adding HTTP headers.

How to Add an HTTP Preconnect <link> Tag

If you prefer the first method, add the <link> tag below to your HTML’s <head> to configure HTTP Preconnect. Be sure to specify the external domain prefixed with either https:// or https://.

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

You can specify multiple preconnect domains like this.

<head>
	<link rel="preconnect" href="https://external-domain1.com">
	<link rel="preconnect" href="https://external-domain2.com">
	<link rel="preconnect" href="https://external-domain3.com">
</head>

How to Add an HTTP Preconnect HTTP Header

The second HTTP Preconnect configuration method is specifying external domains in an HTTP response header. This is the method I prefer because it doesn’t require your browser to parse any HTML at all before it knows which external domains to connect to.

If you’re using Cloudflare Workers Sites to host your static site, you can configure HTTP Preconnect using the snippet below in your index.js file.

if (contentType.includes('text/html')) {
  response.headers.append('Link', '<https://external-domain1.com>; rel=preconnect')
  response.headers.append('Link', '<https://external-domain2.com>; rel=preconnect')
  response.headers.append('Link', '<https://external-domain3.com>; rel=preconnect')
}

This snippet adds multiple preconnect domains to the Link HTTP response header for requests with a content type matching text/html. With the configuration above in place, you’ll see response headers like the ones below.

link: <https://external-domain1.com>; rel=preconnect, <https://external-domain2.com>; rel=preconnect, <https://external-domain3.com>

Summary

Using HTTP Preconnect is very useful for speeding up requests for external embeds (podcast players, tweets, etc.) and assets (CDN on another domain name). When used with HTTP/2 Push, HTTP Preconnect can take an already high performance site hosted on Cloudflare Worker Sites, and reduce page load time even further. Do you use HTTP Preconnect on your static site? Let me know via email or reach out to me on Twitter!

BrianLi.com