Core Web Vitals (CWV) zijn drie prestatiemetrics die Google gebruikt als rankingsignalen: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) en Cumulative Layout Shift (CLS). Het verbeteren van deze scores helpt niet alleen met SEO. Het verbetert direct de ervaring die uw bezoekers op uw site hebben. Snellere pagina's krijgen meer engagement, lagere bouncepercentages en hogere conversiepercentages. Hier is een grondige, praktische aanpak om elke metric op WordPress te verbeteren.
Meet voordat u optimaliseert
Voordat u wijzigingen aanbrengt, stelt u een baseline vast zodat u uw voortgang kunt volgen. Gebruik deze tools om uw huidige Core Web Vitals te meten:
- Google PageSpeed Insights: Voer uw URL in op pagespeed.web.dev. Het bovenste gedeelte toont velddata van echte gebruikers (indien beschikbaar) en het onderste toont labdata van een gesimuleerde test. Velddata is wat Google daadwerkelijk gebruikt voor rankings.
- Google Search Console: Ga naar het rapport "Core Web Vitals" onder "Experience". Dit toont geaggregeerde data over uw hele site, gegroepeerd op mobiel en desktop. Het markeert welke URL's verbetering nodig hebben en welke slagen.
- Chrome DevTools: Open DevTools (F12), ga naar het tabblad "Performance" en voer een opname uit terwijl u uw pagina laadt. Dit geeft u gedetailleerde timinggegevens voor elke bron en renderstap.
- Web Vitals Chrome-extensie: Installeer de extensie "Web Vitals" voor real-time CWV-metingen terwijl u door uw eigen site bladert.
Schrijf uw baseline LCP-, INP- en CLS-waarden op. Test na elke optimalisatie opnieuw om de verbetering te bevestigen.
LCP-optimalisatie: laat de hoofdcontent sneller laden
LCP meet hoe lang het duurt voordat het grootste zichtbare element (meestal een hero-afbeelding, koptekst of grote tekstblok) op het scherm verschijnt. Google beschouwt een LCP onder 2,5 seconden als "goed". Zo brengt u hem omlaag:
- Identificeer uw LCP-element: Scroll in PageSpeed Insights naar de diagnose "Largest Contentful Paint element" om precies te zien welk element uw LCP is. Dit weten vertelt u waar u zich op moet richten.
- Optimaliseer de hero-afbeelding: Als uw LCP-element een afbeelding is, comprimeer hem, converteer hem naar WebP of AVIF en zorg ervoor dat hij geschikt is gedimensioneerd voor de container. Een afbeelding van 3000px breed in een container van 1200px verspilt bandbreedte. Voeg
fetchpriority="high"toe om de browser te vertellen het downloaden ervan te prioriteren. - Preload kritieke bronnen: Voeg een preload-hint toe in uw
<head>voor de LCP-afbeelding zodat de browser direct begint met downloaden in plaats van te wachten tot deze tijdens het renderen wordt ontdekt:
<link rel="preload" as="image" href="/wp-content/uploads/hero.webp" fetchpriority="high" />- Verminder serverresponstijd: Een trage TTFB vertraagt alles. Gebruik een caching-plugin (zie onze caching-handleiding), upgrade uw hosting als TTFB consistent meer dan 600ms bedraagt en overweeg een CDN om content te leveren vanaf geografisch dichtere servers.
- Elimineer render-blocking CSS en JS: Verplaats niet-kritieke CSS naar asynchroon laden en stel JavaScript uit dat niet nodig is voor de initiële render. WP Rocket's "Optimize CSS Delivery"- en "Delay JavaScript Execution"-functies regelen dit automatisch.
- Gebruik een CDN: Het leveren van statische assets (afbeeldingen, CSS, JS) vanaf edge-servers dichtbij uw bezoekers vermindert latentie. Cloudflare, BunnyCDN en KeyCDN integreren allemaal goed met WordPress.
- Verwijder onnodige plugins: Elke plugin kan CSS- en JS-bestanden aan de pagina toevoegen. Deactiveer en verwijder plugins die u niet langer nodig hebt. Gebruik de Query Monitor-plugin om te zien welke plugins de meeste overhead toevoegen.
INP-optimalisatie: laat interacties direct aanvoelen
INP meet hoe snel uw pagina reageert wanneer een gebruiker op een knop klikt, op een link tikt of in een veld typt. Google beschouwt een INP onder 200 milliseconden als "goed". Een slechte INP komt meestal door JavaScript dat de hoofdthread blokkeert. Zo lost u het op:
- Verminder JavaScript-uitvoeringstijd: Audit uw plugins en verwijder degenen die zware JavaScript toevoegen die u niet nodig hebt. Sliders, social sharing widgets en complexe pagebuilders dragen vaak aanzienlijk bij. Gebruik het tabblad Coverage in Chrome DevTools (Ctrl+Shift+P, typ "Coverage") om te zien hoeveel van uw geladen JS daadwerkelijk wordt gebruikt.
- Stel niet-kritieke scripts uit: Voeg het attribuut
defertoe aan scripts die niet nodig zijn voor de initiële paginalade. Plugins zoals Flying Scripts laten u specifieke scripts uitstellen tot gebruikersinteractie (scroll, klik of toetsaanslag). - Minimaliseer externe scripts: Analytics-trackers, advertising pixels, live chat-widgets en social media-embeds draaien allemaal JavaScript. Elk daarvan voegt uitvoeringstijd toe. Consolideer waar mogelijk, laad ze na gebruikersinteractie of vervang zware embeds door statische alternatieven (bijvoorbeeld een screenshot van een tweet in plaats van het Twitter-embedscript).
- Splits lange taken op: JavaScript-taken die langer dan 50ms draaien blokkeren de hoofdthread en vertragen gebruikersinteracties. Als u aangepaste JavaScript schrijft, gebruik dan
requestAnimationFrameofsetTimeoutom zware berekeningen op te splitsen in kleinere brokken. - Verminder DOM-grootte: Een grote DOM (meer dan 1500 nodes) maakt elke JavaScript-bewerking trager omdat de browser meer elementen moet verwerken. Vereenvoudig uw paginastructuur, verwijder onnodige wrapper-divs en overweeg of elke sectie van content werkelijk nodig is bij initiële laden.
CLS-optimalisatie: stop met content die rondspringt
CLS meet hoeveel zichtbare content onverwacht verschuift tijdens het laden van de pagina. Google beschouwt een CLS onder 0,1 als "goed". Layout shifts frustreren gebruikers omdat ze leiden tot misklikken en desoriënterende visuele beweging. Zo elimineert u ze:
- Stel expliciete afbeeldingsafmetingen in: Neem altijd
width- enheight-attributen op bij uw afbeeldingen. WordPress doet dit automatisch voor afbeeldingen die via de mediabibliotheek worden ingevoegd, maar afbeeldingen die handmatig in custom HTML of via pagebuilders worden toegevoegd, kunnen deze attributen missen. Zonder afmetingen weet de browser niet hoeveel ruimte hij moet reserveren, waardoor content springt wanneer de afbeelding laadt. - Reserveer ruimte voor advertenties en embeds: Als u advertenties weergeeft, stel een
min-heightin op de advertentiecontainer die overeenkomt met de verwachte advertentiegrootte. Hetzelfde geldt voor YouTube-embeds, social media-widgets en andere content van derden die asynchroon laadt. - Gebruik font-display swap: Wanneer aangepaste fonts traag laden, kan de browser tekst verbergen totdat het font klaar is, en dan plotseling tonen, waardoor een layout shift ontstaat. Stel
font-display: swapin uw@font-face-declaraties in zodat de browser tekst direct toont in een fallback-font en wisselt naar het aangepaste font wanneer het klaar is:
@font-face {
font-family: 'CustomFont';
src: url('/fonts/custom.woff2') format('woff2');
font-display: swap;
}- Vermijd het injecteren van content above the fold na het laden: Banners, meldingsbalken en cookie consent-popups die content naar beneden duwen veroorzaken layout shifts. Gebruik sticky-positionering of overlays in plaats van elementen in de documentstroom in te voegen.
- Preload webfonts: Als uw thema aangepaste fonts gebruikt, preload ze zodat ze sneller beschikbaar zijn, waardoor de tijd dat het fallback-font wordt weergegeven afneemt:
<link rel="preload" as="font" href="/fonts/custom.woff2" type="font/woff2" crossorigin />WordPress-plugins die helpen met Core Web Vitals
Verschillende plugins pakken meerdere CWV-metrics tegelijk aan:
- WP Rocket: Page caching, CSS/JS-optimalisatie, lazy loading, delay JS execution. De meest uitgebreide enkele plugin voor CWV-verbeteringen.
- Autoptimize: Gratis plugin voor CSS- en JS-minificatie, concatenatie en inline critical CSS. Werkt goed naast een caching-plugin.
- Perfmatters: Lichte plugin om ongebruikte WordPress-functies (emoji's, embeds, dashicons) uit te schakelen, scripts per pagina te beheren en preload-hints toe te voegen.
- Flying Scripts: Gratis plugin die JavaScript-uitvoering uitstelt tot gebruikersinteractie. Vooral effectief voor externe scripts zoals Google Analytics, Facebook Pixel en chatwidgets.
- OMGF (Optimize My Google Fonts): Downloadt Google Fonts lokaal en optimaliseert hun laden, waardoor de externe aanvraag wordt geëlimineerd en zowel LCP als CLS worden verbeterd.
Verbeteringen in de tijd monitoren
Velddata van Core Web Vitals (de data die Google gebruikt voor rankings) wordt bijgewerkt over een doorlopende periode van 28 dagen. Dit betekent dat verbeteringen niet onmiddellijk verschijnen in Search Console. Wacht na het maken van wijzigingen ten minste vier weken voordat u de impact in Search Console evalueert. Gebruik in de tussentijd PageSpeed Insights labdata en de Web Vitals Chrome-extensie voor snellere feedback. Stel een maandelijkse routine in: voer PageSpeed Insights uit op uw belangrijke pagina's, noteer de scores en vergelijk ze met de vorige maand. Dit helpt u regressies vroeg op te vangen, vooral na plugin-updates of themawijzigingen.
Verifieer Core Web Vitals met InspectWP
InspectWP controleert veel factoren die Core Web Vitals beïnvloeden: content encoding (GZIP/Brotli), HTTP-protocolversie (HTTP/2 of HTTP/3), totaal aantal afbeeldingen, JS- en CSS-bestandsaantallen en algemene HTML-grootte. Gebruik deze metrics als startpunt om te identificeren welke gebieden aandacht nodig hebben. Voer na elke optimalisatie een scan uit om de verbetering te bevestigen.