Core Web Vitals in WordPress | WP Handleiding

Core Web Vitals in WordPress

Er zijn meer dan 200 verschillende Google Ranking Factoren die bepalen waar jouw website in de zoekresultaten wordt weergegeven. In 2021 introduceerde Google een nieuwe set parameters om page experience te meten: de Core Web Vitals. In deze uitgebreide blogpost leggen we uit wat je moet weten over Core Web Vitals in WordPress.

Core Web Vitals in WordPress

Wat zijn Core Web Vitals?

Core Web Vitals parameters

Tools voor het meten van Core Web Vitals

Core Web Vitals in WordPress verbeteren 

Wat zijn Core Web Vitals?

De Core Web Vitals zijn een verzameling gestandaardiseerde parameters die gebruikt worden voor het meten van de page experience, oftewel de gebruikerservaring van een webpagina. Momenteel worden er drie aspecten van page experience geëvalueerd:

  • Laadprestaties (hoe snel verschijnen elementen op het scherm?)
  • Responsiveness (hoe snel reageert de pagina op input van de gebruiker?)
  • Visuele stabiliteit (verplaatsen elementen op het scherm tijdens het laden van de pagina?)

Core Web Vitals parameters

De drie bovenstaande aspecten van page experience worden gemeten aan de hand van drie corresponderende parameters:

Largest Contentful Paint (LCP)

Deze parameter meet hoe lang het duurt voordat het grootste element van de content op het scherm verschijnt. Dat kan een blok tekst of een afbeelding zijn. Een goede LCP score geeft de gebruiker het gevoel dat de site snel laadt, een lage score leidt tot frustraties.

Interaction Next Paint (INP)

Deze parameter, voorheen First Input Delay (FID), meet de responsiviteit van een webpagina ten opzichte van de input van de gebruiker (kliks, taps en toetsaanslagen). INP meet de tijd vanaf de interactie van de gebruiker met de pagina tot het moment dat er een reactie op het scherm zichtbaar is.

Cumulative Layout Shift (CLS)

Deze parameter meet de visuele stabiliteit van de webpagina. Verschuiven er elementen over het scherm terwijl de pagina geladen wordt? En hoe vaak gebeurt dat? Het kan heel frustrerend zijn voor bezoekers als ze op een knop proberen te klikken wanneer er een traag ladende advertentie op die plek verschijnt.

Tools voor het meten van Core Web Vitals

Nu je weet wat Core Web Vitals zijn, is het tijd om te bekijken hoe jouw WordPress site scoort.

Hieronder hebben we de meest gebruikte tools voor het meten van Core Web Vitals op een rijtje gezet.

PageSpeed Insights

Google’s PageSpeed Insights verstrekt data over LCP, INP en CLS, plus specifieke aanbevelingen over hoe je hun performance kunt verbeteren. Het werkt heel simpel: je gaat in je browser naar https://developers.google.com/speed/pagespeed/insights/ en typt de URL van je WordPress website in. Vervolgens krijg je de resultaten van het Core Web Vitals assesment te zien:

We raden aan om de resultaten voor zowel mobiel als desktop te bekijken. De mobiele scores zijn het belangrijkste en tegelijkertijd de grootste uitdagingen.

Lighthouse

Google’s Lighthouse is eveneens zeer geschikt om Core Web Vitals te monitoren. Deze open source tool genereert rapporten over de kwaliteit van webpagina’s met betrekking tot o.a. performance, toegankelijkheid en SEO.

Core Web Vitals rapport in Search Console

Je kunt nu ook Web Vitals inzichten krijgen via Google Search Console. Het Core Web Vitals rapport toont de performance op basis van status (Slecht, Verbetering nodig en Goed), parameter (CLS, INP en LCP) en URL-groep (groepen van vergelijkbare webpagina’s). Hou er rekening mee dat alleen geïndexeerde pagina’s in het Search Console rapport worden weergegeven. Ook goed om te weten is dat de data wordt gebaseerd op interacties vanuit alle locaties; als je bijvoorbeeld veel bezoekers hebt uit een land waar de internetverbinding gemiddeld traag is, dan zal de algehele performance score lager liggen.

Chrome extensies

Als je op zoek bent naar een goede Chrome extensie voor het meten van Core Web Vitals, dan is

Web Vitals een aanrader. Hiermee kun je de Core Web Vital scores voor elke pagina die je bezoekt bekijken.

Chrome developer tools

Chrome biedt ook diverse tools voor ontwikkelaars, waaronder een Core Web Vitals report (Chrome 88) en Core Web Vitals overlay (Chrome 90).

Core Web Vitals in WordPress verbeteren

Na het meten van Core Web Vitals in WordPress heb je goed inzicht in welke aspecten je kunt optimaliseren om de page experience te verbeteren. Hieronder hebben we verbeterpunten voor elk van de Core Web Vitals parameters op een rijtje gezet.

Largest Contentful Paint in WordPress verbeteren

De meeste tips met betrekking tot optimaliseren voor LCP zullen voor de meeste WordPress gebruikers niets nieuws zijn. Dit zijn namelijk vrij algemene SEO taken:

Optimaliseer je afbeeldingen

In de meeste gevallen zal het LCP element een afbeelding zijn. Er zijn verschillende gratis en premium plugins beschikbaar waarmee je automatisch afbeeldingen kunt optimaliseren, zoals Smush en Imagify.

Verwijder (te) grote pagina-elementen

Blijft er zelfs na het optimaliseren van afbeelding nog een element over dat je LCP score omlaag brengt, bekijk dan of je dit handmatig kunt verkleinen of overweeg om het element te verwijderen.

Optimaliseer je code

Wanneer overbodige CSS of JavaScript bestanden voor de belangrijkste content worden geladen, dan heeft dit een negatieve impact op de laadtijden van je pagina’s. Dit kun je oplossen met plugins zoals Autoptimize, waarmee je deze bestanden kunt minifyen.

Gebruik een content delivery network (CDN) voor internationale bezoekers

Als je doelgroep zich ook buiten Nederland bevindt, is het aan te raden om een content delivery network (CDN) te gebruiken.

Stel lazy loading in

Lazy loading is een techniek die zorgt dat afbeeldingen en andere elementen pas geladen worden wanneer een bezoeker naar beneden scrolt. Door dit toe te passen word je LCP aanzienlijk sneller.

Lees ook: WordPress native lazy loading gebruiken, of toch een plugin?

Upgrade naar een beter hosting pakket

Betere hosting betekent vrijwel altijd snellere laadtijden – en dus een positieve impact op je LCP. Weet je (nog) niet zo goed wat nu goede hosting is, lees dan eerst even onze blogpost over de verschillende soorten WordPress hosting.

Bekijk wat je nog meer kunt doen om de TTFB te reduceren

Naast de bovenstaande zaken kun je bekijken of je de Time To First Byte (TTFB) nog verder kunt reduceren. In de onderstaande blogposts kun je hier meer over lezen:

Wat is TTFB en waarom is het belangrijk?

Een TTFB test uitvoeren op je WordPress site

TTFB verbeteren? 5 tips!

 

Cumulative Layout Shift verbeteren

Optimaliseren ten behoeve van CLS is een wat technischer verhaal:

Specificeer afmetingen voor afbeeldingen en andere media

Wanneer je een afbeelding toevoegt via de editor, bepaalt WordPress (afhankelijk van je instellingen en je thema) automatisch de afmetingen. Het is echter raadzaam om overal waar je afbeeldingen toevoegt, in de code de afmetingen te specificeren. Op die manier weet de browser van de bezoeker precies hoeveel ruimte die afbeelding in beslag zal nemen en zal hij doorgaans niet verschuiven tijdens het laden van de pagina. Het specificeren van afmetingen geldt overigens ook voor andere mediabestanden zoals video’s.

Specificeer afmetingen voor advertenties, embeds en iframes

Het laden van mediabestanden zonder gespecificeerde afmetingen kan de CLS score drastisch verlagen, maar dat geldt ook voor advertenties, embeds en iframes met niet-gespecificeerde afmetingen. Zorg er ook voor dat je in je layout voldoende ruimte reserveert voor deze elementen, anders kunnen ze alsnog verschuiven tijdens het laden van de pagina.

Voeg nieuwe User Interface (UI) elementen onder de vouw toe

Nieuwe UI elementen, en dan met name input elementen zoals knoppen, dropdowns, invulvelden en radio buttons, kun je het beste onder de vouw plaatsen. Op die manier voorkom je dat deze elementen de content waarvan de bezoeker verwacht dat die op zijn plek blijft, naar beneden duwen.

Optimaliseer web fonts

Maak je gebruik van custom web fonts? Dan kan een traag ladend lettertype resulteren in

Flash of Invisible Text (FOIT) of Flash of Unstyled Text (FOUT). Dit kun je verhelpen door middel van web font preloading. De browser van de bezoeker wordt dan geforceerd om de betreffende lettertypes zo vroeg mogelijk te downloaden, zelfs al is er nog geen informatie over waar die lettertypes voor gebruikt worden.

Interaction to Next Paint verbeteren

Zoals we eerder in deze blogpost al aangaven is INP de vervanger van First Input Delay (FID), dat beperkt was tot de eerste interactie – bij FID werd dus alleen de input delay gemeten. Bij INP daarentegen, wordt er naast input delay ook rekening gehouden met processing time en presentation delay. Het optimaliseren van INP betekent in feite dat je de responsiviteit van de pagina sneller moet maken. Net als bij CLS zijn de verbeterpunten wat technischer van aard:

Elimineer overbodige JavaScript

Kijk om te beginnen of je overbodige JavaScript kunt elimineren. Zo niet, dan is vertragen of minifyen wellicht een optie. Plugins zoals WP Rocket hebben hier handige features voor, zodat je zelf niet in de code hoeft te rommelen.

Maak gebruik van compressie op serverniveau

GZIP compressie reduceert de grootte van alle bestanden waar je website gebruik van maakt, inclusief CSS, JavaScript en HTML.

Gebruik Preconnect voor de belangrijkste bronnen van derden

De Preconnect tag vraagt de browser van een bezoeker om proactief en zo snel mogelijk een verbinding aan te leggen met bepaalde domeinen van derden, zodat hun benodigde bronnen zo snel mogelijk geladen kunnen worden wanneer hierom verzocht wordt. Enkele voorbeelden van dergelijke bronnen zijn YouTube video’s, web fonts en CDN’s.

Tot slot

Het is echt de moeite waard om aandacht te besteden aan het meten en optimaliseren van Core Web Vitals. Dit is, net als andere SEO-gerelateerde taken, een doorlopend proces. Eén keer je CLP, INS en LCP scores verbeteren en er vervolgens niet meer naar omkijken is niet voldoende. Neem regelmatig de tijd om te kijken welke elementen je verder kunt optimaliseren. Page experience is immers niet alleen een belangrijke ranking factor, het draagt ook bij aan een betere gebruikerservaring voor je bezoekers.

 

Wil jij meer leren over Wordpress?

In de kennisbank vertellen we je alles over de belangrijkste onderwerpen

  • Snel en gemakkelijk contact met een WordPress expert
  • Ontvang als eerste nieuwtjes & leuke acties
  • Overleg met andere WordPress fans

Je WordPress vraag of probleem razendsnel opgelost met de hulp van een echte WordPress developer!

Join de grootste WordPress community van Nederland & stel je vraag via ons WordPress ticketsysteem.

Medaille-buddy

Blijf op de hoogte van het laatste WordPress nieuws.

Schrijf je in voor onze wekelijkse nieuwsbrief.