Selvom alles mål er at reducere webydelsesbudgettet, er det stadig nødvendigt at bruge tredjepartstjenester. Når du bruger disse tjenester, "DNS opslag" gange kan forbruge en betydelig del af budgettet, afhængigt af antallet af tjenester. Disse belastninger påvirker forskellige aspekter af sidehastighed, herunder First Contentful Paint (FCP).
Formålet med disse to koncepter er at optimere tredjeparts forbindelsestider. Før du forstår forskellene mellem disse to begreber, er det nødvendigt at forstå, hvad der præcist sker, når en tredjepartsanmodning fremsættes:
- Domænet er løst til at opnå en IP-adresse.
- Der oprettes forbindelse til serveren.
- Forbindelsen er krypteret for at sikre sikkerheden.
Dette hierarki gentages for hver tredjepartsforbindelse. Det er her forskellen mellem preconnect og dns-prefetch kommer ind i billedet.
- Forbind: Sikrer, at alle tre trin nævnt ovenfor er forudkonfigureret.
- DNS-forudhentning: Tjener kun til at konvertere domænenavnet til en IP-adresse i det første trin.
Som du kan se, er preconnect mere omfattende og gavnlig. Men alt kommer til at koste. Brug af preconnect til alle dine forbindelser kan have en negativ indvirkning på optimeringen af din side. Derfor, yDu bør kun bruge preconnect til kritiske forbindelser og bruge dns-prefetch til alle andre tredjepartsforbindelser.
Oversigt over brug
I betragtning af ovenstående oplysninger er her en hurtig oversigt over deres brug:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">Browserkompatibilitet
Mens man diskuterer deres brug, er det også vigtigt at nævne browserkompatibilitet. Disse to nært beslægtede koncepter er bredt understøttet af moderne browsere, men deres brug overlapper ikke fuldstændigt. Preconnect understøttes af cirka 97 % af browsere, mens dns-prefetch understøttes af 83 % af browsere (fra juni 2024).
Bidrag til Web Performance Budget
- Preconnect kan give en total hastighedsforbedring på 100-500ms.
- DNS-Prefetch kan fremskynde hver forbindelse med 20-120ms.
Vi planlægger at udføre vores egne tests for at give mere tilfredsstillende lokale eksempler.
Til sidst vil jeg gerne anbefale og kreditere Ceyhun Enki Aksans blog, som i høj grad bidrog til min forståelse under udarbejdelsen af denne artikel: Ceyhun Enki Aksans blog.
