Google Core Web Vitals, waarschijnlijk heb je er ondertussen al over gehoord.
Wanneer dit niet zo is, dan kan ik je vertellen dat dit om de gebruikerservaring van je bezoekers gaat en dat het sinds enige tijd een rankingsfactor is voor de zoekresultaten van Google.
De Core Web Vitals van Google zijn een reeks gebruikersgerichte statistieken die zijn ontworpen om de gebruikerservaring op internet te meten en te verbeteren. Simpel gezegd komt het erop neer dat je website snel moet zijn en geen slecht werkende elementen mag bevatten.
In dit artikel zal ik je meer over de Core Web Vitals vertellen en hoe je jouw WordPress-website hiermee kunt optimaliseren.
Wat zijn de Google Core Web Vitals?
De Core Web Vitals hebben invloed op de zoekresultaten. Ik probeer je niet bang te maken, want het is natuurlijk een van de vele factoren en zeker niet de enige. Het kan alleen wel helpen om beter met je website te scoren als je aan de Core Web Vitals voldoet.
Het is daarom zeker verstandig om er wat tijd en aandacht aan te besteden.
De drie belangrijke Core Web Vitals
Google heeft drie factoren gemarkeerd die worden gebruikt als de Core Web Vitals. Het gaat om:
- Largest Contentful Paint (LCP) – Grootste weergave met content
- First Input Delay (FID) – Eerste ingangsvertraging
- Cumulative Layout Shift (CLS) – Cumulatieve indelingsverschuiving
De andere signalen die je op bovenstaande afbeelding ziet staan waren eerder al rankingsfactoren in Google. De Core Web Vitals zijn erbij gekomen.
Met de termen alleen zal je niet precies snappen wat het is. Ik zal je daarom een korte uitleg geven.
Largest Contentful Paint (LCP)
De Largest Contentful Paint LCP is een factor die over de laadtijd gaat. De LCP geeft aan hoe lang het duurt voordat de grootste afbeelding of tekstblok zichtbaar is op een pagina van je website.
Zoals je op de afbeelding kunt zien geeft Google aan dat dit maximaal 2,5 seconden mag duren. Tussen 2,5 en 4 seconden heb je verbetering nodig. Alles wat langer duurt dan 4 seconden is erg slecht en moet je sowieso hard mee aan de slag.
First Input Delay (FID)
De First Input Delay (FID) meet de tijd tussen wanneer een bezoeker interactie heeft met een pagina en wanneer de browser dit begint te verwerken. Met interactie bedoel ik wanneer er bijvoorbeeld een link wordt aangeklikt.
Het is goed als dit minder dan 100ms is. Tussen de 100 en 300ms kan het verbetering gebruiken en alles daarboven is slecht en moet je echt iets aan doen.
Cumulative Layout Shift (CLS)
Tot slot hebben we ook Cumulative Layout Shift, hierbij worden de verschuivingen in je layout tijdens het laden van een pagina gemeten. Denk aan afbeeldingen waar de browser nog niet de dimensies (afmetingen) van weet voordat de afbeelding is geladen, iframes zonder hoogte en breedte en video’s. Het kan ook bij je lettertypes voorkomen.
Google raad aan om een CLS van 0,1 of lager te hebben. Tussen 0,1 en 0,25 kan je het nog iets verbeteren en boven de 0,25 is er werk aan de winkel want dit is niet best.
Hoe je website testen op de Core Web vitals?
Je kunt met alle Google web developer tools testen hoe jouw website scoort op de Google Core Web Vitals. Denk hierbij aan Google PageSpeed, Chrome DevTools, Lighthouse, Search console en dat soort programma’s.
De eenvoudigste manier om je website testen is via Google PageSpeed Insights. Deze tool van Google geeft je alle informatie over de 3 core web vitals en tevens kun je ook aanbevolen verbeterpunten zien staan voor je website.
De diagnostische sectie zal je beste vriend worden om je score te verbeteren.
Om Google PageSpeed Insights te gebruiken hoef je alleen maar je website URL in te vullen en op de blauwe knop “Analyseren” te klikken. Je krijgt dan een score te zien en informatie te zien over hoe goed je het doet bij de Core Web Vitals. Je ziet dit bij veldgegevens en bij labgegevens.
Verder zijn er altijd een aantal dingen waar je rekening mee kunt houden.
- De Core Web Vitals score kunnen verschillen tussen de veldgegevens en labgegevens. Hierboven zie je bijvoorbeeld voor de LCP een 1.8 bij veldgegevens en 3.1s bij de labgegevens. Dat er verschillen zijn is normaal, het hangt van de manier af hoe gegevens worden verzameld.
- Heb je geen veldgegevens wanneer je een test doet? Dit komt omdat er nog niet genoeg data beschikbaar is van echte gebruikers. Dit maakt voor je score in PageSpeed niet uit, aangezien Google hier de labgegevens voor gebruikt.
- Bekijk altijd de resultaten van mobiel en desktop. Je zal zien dat je resultaten verschillen. De mobiele score is voor veel websites het relevantst en is daarnaast ook het moeilijkst om hoog mee te scoren.
WordPress website optimaliseren voor de Core Web Vitals
Nu gaat het natuurlijk om de meest belangrijke vraag, tenminste als je momenteel nog niet voldoet aan de eisen van Google wat betreft de Core Web Vitals. Hoe kun je jouw WordPress website optimaliseren om de Core Web Vitals scores te verbeteren?
Wat je precies moet doen zal per onderdeel verschillen. Wel kan ik je vertellen dat goede WordPress hosting en een cache plugin als WP Rocket je hier goed bij kunnen helpen.
Per onderdeel zal ik je vertellen wat mogelijke verbeterpunten kunnen zijn.
Largest Contentful Paint (LCP) optimaliseren
De Largest Contentful Paint is het eenvoudigste onderdeel om te optimaliseren, aangezien het er eigenlijk gewoonweg alles zo goed mogelijk optimaliseren is. Dit kan onder andere op de onderstaande manieren.
#1 Upgrade je hosting of schakel over naar een andere hosting provider
Hosting is de fundering van je website en heeft grote invloed op de laadtijd. Heb je een goede snelheid? Mooi, niks meer aan doen. Wanneer je echter bij een slechte hosting provider zit waar je website altijd traag is, dan is het lastig om goede scores te halen. Ben je benieuwd wat ik een goede hosting provider vind? Bekijk dan het artikel met de beste WordPress hosting providers voor Nederland.
#2 Schakel pagina caching in
Pagina caching versnelt hoe snel je server reageert en vermindert de reactietijd (TTFB). Met een cache plugin kun je dit inschakelen of als je net als ik WP Rocket gebruikt, dan staat dit automatisch ingeschakeld.
#3 Optimaliseer je afbeeldingen
In veel gevallen is het grootste element wat als de Largest Contentful paint wordt gezien en de score bepaald een afbeelding. Het optimaliseren van je afbeeldingen zal je website versnellen en daarnaast kun je dus ook de tijd van de Largest Contentful Paint verbeteren. Je kunt je afbeeldingen verkleinen qua bestandsgrootte met een plugin als EWWW Image Optimizer.
#4 Optimaliseer je code
Het best kun je altijd voor een WordPress thema gaan waar niet veel poespas en mogelijkheden voor zijn. De reden hiervan is dat er dan een stuk minder onnodige CSS en JavaScript-bestanden geladen worden, waardoor de laadtijd beter wordt. Wil je niet wisselen naar een beter thema, dan kun je het deels oplossen door JavaScript uitgesteld te laden, CSS en JavaScript te verkleinen en overbodige CSS te verwijderen. Dit soort dingen zijn eenvoudig te regelen met WP Rocket.
#5 Internationaal publiek? Maak gebruik van een CDN
Heb je bezoekers uit allerlei verschillende landen, dan is het verstandig om een CDN te gebruiken. Doordat je met een CDN je website voorschotelt via een server die zo dichtbij mogelijk bij een bezoeker staat, zal de Largest Contentful Paint ook sneller geladen worden voor bezoekers waar zij zich ook mogen bevinden. Cloudflare is hier een prima voorbeeld van.
First Input Delay (FID) optimaliseren
Het optimaliseren van de First Input Delay is het meest gecompliceerd, omdat dit volledig om de code gaat. De First Input Delay gaat om interactie. Dit gaat over hoe snel de reactietijd is nadat er een interactie is gedaan. Denk aan het klikken op een link of knop.
Dit is ook de reden waarom bij de labgegevens niks staat over de First Input Delay, aangezien dit alleen op echte gebruikersdata gebaseerd kan worden.
#1 Vermijdt zware JavaScript-bestanden
Om de First Input Delay te verbeteren zal je met name zware JavaScript-bestanden moeten vermijden, zodat de website snel kan reageren op de interactie van een bezoeker op je website. Je zal dus op de plugins en het thema moeten letten die je gebruikt. Verwijder overbodige plugins.
#2 JavaScript uitgesteld laden en verkleinen
Je kunt JavaScript uitgesteld laten laden en uitvoeren en tevens laten verkleinen. Door het te verkleinen wordt het sneller geladen en door het uitgesteld te laden zorg je ervoor dat eerst alle andere dingen op je website goed worden getoond en functioneren, waardoor de First Input Delay beter wordt. WP Rocket is de plugin die ik hier zelf altijd voor gebruik.
#3 Zie de punten bij de Largest Contentful Paint
Net als voor het optimaliseren van de LCP, zal je voor het optimaliseren van de FID afbeeldingen en de code moeten optimaliseren en is caching handig.
Over het algemeen is het optimaliseren van de First Input Delay lastig als je geen ontwikkelaar bent of weinig technische kennis hebt van websites. Mocht je interesse hebben in dit onderwerp en er nog dieper in willen duiken, bekijk dan ook de technische uitleg van Google over de FID.
Cumulative Layout Shift (CLS) optimaliseren
Cumulative Layout Shift houdt in dat elementen op je website verschuiven. Je kunt onderzoeken om welke elementen dit gaat met de Google Layout Shift debugger.
De problemen en oplossingen voor het optimaliseren van de CLS die je het vaakst tegenkomt zijn.
#1 Afbeeldingen zonder dimensies (afmetingen) corrigeren
Wanneer je afbeelding toevoegt via de WordPress editor, dan zal WordPress automatisch de dimensies voor je toevoegen. Wanneer je echter zelf handmatig afbeeldingen via de code toevoegt, dan zal je de dimensies ook handmatig moeten toevoegen. In sommige thema’s wordt het logo ook zonder dimensies aangegeven. Door altijd de dimensies toe te voegen voorkom je dat afbeeldingen verspringen, omdat de browser in eerste instantie niet weet hoeveel ruimte er voor de afbeelding nodig is.
#2 Advertenties, embeds en iframes zonder dimensies corrigeren
Net als met afbeeldingen, zal je ook voor advertenties, embeds en iframes de afmetingen moeten toevoegen, omdat het anders kan verspringen. Zorg er dus altijd voor dat je de dimensies toevoegt op de juiste manier. Zie hiervoor ook w3school.
#3 Lettertypes optimaliseren (FOIT/FOUT)
Wanneer je custom lettertypes gebruikt, dan kan een traag ladende lettertype zorgen voor Flash of invisible text (FOIT) of Flash of Unstyled Text (FOUT). Dit houdt in dat de tekst tijdelijk nog niet getoond wordt of dat eerst een ander lettertype gebruikt wordt voordat de tekst in het juiste lettertype getoond wordt. Je kunt dit oplossen door je lettertype te preloaden. Met WP Rocket worden Google Fonts automatisch geoptimaliseerd. Ook heb je een handig veld waarin je eventueel andere lettertypes kunt preloaden.
Tips voor als je Core Web Vital scores niet beter worden
Wat nou als je alle aanbevelingen in PageSpeed Insights opvolgt en je Core Web Vital scores nog niet zo goed zijn als je verwacht?
Je kunt dan waarschijnlijk je WordPress performance nog verbeteren met de volgende tips.
#1 Kies een goede hosting provider
Ik heb het al genoemd bij het optimaliseren van de LCP, maar in dit geval zal ik als ik jou was zeker overwegen om een goede hosting provider te nemen. Hosting heeft onder andere invloed op het reactievermogen van de server, wat natuurlijk een grote rol speelt. Cloud86 is in Nederland een goede hosting provider die ik je van harte kan aanbevelen.
#2 Sla het optimaliseren van je bestaande afbeeldingen niet over
Ik weet het. Het optimaliseren van afbeeldingen heb ik ook al genoemd, maar wat ik vaak tegenkom is dat dit overgeslagen wordt of niet goed gedaan wordt. Schakel een plugin als EWWW Image Optimizer in om bestaande afbeeldingen te optimaliseren. Afbeeldingen die je nog moet uploaden kun je door TinyPNG heen halen.
#3 Gebruik alleen lichtgewicht plugins en optimaliseer de performance
Op WordPress websites zie je vaak veel plugins geïnstalleerd staan. De overgrote hoeveelheid van deze plugins hebben invloed op de voorkant van je website, omdat er JavaScript-bestanden geladen worden. Dit kan veel invloed hebben op de performance van je website. Wat ik regelmatig zie is dat een plugin met een bepaalde functie op één pagina nodig is, alleen wel op alle pagina’s van de website wordt geladen. Dit is volledig onnodig. Met een plugin als Asset CleanUp kun je zorgen dat deze scripts enkel op relevante pagina’s geladen worden.
Conclusie: Core Web Vitals optimaliseren
Ik hoop dat je na het lezen van dit artikel een goed beeld hebt gehad wat de Core Web Vitals zijn, inhouden en hoe je het kunt verbeteren.
Met een plugin als WP Rocket kun je al veel bereiken zonder dat je veel technische kennis nodig hebt.
Je moet echter begrijpen dat deze plugin natuurlijk ook geen wondermiddel is. Het draait ook om heel veel andere zaken. Zo heb je ook goede hosting nodig en is veel afhankelijk van welke plugins en thema je gebruikt.
Mocht je meer informatie willen hebben over wat de Google Core Web Vitals zijn en de snelheid van je website willen verbeteren, dan kun je ook altijd meedoen met de videocursus WordPress Snelheid Optimalisatie.
