Med hjälp av rel=”preconnect” att skapa nätverk anslutningar tidigt och öka prestandan

0
18

Milica Mihajlija:

Att lägga till rel=preconnect till <link> informerar webbläsaren för att din sida har för avsikt att upprätta en anslutning till en annan domän, och som du skulle vilja processen att starta så snart som möjligt. Resurser kommer att ladda snabbare eftersom installationen har redan genomförts av gång webbläsaren begär dem.

Bilden i inlägget gör ett bra jobb med att göra detta till en uppenbarligen bra val för prestanda:

Robin gjorde ett bra jobb med att samla ihop information om all denna typ av saker ett par år tillbaka. Ser ut som den bästa praxis som just nu är med hjälp av dessa två:

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

För alla domäner som inte är den huvudsakliga domänen du ladda dokumentet.

En snabb titt på CSS-Tricks resurser just nu, jag får:

secure.gravatar.com
statiska.codepen.io
res.cloudinary.com
ad.doubleclick.com
s3.buysellads.com
srv.buysellads.com
www.google-analytics.com

Det skulle vara 14 extra <link> – taggar i de första några paket av data om varje begäran på denna webbplats. Det låter som en perf vinna, men jag skulle vilja testa det innan no-brainer att slänga det där.

Andy Davies gjorde några av de senaste experiment:

Så vad skillnaden kan preconnect göra?

Jag använde HTTP Arkivet för att hitta ett par webbplatser som använder Cloudinary för sina bilder, och testade dem oförändrade, och sedan med preconnect script injiceras. Varje prov bestod av nio går, med hjälp av Chrome efterlikna en mobil enhet, och Kabel-network-profil.

Det är en märkbar visuell förbättring på första plats, med den huvudsakliga bakgrunden bild laddar över en halv sekund snabbare (övre) än på oförändrad webbplats (botten).

Det här får mig att tänka på omedelbar.sida (som bara gick v2), vilket är ett fint litet script som preloads saker som bygger på interaktion. Det är nu ett webbläsartillägg (FasterChrome) som jag har försökt ut. Jag kan inte säga att jag märker en enorm skillnad, men jag är nästan alltid på snabba internet-anslutningar.