Ved å bruke rel=”preconnect” til å etablere nettverk tilkoblinger tidlig og øke ytelsen

0
13

Milica Mihajlija:

Legge til rel=preconnect til en <link> informerer leseren om at siden din har til hensikt å etablere en tilkobling til et annet domene, og at du ønsker at prosessen skal starte så snart som mulig. Ressurser vil lastes raskere fordi installasjonen har allerede blitt gjennomført av gang nettleseren ber om dem.

Grafikken i innlegget gjør en god jobb med å gjøre dette til et åpenbart godt valg for ytelsen:

Robin gjorde en god jobb med avrunding opp informasjon om alle denne type ting noen år tilbake. Ser ut som beste praksis akkurat nå er ved hjelp av disse to:

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

For alle domener som ikke er den viktigste domenet du legge dokumentet fra.

En rask titt på CSS-Triks ressurser akkurat nå, får jeg:

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

Det vil være 14 ekstra <link> – kodene i de første par pakker med data på hver forespørsel på dette nettstedet. Det høres ut som en perf vinne, men jeg hadde lyst til å teste det før no-brainer hiver det i det.

Andy Davies gjorde noen nyere eksperimenter:

Så hva er forskjellen kan preconnect gjøre?

Jeg brukte HTTP Arkivet for å finne et par av nettsteder som bruker Cloudinary for sine bilder, og testet dem uendret, og deretter med preconnect script injisert. Hver prøve bestod av ni kjører, ved hjelp av Chrome simulere en mobil enhet, og Kabel-nettverk profil.

Det er en merkbar visuell forbedring i det første stedet, med de viktigste bakgrunnsbilde legge over et halvt sekund før (øverst) enn på uendret nettstedet (nederst).

Slike ting får meg til å tenke på chat.side (som bare gikk v2), som er et fancy lite skript som preloads ting basert på interaksjoner. Det er nå en nettleser utvidelse (FasterChrome) som jeg har prøvd ut. Jeg kan ikke si jeg merker en stor forskjell, men jeg er nesten alltid på rask internett-tilkoblinger.