Preconnect to required origins

Published on Updated on

The Opportunities section of your Lighthouse report lists all key requests that aren't yet prioritizing fetch requests with <link rel=preconnect>:

A screenshot of the Lighthouse Preconnect to required origins audit

Browser compatibility

<link rel=preconnect> is supported on most browsers. See Browser compatibility.

Improve page load speed with preconnect

Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins.

<link rel="preconnect"> informs the browser that your page intends to establish a connection to another origin, and that you'd like the process to start as soon as possible.

Establishing connections often involves significant time in slow networks, particularly when it comes to secure connections, as it may involve DNS lookups, redirects, and several round trips to the final server that handles the user's request.

Taking care of all this ahead of time can make your application feel much snappier to the user without negatively affecting the use of bandwidth. Most of the time in establishing a connection is spent waiting, rather than exchanging data.

Informing the browser of your intention is as simple as adding a link tag to your page:

<link rel="preconnect" href="https://example.com">

This lets the browser know that the page intends to connect to example.com and retrieve content from there.

Bear in mind that while <link rel="preconnect"> is pretty cheap, it can still take up valuable CPU time, particularly on secure connections. This is especially bad if the connection isn't used within 10 seconds, as the browser closes it, wasting all of that early connection work.

In general, try to use <link rel="preload">, as it's a more comprehensive performance tweak, but do keep <link rel="preconnect"> in your tool belt for the edge cases like:

<link rel="dns-prefetch"> is another <link> type related to connections. This handles the DNS lookup only, but it's got wider browser support, so it may serve as a nice fallback. You use it the exact same way:

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

Stack-specific guidance

Drupal

Use a module that supports user agent resource hints so that you can install and configure preconnect or DNS prefetch resource hints.

Magento

Modify your themes's layout and add preconnect or DNS prefetch resource hints.

Resources

Updated on Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.