Selv om alles mål er å redusere nettytelsesbudsjettet, er det fortsatt nødvendig å benytte tredjepartstjenester. Når du bruker disse tjenestene, "DNS-oppslag" ganger kan forbruke en betydelig del av budsjettet, avhengig av antall tjenester. Disse belastningene påvirker ulike aspekter av sidehastighet, inkludert First Contentful Paint (FCP).
Hensikten med disse to konseptene er å optimalisere tredjeparts tilkoblingstider. Før du forstår forskjellene mellom disse to konseptene, er det nødvendig å forstå hva som skjer når en tredjepartsforespørsel sendes:
- Domenet er løst for å få en IP-adresse.
- Det opprettes en forbindelse med serveren.
- Forbindelsen er kryptert for å sikre sikkerheten.
Dette hierarkiet gjentas for hver tredjepartsforbindelse. Det er her forskjellen mellom preconnect og dns-prefetch kommer inn.
- Forhåndskoble: Sørger for at alle tre trinnene nevnt ovenfor er forhåndskonfigurert.
- DNS-forhåndshenting: Tjener kun til å konvertere domenenavnet til en IP-adresse i det første trinnet.
Som du kan se, er preconnect mer omfattende og fordelaktig. Men alt har en pris. Bruk av forhåndstilkobling for alle tilkoblingene dine kan ha negativ innvirkning på optimaliseringen av siden din. Derfor, yDu bør bare bruke preconnect for kritiske tilkoblinger og bruke dns-prefetch for alle andre tredjepartstilkoblinger.
Sammendrag av bruk
Gitt informasjonen ovenfor, her er et raskt sammendrag av bruken:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">Nettleserkompatibilitet
Mens du diskuterer bruken deres, er det også viktig å nevne nettleserkompatibilitet. Disse to nært beslektede konseptene støttes bredt av moderne nettlesere, men bruken deres overlapper ikke fullstendig. Preconnect støttes av omtrent 97 % av nettleserne, Mens dns-prefetch støttes av 83 % av nettleserne (per juni 2024).
Bidrag til webytelsesbudsjett
- Preconnect kan gi en total hastighetsforbedring på 100-500ms.
- DNS-Prefetch kan øke hastigheten på hver tilkobling med 20-120ms.
Vi planlegger å gjennomføre våre egne tester for å gi mer tilfredsstillende lokale eksempler.
Til slutt vil jeg anbefale og kreditere Ceyhun Enki Aksans blogg, som i stor grad bidro til min forståelse mens jeg utarbeidet denne artikkelen: Ceyhun Enki Aksans blogg.
