Speculatief laden: het geheim van snellere WordPress-sites

Snelheid is alles op internet. Gebruikers verwachten dat webpagina's direct laden, en zelfs een vertraging van één seconde kan leiden tot een hoger bouncepercentage en omzetverlies. Dit geldt met name voor WordPress-sites, die vaak afhankelijk zijn van meerdere plugins en veel content.

Speculatief laden biedt een slimmere manier om websites sneller te laten laden door pagina's voor te bereiden voordat gebruikers erop klikken. In plaats van te wachten op een gebruikersactie om gegevens op te halen, gebruikt speculatief laden voorspellende technologie om belangrijke pagina's op de achtergrond voor te laden of te renderen. Deze handleiding onderzoekt hoe het werkt, hoe je het implementeert in WordPress met behulp van de Speculative Loading-pluginen waarom het steeds meer aandacht krijgt in de performance-community.

wilt verbeteren en de laadtijden van je WordPress-site, is dit een technologie die het waard is om te begrijpen.

Een korte introductie tot prerendering: toen versus nu

Om speculatief laden te begrijpen, is het handig om te weten hoe prerendering zich heeft ontwikkeld. In 2011 introduceerde het Chromium-team de<link rel=”prerender”> De `<link>`-tag maakte het mogelijk voor browsers om complete pagina's ongemerkt vooraf te laden. Het idee was om te voorspellen welke pagina een gebruiker vervolgens zou bezoeken en deze op de achtergrond weer te geven. Wanneer de gebruiker op die link klikte, verscheen de pagina direct.

Deze functie was weliswaar krachtig, maar had ook nadelen. Ze verbruikte te veel bandbreedte en CPU-bronnen en laadde soms pagina's die de gebruiker nooit bezocht. Bovendien riep ze privacyproblemen op, met name op gedeelde apparaten. Daarom verving Chrome de functie door een voorzichtiger methode genaamd NoState Prefetch, die alleen paginabronnen zonder scripts uit te voeren of de volledige pagina weer te geven.

Hoewel NoState Prefetch hielp om onnodige laadtijden te verminderen, kon het nog steeds niet de snelheidsverbetering opleveren die volledige prerendering wel bood.

Wat is de Speculation Rules API?

De Speculation Rules API is een moderne oplossing die is ontworpen om prerendering terug te brengen, maar dan met betere controle, flexibiliteit en minder risico's. Met deze API kunnen ontwikkelaars een set regels definiëren in een JSON-script. Deze regels vertellen de browser welke pagina's moeten worden opgehaald of vooraf gerenderd, afhankelijk van gebruikersgedrag en andere factoren.

Een eenvoudige JSON-configuratie voor prerendering ziet er bijvoorbeeld zo uit:

<script type="speculationrules"> { "prerender": [ { "source": "list", "urls": ["about.html", "contact.html"] } ] } </script>

Dit eenvoudige script geeft de browser de opdracht om de vermelde URL's vooraf te laden, zodat ze vrijwel direct laden wanneer erop geklikt wordt. Je kunt dezelfde opmaak ook gebruiken om pagina's vooraf op te halen:

<script type="speculationrules"> { "prefetch": [ { "urls": ["services.html", "pricing.html"] } ] } </script>

Recente verbeteringen maken het nu mogelijk om regels op basis van documenten te gebruiken, waardoor browsers automatisch links van de pagina kunnen selecteren en speculatief laden kunnen toepassen. Dit vermindert de noodzaak om URL's handmatig op te sommen en maakt de API dynamischer. De regels kunnen gebaseerd zijn op href-matches, CSS-selectors of een combinatie van beide, waardoor ontwikkelaars nauwkeurige controle hebben over welke links worden beïnvloed.

Deze functie verbetert niet alleen de navigatie voor de gebruiker, maar zorgt ook voor betere WordPress-prestaties op alle front-endpagina's.

Hoe speculatief laden werkt in WordPress

In WordPress is speculatief laden niet langer alleen een experiment voor ontwikkelaars. Dankzij recente inspanningen van het WordPress Performance Team is deze functie nu toegankelijk voor gewone website-eigenaren via een eenvoudige plugin-integratie.

Zo werkt het: speculatief laden stelt je website in staat te voorspellen op welke interne link een gebruiker waarschijnlijk zal klikken. Zodra dit is voorspeld, haalt de browser de benodigde bronnen alvast op of laadt de hele pagina stilletjes op de achtergrond. Dit betekent dat wanneer de gebruiker uiteindelijk op die link klikt, de pagina direct verschijnt, omdat de browser het zware werk al heeft gedaan.

De kern van dit proces wordt gevormd door de Speculation Rules API, die fungeert als een routekaart voor browsers. Deze API gebruikt een JSON-structuur om aan te geven welke URL's vooraf geladen moeten worden en onder welke voorwaarden. In WordPress kan dit mechanisme worden toegepast op frontend-URL's, met name voor blogs, webshops of servicepagina's waar gebruikers waarschijnlijk van de ene pagina naar de andere zullen navigeren.

Wat speculatief laden zo krachtig maakt, is de configuratie van de 'eagerness' (de mate van onzekerheid in het laden):

• Eager: De browser laadt de pagina direct.
• Gemiddeld: De pagina wordt vooraf geladen nadat de gebruiker de muiscursor korte tijd (meestal 200 ms) boven een link houdt.
• Conservatief: De browser wacht op meer interactie, zoals een muisklik of een tik om te starten.

Deze gelaagde aanpak zorgt ervoor dat speculatief laden geen bandbreedte verspilt, maar toch de laadtijden van veelbezochte pagina's verbetert. De meeste WordPress-sites profiteren van de 'gemiddelde' instelling, die een goede balans biedt tussen snelheid en efficiëntie.

De Speculative Loading Plugin: Installeren en configureren

Om speculatief laden aan je WordPress-site toe te voegen zonder code aan te raken, is de eenvoudigste oplossing de Speculative Loading-plugin. Deze plugin is ontwikkeld door bijdragers van Google en het WordPress-kernteam. De plugin is geïntroduceerd om site-eigenaren te helpen speculatieve laadregels te gebruiken zonder dat ze zich in handmatige configuraties hoeven te verdiepen.

Installatiestappen:

1. Ga naar je WordPress-dashboard.
2. Ga naar Plugins > Nieuwe toevoegen.
3. Zoek naar "Speculatief laden".
4. Klik op Installerenen vervolgens op Activeren.

Na activering voegt de plugin een speculationrules-script rechtstreeks toe aan de HTML van uw site. Dit script gebruikt regels op documentniveau om automatisch prerendering toe te passen op relevante WordPress-frontend-URL's.

Standaard gebruikt de plugin de instelling 'gemiddelde reactietijd'. Dit betekent dat de plugin wacht tot een gebruiker even met de muis over een link beweegt voordat de bestemmingspagina wordt voorgerenderd. Dit gedrag is geoptimaliseerd voor prestaties en zorgt ervoor dat de plugin de systeembronnen niet overbelast en de privacy van de gebruiker niet schendt.

Je kunt de instellingen van de plugin beheren door in je dashboard naar Instellingen > Lezen te gaan. Daar vind je een nieuwe sectie genaamd Speculatief laden, waar je het volgende kunt doen:

• Wijzig de speculatiemodus (Prefetch of Prerender)
• De standaardconfiguratie bekijken of bijwerken
• Geef voorwaardelijke uitsluitingen op voor specifieke URL's

WordPress sluit bijvoorbeeld automatisch paden zoals /wp-admin/ en /wp-login.php uit van de prerendering. Je kunt zelf uitsluitingen toevoegen voor URL's zoals /checkout/ of /cart/ met behulp van WordPress-filters.

Deze gebruiksvriendelijke installatie maakt het zelfs voor niet-ontwikkelaars ongelooflijk eenvoudig om prerendering op hun site in te schakelen en de laadsnelheid van veelbezochte pagina's te verhogen.

Browserondersteuning en -compatibiliteit

Een van de meest opwindende aspecten van speculatief laden is dat het al wordt ondersteund door moderne browsers. De Speculation Rules API werkt standaard in op Chromium gebaseerde browsers zoals Google Chrome en Microsoft Edge, vanaf bepaalde versies.

Als een bezoeker een compatibele browser gebruikt, wordt speculatief laden direct geactiveerd en verbetert de waargenomen prestatie. Als de browser het niet ondersteunt, blijft uw site gewoon functioneren. Dit maakt speculatief laden een progressieve verbetering: het verbetert de gebruikerservaring waar mogelijk, maar zorgt nooit voor problemen.

Dit soort compatibiliteit is belangrijk voor WordPress-sites die zich op een breed publiek richten. Of uw bezoekers nu een desktopbrowser of een mobiel apparaat gebruiken, speculatief laden zorgt voor snellere weergave, vooral wanneer ze snel tussen interne pagina's navigeren.

Ontwikkelaars kunnen de browserondersteuning controleren met tools zoals Can I Use, of door het gedrag rechtstreeks te inspecteren in Chrome DevTools onder het tabblad Speculatieve laadprocessen.

Geavanceerde regels en filters voor ontwikkelaars

Speculatief laden is van zichzelf al een krachtige functie, maar ontwikkelaars kunnen er nog meer uit halen door aan te passen welke URL's wel of niet moeten worden opgenomen in de prerendering en prefetching. Deze mate van controle is vooral handig voor webwinkels, ledenwebsites of dynamische applicaties waar niet elke pagina vooraf hoeft te worden geladen.

WordPress maakt dit mogelijk via filters zoals plsr_speculation_rules_href_exclude_paths. Met dit filter kunnen ontwikkelaars voorwaardelijke uitsluitingen opgeven, waardoor alleen bepaalde URL's vooraf geladen kunnen worden op basis van de modus (prerender of prefetch), het pad of zelfs queryparameters.

Voorbeeld 1: URL's van winkelwagens uitsluiten

Als je wilt voorkomen dat pagina's met winkelwageninformatie automatisch worden geladen, kun je het volgende codefragment gebruiken:

add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths ) { $exclude_paths[] = '/cart/*'; return $exclude_paths; } );

Dit zorgt ervoor dat URL's die overeenkomen met /cart/ of subpaden daarvan niet vooraf worden geladen of opgehaald. Dit is handig om onnodige serverbelasting te voorkomen of te voorkomen dat acties te vroeg worden uitgevoerd.

Voorbeeld 2: Vooraf ophalen toestaan, maar vooraf renderen uitschakelen

Stel dat u prefetching wilt toestaan, maar prerendering wilt voorkomen voor gevoelige productpagina's. U kunt logica toevoegen om de modus te detecteren:

add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths, $mode ) { if ( $mode === 'prerender' ) { $exclude_paths[] = '/products/*'; } return $exclude_paths; }, 10, 2 );

Dit geeft ontwikkelaars gedetailleerde controle over hoe bepaalde WordPress-kern-URL's zich gedragen bij speculatief laden, waardoor privacyproblemen worden voorkomen, dynamische content wordt beschermd en de gebruikerservaring wordt verbeterd.

Je kunt links ook targeten met CSS-klassen zoals .no-prefetch of .no-prerender, afhankelijk van je front-end configuratie. Links met deze klassen kunnen bijvoorbeeld worden overgeslagen bij het vooraf laden door selector_matches in de speculatieregels JSON te gebruiken.

Met deze technieken kunnen ontwikkelaars ervoor zorgen dat het speculatieve laadgedrag perfect aansluit op de doelstellingen van hun website, met name bij ingelogde gebruikers, afrekenprocessen of nofollow-links die niet vooraf geladen mogen worden.

Foutopsporing van speculatief laden in Chrome DevTools

Zodra speculatief laden is ingeschakeld op je WordPress-site, is het belangrijk om te controleren of het naar behoren werkt. Gelukkig biedt Chrome DevTools een krachtige manier om het gedrag van speculatief laden rechtstreeks in de browser te inspecteren.

Om te beginnen met debuggen, open je je site in Chrome en druk je op F12 om de ontwikkelaarstools te starten. Vervolgens:

1. Ga naar het Toepassing .
2. Scroll naar beneden naar Speculatieve belastingen.
3. Je ziet een lijst met URL's die speculatief zijn geladen — ofwel vooraf gerenderd ofwel vooraf opgehaald.

Dit paneel toont de status van elke URL, bijvoorbeeld:

• niet geactiveerd (nog geen gebruikersinteractie),
• Geactiveerd (bij hoveren of klikken),
• Vooraf gerenderd, of
• Vooraf opgehaald.

Wanneer u met de muis over verschillende links op uw site beweegt, wordt het tabblad 'Speculatieve laadtijden' in realtime bijgewerkt. Zo kunt u zien welke URL's op de achtergrond worden verwerkt op basis van uw speculatieregels.

Als je bijvoorbeeld 'matige eagerness' hebt ingeschakeld, zal Chrome slechts twee URL's tegelijk vooraf laden met behulp van een FIFO-systeem (First In, First Out). Dit betekent dat wanneer je met de muis over drie links beweegt, de derde link mogelijk niet wordt vooraf geladen als er nog twee andere actief zijn.

Je kunt vooraf gerenderde pagina's ook uitgebreider verkennen met:

• Tabblad Elementen: Bekijk de HTML van de vooraf gerenderde inhoud.
• Netwerktabblad: Bekijk de bestanden die al zijn opgevraagd en in de cache zijn opgeslagen.
• Console en bronnen: Controleer of scripts vertraagd of correct worden uitgevoerd na activering.

Door de renderer-instantie in het dropdownmenu rechtsboven te wijzigen, kunt u de vooraf gerenderde pagina isoleren en de netwerkactiviteit of DOM-structuur ervan inspecteren, net als in een live tabblad.

Deze mate van inzicht helpt ontwikkelaars bij het debuggen van speculatieregels, het oplossen van problemen met speculatieve laadplugins en het controleren of de configuratie geen invloed heeft op het gebruikersgedrag of de prestaties.

Prefetch versus prerender: wat is het verschil?

Hoewel speculatief laden zowel prefetching als prerendering omvat, werken de twee verschillend en dienen ze verschillende doelen.

Vooraf ophalen

• Downloadt bronnen zoals HTML, CSS en JavaScript.
• De pagina wordt niet weergegeven.
• Wordt gebruikt om de laadtijd te verkorten zodra de gebruiker klikt.
• Minder impact op de systeembronnen.
• Ideaal voor pagina's die waarschijnlijk bezocht zullen worden, maar die niet voortijdig afgesloten mogen worden.

Vooraf renderen

• Laadt en toont de volledige pagina in een verborgen tabblad.
• De pagina is volledig interactief wanneer de gebruiker navigeert.
• Verbruikt meer CPU en geheugen.
• Het meest geschikt voor links met hoge prioriteit of veelgebruikte navigatiepaden.

Je wilt bijvoorbeeld misschien frontend-URL's van WordPress, zoals blogberichten of productcategorieën, vooraf renderen, terwijl je alleen contact- of supportpagina's vooraf laadt die geen directe interactie vereisen.

Je kunt dit configureren in de Speculative Loading-plugin door de Speculation Mode in het instellingenpaneel van de plugin te wijzigen naar Prerender of Prefetch.

De modus die je kiest, heeft invloed op hoe snel gebruikers content te zien krijgen, hoeveel systeemgeheugen er wordt gebruikt en hoe de algehele prestaties van je WordPress-site worden ervaren.

De ontwikkelaarstools van Chrome komen hier opnieuw goed van pas. Onder het tabblad 'Speculatieve laadtijden' kunt u het verschil zien: vooraf gerenderde pagina's tonen een volledige DOM-preview, terwijl vooraf opgehaalde pagina's worden weergegeven als passieve achtergrondbronnen.

Door dit onderscheid te begrijpen, kunnen website-eigenaren en -ontwikkelaars slimmere beslissingen nemen op basis van gebruikersgedrag, beschikbare bandbreedte en website-architectuur.

Impact van de Speculation Rules API op analyses

Hoewel speculatief laden de laadtijden van pagina's en de gebruikerservaring aanzienlijk kan verbeteren, brengt het wel een aantal uitdagingen met zich mee als het gaat om het bijhouden van websiteanalyses.

Wanneer een pagina vooraf wordt geladen, gebeurt dit op de achtergrond – nog voordat de gebruiker ernaartoe navigeert. Dit kan ertoe leiden dat analysetools zoals Google Analytics, heatmaps of eventtrackers een bezoek of gebeurtenis registreren voordat de gebruiker de pagina daadwerkelijk bekijkt of ermee interacteert.

Om valse positieven te voorkomen, moeten ontwikkelaars voorwaardelijke tracking implementeren op basis van de daadwerkelijke navigatie van de gebruiker.

Niet alle analyseplatformen ondersteunen bijvoorbeeld standaard de detectie van vooraf geladen pagina's. Sommige platforms registreren een paginaweergave wanneer de pagina op de achtergrond laadt, zelfs als de bezoeker nooit op de link klikt. Gelukkig kunnen tools zoals Google Analytics, Google Publisher Tag en Google AdSense dit al efficiënt afhandelen. Ze stellen de gebeurtenisregistratie uit tot de vooraf geladen pagina actief wordt.

Als u echter aangepaste tracking-scripts of tools van derden gebruikt, moet u een controle toevoegen om ervoor te zorgen dat de tracking pas start wanneer de pagina actief is. Dit kan door de eigenschap `document.prerendering` te combineren met een `prerenderingchange`-gebeurtenislistener.

Hier is een kort voorbeeld met JavaScript:

const whenActivated = new Promise((resolve) => { if (document.prerendering) { document.addEventListener('prerenderingchange', resolve); } else { resolve(); } }); async function initAnalytics() { await whenActivated; // Initialiseer hier je analysecode } initAnalytics();

Deze aanpak zorgt ervoor dat uw marketinggegevens de daadwerkelijke interactie van gebruikers weerspiegelen, en niet de achtergrondprocessen. Dit is met name belangrijk voor teams die gebruikmaken van Real User Monitoring (RUM), A/B-testenof op gebeurtenissen gebaseerde analyses die van invloed zijn op zakelijke beslissingen.

Of je nu een plugin voor speculatief laden gebruikt, aangepaste speculatieregels hanteert of de Speculation Rules API handmatig implementeert, controleer altijd hoe dit de analyses kan beïnvloeden en pas je tracking daarop aan.

Met de juiste configuratie profiteert u van het beste van twee werelden: snellere prestaties en nauwkeurige inzichten.

Mogelijke valkuilen: wanneer speculatief laden uitschakelen?

Hoewel speculatief laden nuttig is, zijn er scenario's waarin het inschakelen ervan niet ideaal is. In sommige gevallen kan het onverwacht gedrag veroorzaken of zelfs de functionaliteit van de site verstoren, met name op dynamische pagina's of sites met gevoelige gebruikersgegevens.

Hieronder volgen enkele situaties waarin u zou moeten overwegen om speculatief laden uit te schakelen voor specifieke URL's of gebruikersrollen.

1. Ingelogde gebruikers en gepersonaliseerde inhoud

Vermijd het vooraf renderen van pagina's die gepersonaliseerde content weergeven, zoals accountdashboards of ledenpagina's. Het laden ervan op de achtergrond met behulp van sessiegegevens van iemand anders kan verwarring veroorzaken of zelfs gevoelige informatie blootleggen.

Om dit te voorkomen, kunt u ingelogde gebruikers volledig uitsluiten van het activeren van speculatief laden, of specifieke URL's met sessiegebonden inhoud filteren met behulp van PHP.

2. Winkelwagen, afrekenpagina en betaalpagina's voor e-commerce

Sluit pagina's zoals /cart/, /checkout/ of URL's met queryparameters die gekoppeld zijn aan productselecties uit. Deze pagina's zijn vaak afhankelijk van realtime updates en kunnen onjuiste informatie weergeven als ze vooraf worden weergegeven voordat een gebruiker zijn of haar intentie bevestigt.

Gebruik het plsr_speculation_rules_href_exclude_paths-filter om dergelijke pagina's uit te sluiten van speculatief laden:

add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths ) { $exclude_paths[] = '/checkout/*'; $exclude_paths[] = '/cart/*'; return $exclude_paths; } );

Dit zorgt ervoor dat uw WordPress-kern-URL's alleen geoptimaliseerd zijn voor pagina's waar speculatief laden waarde toevoegt, en niet waar het belangrijke gebruikersacties zou kunnen belemmeren.

3. Pagina's met client-side JavaScript-status

Pagina's die sterk afhankelijk zijn van JavaScript om dynamisch gegevens te laden – zoals realtime dashboards, formulieren of boekingssystemen – mogen niet vooraf worden gerenderd. De status kan verouderd raken of gebeurtenissen activeren die pas na een gebruikersklik zouden moeten worden uitgevoerd.

Als u dergelijke pagina's toch wilt voorladen (zonder ze weer te geven), gebruik dan een voorwaardelijke uitsluiting die alleen de voorweergavemodus uitschakelt:

add_filter( 'plsr_speculation_rules_href_exclude_paths', function ( $exclude_paths, $mode ) { if ( $mode === 'prerender' ) { $exclude_paths[] = '/live-dashboard/*'; } return $exclude_paths; }, 10, 2 );

4. Het gebruik van CSS-klassen uitsluiten

Je kunt ook voorkomen dat specifieke links worden opgehaald door CSS-klassen zoals `no-prefetch` of `do-not-prerender` toe te voegen. De Speculation Rules API stelt je in staat om `selector_matches` in je JSON-configuratie te gebruiken:

Dit is vooral handig voor pluginontwikkelaars of themamakers die meer gedetailleerde controle willen bieden zonder PHP-bestanden te hoeven bewerken.

Speculatief laden is een fantastisch hulpmiddel, maar het is geen universele oplossing. Met de juiste uitzonderingen en instellingen kun je het gebruiken om de prestaties te verbeteren en tegelijkertijd valkuilen te vermijden.

Conclusie: Bouw vol vertrouwen een snellere WordPress-website

Speculatief laden is een van de meest veelbelovende ontwikkelingen op het gebied van moderne webprestaties, en WordPress omarmt het al. Met tools zoals de Speculation Rules API en de Speculative Loading-plugin kunnen website-eigenaren en ontwikkelaars de laadtijden van pagina's drastisch verkorten, de navigatie voor gebruikers verbeteren en een soepelere gebruikerservaring bieden.

Of je nu een blog met veel content, een WooCommerce-webshop of een dynamische WordPress-site bouwt, speculatief laden zorgt ervoor dat je pagina's sneller aanvoelen zonder dat je complexe code hoeft aan te raken. En dankzij slimme browserondersteuning en aanpasbare instellingen past het naadloos in de meeste omgevingen.

Voordat je deze functie op je hele site inschakelt, controleer dan eerst de URL's van je WordPress-kern, kijk of er dynamische pagina's zijn en pas waar nodig voorwaardelijke uitzonderingen toe. Gebruik Chrome DevTools om het gedrag te valideren en houd altijd in de gaten hoe speculatieve functies je analyses en prestatiestatistieken beïnvloeden.

te creëren aantrekkelijkere websites , dan is speculatief laden misschien wel jouw geheime wapen.