Lighthouse: Preconnect to required origins

Overview

Using preconnect helps the browser prioritize important third-party connections, and speeds up your page load as third-party requests may take a long time to process.

As third-party resources (e.g., Facebook or YouTube embeds) do not originate from your domain, their behaviour is sometimes difficult to predict and they may negatively affect page experience for your users.

How does preconnecting to required origins affect page performance?

Basically, third-party requests can slow down page loads for several reasons like slow networks, long DNS lookups, multiple redirects, slow servers, poor performing CDN, etc.

Establishing early connections to these third-party origins by using a resource hint like preconnect can help reduce the time delay usually associated with these requests.

Using preconnect can significantly speed up page loads in some cases, as the browser spends less time waiting and can start receiving the responses sooner.

preconnect is useful when you know the origin of the third-party request but don't know what the actual resource itself is. It informs your browser that the page intends to connect to another origin and that you would like this process to start as soon as possible.

Use preconnect wisely

While preconnect is useful in the context of web performance, note that:

• preconnect is only effective for third-party resources and not for resources served from your own host server.
• preconnect should be used carefully as it can still take up valuable CPU time, and delay other important resources, especially, on secure connections.
• The browser closes any connection that isn't used within 10 seconds, so preconnect should only be used for critical resources on third-party domains.
• For all other third-party resources, you can use dns-prefetch to reduce DNS lookup times.

How does GTmetrix trigger this audit?

GTmetrix identifies the third-party resources that aren't prioritizing fetch requests and estimates how much time can be saved by using the preconnect and/or dns-prefetch resource hints.

This audit's impact score depends on the estimated time savings.

How to fix this audit?

Look at the list of third-party resources flagged by GTmetrix and add preconnect or dns-prefetch to their link tags depending on whether the resource is critical or not.

1) Add preconnect for critical third-party domains

Out of the list of third-party resources flagged by GTmetrix, identify the critical third-party resources and add the following code to the link tag:

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

where "https://third-party-example.com" is the critical third-party domain your page intends to connect to.

2) Add dns-prefetch for all other third-party domains

For all other third-party scripts, including non-critical ones, add the following code to the link tag:

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

where "https://third-party-example.com" is the domain of the respective third-party resource.