Resource hints zijn kleine <link>-instructies in de <head> van een pagina waarmee je de browser vertelt welke bronnen hij vroeg moet aanpakken. De drie belangrijkste zijn rel="preconnect" (bouwt de verbinding – DNS, TCP, TLS – naar een extern domein vooraf op), rel="dns-prefetch" (lost alleen de DNS-naam vooraf op, een goedkope fallback voor oudere browsers) en rel="preload" (downloadt een concreet bestand met hoge prioriteit voordat de browser het in het document ontdekt). Correct ingezet verkorten ze de Largest Contentful Paint (LCP) vaak met 100 tot 400 ms, omdat de belangrijkste afbeelding en de fonts niet meer aan het eind van de laadketen hangen. Verkeerd of te royaal ingezet schaden ze echter: elke preload concurreert om bandbreedte, en te veel hints vertragen juist de bronnen die snel moeten zijn. Deze handleiding laat zien wanneer en hoe je de hints gericht in WordPress instelt.
De drie hints in het kort
| Hint | Wat hij doet | Waarvoor |
|---|---|---|
preconnect | DNS + TCP + TLS naar het externe domein vooraf opbouwen | font-host, CDN, analytics – domeinen waarvan vroeg geladen wordt |
dns-prefetch | alleen DNS-resolutie vooraf | goedkope fallback en voor domeinen die iets later nodig zijn |
preload | een concreet bestand direct met hoge prioriteit laden | LCP-afbeelding, kritische web fonts, kritische CSS |
Stap 1: Kritische bronnen identificeren
Open de Chrome DevTools, tabblad Network, herlaad de pagina en bekijk het watervaldiagram. Bepaal:
- Het LCP-element: meestal de grote hero-afbeelding bovenaan. In het tabblad Performance of in Lighthouse wordt het gemarkeerd als "Largest Contentful Paint element".
- Fonts die nodig zijn voor zichtbare tekst (laat geladen fonts veroorzaken de "Flash of Unstyled Text").
- Externe domeinen waarvan vroeg geladen wordt (Google Fonts, een afbeeldings-CDN, een icon-host).
Alleen deze paar bronnen krijgen een hint, niet elk bestand.
Stap 2: Preconnect voor externe domeinen
Bindt je pagina bronnen van een ander domein in, dan bespaar je met preconnect het opzetten van de verbinding. Voorbeeld voor een font- of CDN-host:
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://cdn.example.com">Het crossorigin-attribuut is bij fonts en andere anoniem geladen bronnen verplicht, anders wordt de vooraf opgebouwde verbinding niet hergebruikt. De dns-prefetch daaronder dient als fallback voor browsers zonder preconnect-ondersteuning.
Opmerking over Google Fonts: Het snelst is Google Fonts lokaal in te binden en het externe domein volledig te vermijden. Is dat niet mogelijk, dan helpt preconnect naar fonts.gstatic.com.
Stap 3: Preload voor de LCP-afbeelding en fonts
LCP-afbeelding preloaden
<link rel="preload" as="image"
href="/wp-content/uploads/2026/07/hero.avif"
type="image/avif"
fetchpriority="high">Als alternatief – en vaak eleganter – zet je fetchpriority="high" direct op de <img>-tag van de hero-afbeelding en verwijder je het lazy loading bij die afbeelding, in plaats van een aparte preload te gebruiken.
Een font preloaden
<link rel="preload" as="font" type="font/woff2"
href="/wp-content/themes/mein-theme/fonts/inter.woff2"
crossorigin>Bij fonts is crossorigin ook op hetzelfde domein nodig, omdat fonts altijd anoniem worden geladen.
Implementatie in WordPress
Variant A: via functions.php
Voeg de hints toe via de hook wp_head (in de functions.php van het child theme):
add_action( 'wp_head', function () {
?>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" type="font/woff2"
href="<?php echo esc_url( get_stylesheet_directory_uri() ); ?>/fonts/inter.woff2"
crossorigin>
<?php
}, 1 ); // Prioriteit 1 = zo vroeg mogelijk in de headVariant B: via het resource_hints-filter
Voor preconnect en dns-prefetch biedt WordPress het officiële filter wp_resource_hints:
add_filter( 'wp_resource_hints', function ( $hints, $relation_type ) {
if ( 'preconnect' === $relation_type ) {
$hints[] = array(
'href' => 'https://fonts.gstatic.com',
'crossorigin' => 'anonymous',
);
}
return $hints;
}, 10, 2 );Variant C: via een plugin
Optimalisatie-plugins zoals WP Rocket, Perfmatters of FlyingPress bieden velden waarin je preload- en preconnect-URLs kunt invoeren, zonder code.
Hoe meet ik het effect?
- Draai Lighthouse (Chrome DevTools, tabblad Lighthouse) voor en na de wijziging en vergelijk de LCP-waarde.
- Controleer in het Network-tabblad dat de LCP-afbeelding en de fonts nu eerder in de keten starten (prioriteit "High").
- PageSpeed Insights zou de diagnose "Largest Contentful Paint image was lazily loaded" of "Preconnect to required origins" niet meer moeten tonen.
Veelgemaakte fouten
- Te veel preloads: Wordt alles vooraf geladen, dan is er niets meer geprioriteerd. Beperk je tot 1–2 afbeeldingen en 1–2 fonts.
- Preload zonder gebruik: Een via preload geladen, maar niet binnen enkele seconden gebruikte asset geeft in de console de waarschuwing "was preloaded but not used" en verspilt bandbreedte.
- crossorigin vergeten: Ontbreekt het bij fonts, dan downloadt de browser het bestand tweemaal (eenmaal anoniem via preload, eenmaal regulier).
- Preconnect naar te veel domeinen: Elke open verbinding kost bronnen. Meer dan 4–6 preconnects zijn zelden zinvol.
- Verkeerde
as-waarde:as="image",as="font",as="style"moeten bij het brontype passen, anders wordt de preload genegeerd.
Veelgestelde vragen (FAQ)
Wat is het verschil tussen preload en preconnect?
preconnect bouwt de verbinding (DNS, TCP, TLS) naar een extern domein vooraf op, maar laadt nog geen bestand. preload downloadt een concreet bestand met hoge prioriteit voordat de browser het in het document ontdekt. preconnect gebruik je voor font-hosts of CDNs, preload voor de LCP-afbeelding en kritische fonts.
Waarom hebben fonts bij preload het crossorigin-attribuut nodig?
Fonts worden door de browser altijd anoniem (in CORS-modus) geladen, ook vanaf het eigen domein. Ontbreekt bij de preload het crossorigin-attribuut, dan komt het vooraf geladen verzoek niet overeen met het latere font-verzoek en downloadt de browser het bestand tweemaal. Daarom is crossorigin bij preload as="font" altijd nodig.
Hoeveel bronnen moet ik preloaden?
Zo weinig mogelijk. Wordt alles vooraf geladen, dan is er niets meer geprioriteerd en vertragen de hints juist de bronnen die snel moeten zijn. Beperk je tot 1 tot 2 afbeeldingen en 1 tot 2 fonts, en maximaal 4 tot 6 preconnects.
Wat betekent de consolewaarschuwing "preloaded but not used"?
Deze waarschuwing verschijnt wanneer een via preload geladen bron niet binnen enkele seconden op de pagina wordt gebruikt. De preload verspilt dan bandbreedte. Controleer of de as-waarde (image, font, style) correct is en of de vooraf geladen URL exact overeenkomt met de later gebruikte URL.
Hoe helpt InspectWP bij resource hints?
InspectWP registreert de in de <head> aanwezige <link>-bronnen alsook de ingebonden externe domeinen en fonts. Het rapport toont welke externe hosts vroeg worden gecontacteerd en waar fonts van derden worden geladen, goede aanknopingspunten om gericht preconnect of lokale hosting in te zetten.