Preconnect vs DNS-prefetch

Websiteprestaties spelen een cruciale rol in zowel gebruikerservaring als SEO. Eén van de factoren die je website trager kunnen maken, is de tijd die nodig is om verbinding te maken met externe bronnen, zoals API’s, lettertypen of externe scripts (bijv. tracking scripts). Gelukkig bestaan er technieken zoals preconnect en DNS-prefetch om dit proces te versnellen. Maar wat zijn de verschillen, en wanneer gebruik je welke techniek? In dit blog vertel ik je er meer over.

Wat is DNS-prefetch?

DNS-prefetch is een techniek waarmee de browser alvast het DNS-resolutieproces uitvoert voor een externe resource. Dit betekent dat de browser de IP-adresinformatie van een domein ophaalt voordat deze daadwerkelijk nodig is. Dit kan waardevolle tijd besparen wanneer een externe bron later wordt gebruikt.

Hoe werkt DNS-prefetch?

Wanneer een gebruiker een pagina bezoekt en er een link of resource is die naar een extern domein verwijst, moet de browser eerst de domeinnaam vertalen naar een IP-adres. Dit heet DNS-resolutie. DNS-prefetch laat de browser dit proces uitvoeren in een vroeg stadium, nog voordat de bron wordt opgevraagd.

DNS-prefetch gebruik je voor domeinen waaarmee je indirect verbinding maakt, zoals CDN’s of trackingtools (bijv. TagManager of de Meta Pixel). Je kunt dit gebruiken voor bronnen die geen SSL of TLS-handshake vereisen (HTTP dus).

Voorbeeld:
<link rel=”dns-prefetch” href=”//digicrypt.nl”>

In dit voorbeeld zal de browser alvast de DNS-resolutie uitvoeren voor digicrypt.nl.

Wat is preconnect?

Preconnect gaat een stap verder dan DNS-prefetch. Naast het uitvoeren van de DNS-resolutie, maakt preconnect ook alvast een TCP-verbinding én een SSL/TLS-handshake met het externe domein. Dit betekent dat de browser volledig voorbereid is om gegevens van dat domein te ontvangen zodra het nodig is. 

Hoe werkt preconnect?

Preconnect bereidt de volledige netwerkverbinding voor, zodat bij het ophalen van de bron de wachttijd voor het opzetten van de verbinding wordt geëlimineerd.

Je gebruikt het voor domeinen waarmee je direct verbinding maakt, zoals externe lettertype (Google Fonts bijvoorbeeld) of API’s. Je wil immers dat deze het snelst laden omdat ze anders ervoor kunnen zorgen dat je website niet naar wens functioneert.

Voorbeeld:
<link rel=”preconnect” href=”//digicrypt.nl”>

Hiermee maakt de browser niet alleen DNS-resolutie, maar ook een veilige verbinding met digicrypt.nl.

Wat als je beide technieken combineert?

In sommige gevallen kan het nuttig zijn om DNS-prefetch en preconnect samen te gebruiken. Bijvoorbeeld, als je browser DNS-prefetch al ondersteunt, kan het de preconnect-efficiëntie verhogen.

Het is afhankelijk per browser of ze DNS-prefetch ondersteunen. In onderstaande afbeelding zie je welke browser DNS-prefetch ondersteunt en welke versie je nodig hebt. Wil je een up-to-date overzicht zien, dan kan dat hier.

Conclusie over DNS-prefetch vs preconnect

• Gebruik DNS-prefetch voor minder kritieke externe domeinen of indirecte connecties.
• Gebruik Preconnect voor kritieke bronnen die direct invloed hebben op de prestaties van je website.

Door deze technieken strategisch toe te passen, verbeter je niet alleen de snelheid van je website, maar ook de gebruikerservaring.

Weet je niet zeker of je preconnect of DNS-prefetch moet gebruiken?

Plan hier eenvoudig een kennismakingsgesprek met Robin om erachter te komen hoe ik jou hierbij kan helpen!