Även om allas mål är att minska webbprestandabudgeten är det fortfarande nödvändigt att använda tredjepartstjänster. När du använder dessa tjänster, "DNS-sökning" gånger kan konsumera en betydande del av budgeten, beroende på antalet tjänster. Dessa laddningar påverkar olika aspekter av sidhastighet, inklusive First Contentful Paint (FCP).

Syftet med dessa två koncept är att optimera anslutningstider från tredje part. Innan du förstår skillnaderna mellan dessa två begrepp är det nödvändigt att förstå vad som exakt händer när en begäran från tredje part görs:

  1. Domänen bestäms för att få en IP-adress.
  2. En anslutning upprättas med servern.
  3. Anslutningen är krypterad för att säkerställa säkerheten.

Denna hierarki upprepas för varje tredjepartsanslutning. Det är här skillnaden mellan preconnect och dns-prefetch kommer in i bilden.

  • Föranslut: Säkerställer att alla tre steg som nämns ovan är förkonfigurerade.
  • DNS-förhämtning: Fungerar endast för att konvertera domännamnet till en IP-adress i det första steget.

Som du kan se är preconnect mer omfattande och fördelaktigt. Allt kommer dock till en kostnad. Att använda preconnect för alla dina anslutningar kan påverka optimeringen av din sida negativt. Därför, yDu bör endast använda preconnect för kritiska anslutningar och använda dns-prefetch för alla andra tredjepartsanslutningar.

bild-14.png
Källa: https://web.dev/preconnect-and-dns-prefetch/

Sammanfattning av användning

Med tanke på informationen ovan, här är en snabb sammanfattning av deras användning:

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

Webbläsarkompatibilitet

När man diskuterar deras användning är det också viktigt att nämna webbläsarkompatibilitet. Dessa två närbesläktade koncept stöds brett av moderna webbläsare, men deras användning överlappar inte helt. Preconnect stöds av cirka 97 % av webbläsarnaMedan dns-prefetch stöds av 83 % av webbläsarna (i juni 2024).

Bidrag till webbprestandabudget

  • Preconnect kan ge en total hastighetsförbättring av 100-500ms.
  • DNS-Prefetch kan påskynda varje anslutning med 20-120ms.

Vi planerar att genomföra våra egna tester för att ge mer tillfredsställande lokala exempel.

Slutligen skulle jag vilja rekommendera och kreditera Ceyhun Enki Aksans blogg, som i hög grad bidrog till min förståelse när jag förberedde den här artikeln: Ceyhun Enki Aksans blogg.