Hoewel het ieders doel is om het webprestatiebudget te verlagen, is het nog steeds noodzakelijk om gebruik te maken van diensten van derden. Wanneer u deze diensten gebruikt, wordt de "DNS-lookup"-tijden kunnen een aanzienlijk deel van het budget in beslag nemen, afhankelijk van het aantal services. Deze belasting heeft invloed op verschillende aspecten van de paginasnelheid, waaronder First Contentful Paint (FCP).
Het doel van deze twee concepten is het optimaliseren van verbindingstijden van derden. Voordat u de verschillen tussen deze twee concepten begrijpt, is het noodzakelijk om te begrijpen wat er precies gebeurt als een verzoek van een derde partij wordt gedaan:
- Het domein is opgelost om een IP-adres te verkrijgen.
- Er wordt een verbinding tot stand gebracht met de server.
- De verbinding is gecodeerd om de veiligheid te garanderen.
Deze hiërarchie wordt herhaald voor elke verbinding van derden. Dit is waar het verschil tussen preconnect en dns-prefetch in het spel komt.
- Voorverbinden: Zorgt ervoor dat alle drie bovengenoemde stappen vooraf zijn geconfigureerd.
- DNS-prefetch: Dient alleen om in de eerste stap de domeinnaam om te zetten naar een IP-adres.
Zoals u kunt zien, is preconnect uitgebreider en voordeliger. Alles heeft echter een prijs. Het gebruik van preconnect voor al uw verbindingen kan een negatieve invloed hebben op de optimalisatie van uw pagina. Daarom, yU moet preconnect alleen gebruiken voor kritieke verbindingen en dns-prefetch gebruiken voor alle andere verbindingen van derden.
Samenvatting van gebruik
Gezien de bovenstaande informatie volgt hier een korte samenvatting van het gebruik ervan:
<link rel="preconnect" href="https://third-party-example.com">
<link rel="dns-prefetch" href="https://third-party-example.com">Browser compatibiliteit
Bij het bespreken van het gebruik ervan is het ook belangrijk om browsercompatibiliteit te vermelden. Deze twee nauw verwante concepten worden breed ondersteund door moderne browsers, maar hun gebruik overlapt niet volledig. Preconnect wordt ondersteund door ongeveer 97% van de browsersterwijl dns-prefetch wordt ondersteund door 83% van de browsers (vanaf juni 2024).
Bijdrage aan het webprestatiebudget
- Preconnect kan een totale snelheidsverbetering opleveren van 100-500ms.
- DNS-Prefetch kan elke verbinding versnellen 20-120ms.
We zijn van plan onze eigen tests uit te voeren om meer bevredigende lokale voorbeelden te bieden.
Ten slotte zou ik de blog van Ceyhun Enki Aksan willen aanbevelen en crediteren, die enorm heeft bijgedragen aan mijn begrip tijdens het voorbereiden van dit artikel: Ceyhun Enki Aksan's blog.
