Using rel='preconnect' to establish network connections early and increase performance

Milica Mihajlija explains:<link> Adding rel=preconnect to the tag will inform the browser that the page will be connected to other domain names soon and hope to start the connection process as soon as possible. Since the setup process is completed before the browser requests the resource, the resource loading will be faster.

The charts in the article clearly show the significant performance improvements of this approach:

A few years ago, Robin gave a comprehensive summary of such technologies. The best practice is to use the following two tags:

<link href="http://example.com" rel="preconnect">
<link href="http://example.com" rel="dns-prefetch">

Applicable to all domain names that are not primary domain names (domains that load the document).

Currently, a quick look at the CSS-Tricks resource, I get:

 <code>secure.gravatar.com static.codepen.io res.cloudinary.com ad.doubleclick.com s3.buysellads.com srv.buysellads.com www.google-analytics.com</code>

This adds 14 to the first few packets per request<link> Label. It sounds like a performance boost, but I'd like to test it before adding it blindly.

Andy Davies recently conducted some experiments:

What is the difference between preconnect ?

I used HTTP Archive to find some websites that load images using Cloudinary, tested unmodified websites and websites that injected preconnect scripts. Each test was run nine times, using Chrome to simulate mobile devices and Cable network profiles.

The visual effect of the first website is significantly improved, and the main background image loading speed is more than half a second faster than that of the unmodified website (compared with the top and the bottom).

These remind me of instant.page (just released v2 version), a small script based on interactive preload resources. It's now a browser extension (FasterChrome) that I've been trying it out. I can't say I noticed a big difference, but I almost always use a high-speed internet connection.

The above is the detailed content of Using rel='preconnect' to establish network connections early and increase performance. For more information, please follow other related articles on the PHP Chinese website!