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”>

Share this Guide

Did you like it? Share it!

Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

Home Back to top of the page