Wat betekent DNS prefetch?

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.

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.

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.

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.

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.