All geek questions in one place

Preconnect vs dns-prefetch

https://www.w3.org/TR/resource-hints/

If I understand correctly, both of them are used to initiate an early connection to loading resources faster at a later time.

preconnect just does more.

Besides better browser support, is there any reason to use dns-prefetch over preconnect? I also saw websites using both rel in the same link tag to use preconnect if possible, and returning to dns-prefetch if not.

<head> <link rel="dns-prefetch preconnect" href="https://fonts.gstatic.com" crossorigin > </head>
+19
source share
2 answers

Recently, I have studied this topic a bit, and so far my (theoretical) conclusions are as follows:

The difference in browser support is insignificant as of mid-2018 when calculating the real global use of browsers ( ~ 73% against ~ 74% )

dns-prefetch = DNS and preconnect = DNS + TCP + TLS. Note that DNS lookups are fairly cheap (a simple response request to a DNS server that caches in the browser for a short period of time), while TCP and TLS require some server resources.

Therefore, the practical difference is that if you know that the server will be sampled for sure, preconnect good . If this happens only occasionally and you expect a lot of traffic, preconnect can cause a lot of useless TCP and TLS, and dns-prefetch better.

For instance:

  • if the page asks for https://backend.example.com/giveMeFreshData at every load, and the response is not cached, preconnect connection is well suited
  • if the page only requests a static resource, such as https://statics-server.example.com/some-image.jpg or https://statics-server.example.com/some-css.css , and the resource is very likely , from the user's browser cache (the same resource is used on many pages, and your user will launch many page loads, like this, with a warm cache - and no other resources are extracted from this source) then preconnect can create many unnecessary TCP- connections on your server (which will be interrupted after a few seconds, but still they were not necessary in the first alternate) and TLS-handshake (but in this case, the preload can be an option if you know the exact URL and the resource is very important).
  • However, if the traffic on your site is small, this difference should not greatly affect it, so preconnect will probably work well for sites with low traffic, regardless of what was mentioned earlier.

As always, consider options for use, deployment, measurement, and customization.

+13
source

1 preliminary connection

The final resource tip we want to talk about is a preliminary connection. A preliminary connection allows the browser to establish early connections before the HTTP request is actually sent to the server. This includes DNS queries, TLS negotiations, TCP confirmations. This, in turn, eliminates the delay in both directions and saves users time.

2 Prefetch

Prefetching is a low-priority resource hint that allows the browser to retrieve resources in the background (simple) that may be needed later and store them in the browser cache. After the page has finished loading, loading of additional resources begins, and if the user clicks on the previously selected link, he instantly downloads the content.

2.1 Link Preloading

Pre-fetching links allows the browser to retrieve resources and store them in the cache, assuming the user requests them. The browser looks for prefetching in the HTML or HTTP Link header.

2.2 DNS prefetching

DNS prefetching allows the browser to perform DNS lookups on the page in the background while the user is browsing. This minimizes the delay, since a DNS lookup has already occurred when the user clicks on the link. DNS prefetching can be added to a specific URL by adding the rel = "dns-prefetch" tag to the link attribute. We recommend using this for things like Google fonts, Google Analytics, and your CDN.

2.3 Pre-Rendering

Pre-rendering is very similar to pre-fetching in that it collects resources that the user can move on to. The difference is that the preliminary rendering actually displays the entire page in the background, all the resources of the document.

More information: https://www.keycdn.com/blog/resource-hints/

Conclusion

The main difference between dns-prefetch and preconnect

The difference between dns-prefetch and preconnect is that dns-prefetch will only do a DNS lookup, while preconnect will do a DNS lookup, TLS negotiation, and TCP handshake. This means that it avoids the extra 2 RTT when the resource is ready to download.

An important aspect is that dns-prefetch support is much more than preconnect support.

You can find some specific examples here: https://responsivedesign.is/articles/prefetch-preconnect-dns-priority/

+7
source

Source: https://habr.com/ru/post/1273331/

More articles:


All Articles