Preconnect to required origins
The Opportunities section of your Lighthouse report lists all key requests that aren't yet prioritizing fetch requests with <link rel="preconnect">:
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 toolbelt 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 #
- Source code for Preconnect to required origins audit
- Resource Prioritization–Getting the Browser to Help You
- Establish network connections early to improve perceived page speed
- Link types: preconnect