DNS prefetch

Ook wel dns-prefetch

Wat betekent DNS prefetch?

DNS prefetch (ook wel dns-prefetch) is een hint aan de browser om het adres van een externe server alvast op te zoeken. Zo hoeft de browser dat later niet meer te doen en laden bijvoorbeeld lettertypes of scripts van andere domeinen sneller.

VoorbeeldEen webshop laadt lettertypes van een externe server en een reviewwidget van een ander domein. Met een dns-prefetch-regel in de head van de pagina zoekt de browser die adressen meteen op, nog voordat ze nodig zijn.
Waarom het ertoe doetElke fractie van een seconde telt bij laadsnelheid. Een snellere site voelt prettiger, houdt bezoekers vast en helpt je conversie en vindbaarheid.
Zo begin jeBekijk in PageSpeed Insights of de ontwikkelaarstools van je browser welke externe domeinen je site laadt. Voeg voor de belangrijkste een regel als <link rel="dns-prefetch" href="//voorbeeld.nl"> toe in de head.

Veelgestelde vragen over DNS prefetch

Hoe stel ik DNS prefetch in WordPress in?

Het makkelijkst gaat het met een cacheplugin die deze optie heeft:

  • WP Rocket: open de instellingen van WP Rocket, ga naar het tabblad Preload en vul bij Prefetch DNS Requests de externe domeinen in, één per regel.
  • LiteSpeed Cache: ga naar Page Optimization, open HTML Settings en vul het veld DNS Prefetch.

Noteer alleen het domein zonder pad, bijvoorbeeld //fonts.googleapis.com. Leeg daarna de cache en controleer of de hint in de broncode staat. WordPress voegt zelf soms al een paar hints toe, bijvoorbeeld voor de emoji-scripts.

Welke domeinen zet ik in DNS prefetch?

Zet er alleen externe domeinen in die je pagina echt gebruikt en vroeg nodig heeft. Zo vind je ze:

  • Open je website in Chrome en druk op F12.
  • Ga naar het tabblad Network en herlaad de pagina.
  • Kijk in de kolom Domain welke domeinen niet van jou zijn.

Denk aan Google Fonts, Google Tag Manager, een chatwidget of een ingesloten video. Je eigen domein hoef je niet toe te voegen, want dat adres kent de browser al zodra je pagina opent.

Wat is het verschil tussen dns-prefetch en preconnect?

Dns-prefetch zoekt alleen het adres van de server op. Preconnect gaat verder: die zoekt het adres op, legt de verbinding en regelt ook de beveiligde https-verbinding. Dat scheelt meer tijd, maar kost de browser ook meer werk. Gebruik preconnect daarom alleen voor de paar domeinen die direct bij het laden nodig zijn, zoals je lettertypes. Dns-prefetch is lichter en geschikt voor domeinen die later op de pagina nodig zijn. Je kunt ze ook samen inzetten: browsers die preconnect niet ondersteunen, gebruiken dan nog wel de dns-prefetch.

Kan ik niet gewoon alle externe domeinen toevoegen?

Dat kan, maar het is niet slim. Elke hint laat de browser werk doen, ook als het domein op die pagina nergens voor nodig is. Bij een lange lijst win je weinig en verspil je soms juist tijd en dataverkeer, vooral op mobiel. Houd het daarom bij een handvol domeinen die op de meeste pagina's echt laden. Een ander misverstand: dns-prefetch maakt een traag extern script niet sneller. Het scheelt alleen de opzoektijd vooraf. Laadt een script zelf traag, kijk dan of je het later kunt laden of helemaal kunt weglaten.

Hoe controleer ik of DNS prefetch werkt?

Controleer eerst of de hint op je pagina staat:

  • Klik met rechts op je pagina en kies Paginabron weergeven.
  • Zoek op dns-prefetch en kijk of je domeinen erbij staan.

Staat er niets, leeg dan de cache van je plugin en eventueel die van je hosting. Het effect meten is lastiger, omdat het om kleine tijdwinsten gaat. In Chrome DevTools zie je bij Network per verzoek de timing, waaronder DNS Lookup. Is die bij een extern domein vrijwel nul, dan heeft de prefetch zijn werk gedaan. Een snelheidstest zoals PageSpeed Insights laat het verschil meestal nauwelijks zien.

Meer lezen in de officiële documentatiedns-prefetch in de HTML-standaardhtml.spec.whatwg.org
Wil je dat je website sneller laadt?Bekijk onze website-aanpak →
Persoonlijk advies

Liever even sparren over je marketing?

Plan een kennismakingsgesprek. We kijken samen naar je situatie en wat de beste volgende stap is.

Plan een kennismaking →