Preconnect

Why use preconnect resource suggestions

Speed performance

Why use preconnect resource suggestions

SeoChecker shows in a table like the one below the key requests that are not prioritising fetch requests via <link rel=preconnect>:

How can I improve page load speed with preconnect?

In order to establish early connections to important third-party sources, consider adding dns-prefetch or preconnect resource suggestions.

<link rel="preconnect"> is intended to let the browser know that the page wants to establish a connection to another source and that the process should begin quickly.

In slower networks (especially those with secure connections), establishing connections most of the time involves a long wait, since there is a possibility of redirects, DNS lookups, and various round-trip requests to the final server handling the user's request.

Doing this beforehand can help speed up your pages a lot and not use too much bandwidth: in fact, the longest time when requesting a connection is not the data exchange, but the waiting time.

To inform the browser:

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

By doing so, the browser is aware that the page is going to connect to example.com and retrieve the content from there.

<link rel="preconnect"> is a cheap solution, but on secure connections, for example, it can take up CPU time: the browser will close the connection if it is not used within 10 seconds.

<link rel="preconnect"> should therefore be used as an "emergency", in preference to <link rel="preload">.

About connections, as a second choice there is another useful <link> type: <link rel=”dns-prefetch”>, focused on DNS but supported by all the major browsers.

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