It can be easy to overlook the initial roundtrips that are made whenever we utilize resources from an external server. Not only does the browser need to do a DNS lookup on the remote host, but it also will need to do a TCP handshake, and may have TLS negotiations to deal with. When it’s all done, requesting an external resource can actually entail several roundtrips before the browser actually starts the download, adding hundreds of milliseconds (or more) of latency. Thankfully, browsers have recently been implementing a way for us to better get these initial roundtrips out of the way earlier so they won’t hold up the critical path when it comes time to actually download the resources we need.

The Preconnect Hint

Although browsers do their best to anticipate what connections will be needed for the resources on the page, they aren’t perfect. But, they have now given us the ability to help them know which connections they should go ahead and initiate by explicitly telling which remote origins we’ll be using.

In a recent post, Ilya Grigorik writes about the “preconnect hint”, and how it can be used to eliminate these roundtrips from the critical path. This “hint” is part of the W3C’s Working Draft, and has been implemented by Firefox 39+ and Chrome 46+.

The preconnect hint is used to tell the browser that an origin will be used for resources. The browser then opens an early connection to the server—including doing the DNS lookup, TCP handshake, and possible TLS negotiation—in preparation for the resources that it will eventually need. This is important because when the browser reaches a point where it actually needs to download resources from this origin, it won’t need to go through all those initial roundtrips again—they’ve already been done.

For instance, if we know that you will be requesting resources from http://example.com, we can let the browser know ahead of time by using the preconnect hint on the <link> tag.

<link href=‘//example.com' rel='preconnect'>

The browser—if it supports it—now knows it should do any needed DNS lookup, TCP handshake, etc., right away, instead of waiting till a resource from this domain is actually called for. This, in turn, cuts out round trips later, thus shortening the time needed to download the resource when the browser actually needs to download it.

The preconnect hint works on a domain basis, not on an individual resource basis. Meaning, we don’t need to know the exact resource we will need to download, as long as we know which domain it will be coming from. We can then preconnect to that domain and it will be effective for any resource needed from there.

Using it Dynamically

In addition to declaring the preconnects in the page HTML, we can also dynamically add them in later via JS. This allows us to preemptively connect to another domain based on the activity on the page.

For instance, we could use a helper function like this to dynamically add in the preconnect links to the document.

function preconnectTo(url) {
  var link = document.createElement("link");
  link.href = url;
  link.rel = "preconnect";
  document.head.appendChild(link);
}

If there was a point either during or after load (perhaps due to use activity, input, or other signals) when we determined we would likely need to download resources from another origin, we could use the function above to signal to the browser to get the connection ready.

A Useful Tool

So how much time does this save? The savings come from moving the initial roundtrips out of the request path for needed resources, and can range anywhere from 100s of milliseconds to even 1000s of milliseconds—it just depends on the page and network.

Because the preconnect hint is easy to implement, it makes sense to utilize it as much as possible when we know in advance what domains we will need to connect to. We should be wary, though, of opening up connections that go unused, since each open socket does affect performance.

At the end of the day, the preconnect hint is just that, a “hint”—ultimately the browser gets to decide how and when it acts on these hints. And although the browser may not always do exactly what we want it to do, these hints can still be extremely valuable if we’re looking to optimize performance.

Resources