Lighthouse: Preconnect to required origins
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.
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
preconnect is useful in the context of web performance,
preconnectis only effective for third-party resources and not for resources served from your own host server.
preconnectshould 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
preconnectshould only be used for critical resources on third-party domains.
- For all other third-party resources, you can use
dns-prefetchto 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
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
dns-prefetch to their link tags depending on whether the resource is critical or not.
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.
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.