Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

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 your site score on this audit?

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 origins.
  • The browser closes any connection that isn't used within 15 seconds, so preconnect should only be used for the most critical third-party domains.
  • For the best performance gains, use a maximum of 2 preconnects for the most critical third-party domains.
    • Note: The audit may warn about overuse of rel=preconnect if there are 3 or more instances in your code.
  • For other third-party resources, you can use dns-prefetch to reduce DNS lookup times.
    • Note: While the audit doesn't warn of dns-prefetchoveruse, Chrome can only process 3 dns-prefetches in parallel.

How does GTmetrix trigger this audit?

GTmetrix identifies the unique origins of third-party requests that would benefit from the use of the rel=preconnect resource hint.

Usually, these requests would meet the following criteria:

  • Requests are initiated by the root (i.e., connection isn't already set up at root).
  • Requests are not the same origin as the root (i.e., connection isn't already set up).
  • Request starts more than 15 seconds after the root.

Based on the above criteria, this audit flags the third-party resources that aren't prioritizing fetch requests and estimates how much time can be saved by using the preconnect resource hint.

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

Note: This audit doesn't check for actual usage of preconnect and/or dns-prefetch in your page's HTML. Hence, this audit may flag some resources even if they're using preconnect and/or dns-prefetch if the time taken to connect to the origin is longer than necessary.

How to fix this audit?

Add preconnector dns-prefetch to the link tags of third-party resources depending on whether the resource is critical or not.

1) Add preconnect for critical third-party domains

Identify the most 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 other third-party domains

For other third-party scripts, 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.

Summary

3.0.0
 ***