Wat zijn Core Web Vitals? Hoe beïnvloed dit jouw website?

Wat zijn Core Web Vitals

De komende maanden staan er weer heel wat veranderingen op stapel bij Google. Een tijdje terug kondigde de zoekmachinegigant namelijk Core Web Vitals aan. Hiermee gaan ze nog meer de bruikbaarheid van een pagina controleren en dat heeft weer impact op je Google Ranking. Op dit moment zijn er 3 Core Web Vitals:  Largest Contentful Paint (laadtijd), Cumulative Layout Shift (visuele stabiliteit), and First Input Delay (interactiviteit). In dit artikel vertel ik je alles wat je moet weten over deze Core Web Vitals. Wat zijn Core Web Vitals? Hoe beïnvloed dit je eigen WordPress website? Ook leg ik je uit hoe je deze nieuwe rankingfactoren kunt testen en hoe je de scores voor jouw website kunt verbeteren.

Wat zijn Core Web Vitals?

Core Web Vitals is een nieuw initiatief van Google dat is ontworpen om de gebruikerservaring op internet te meten en te verbeteren. In plaats van te focussen op algemene statistieken, zoals hoe lang het duurt voordat je hele website is geladen, richten Core Web Vitals zich vooral op hoe de prestaties van jouw WordPress website samenhangen met het leveren van een hoogwaardige gebruikerservaring.

Er zijn op dit moment 3 Core Web Vitals:

  • LCP: Largest Contentful Paint
  • CLS: Cumulative Layout Shift
  • FID: First Input Delay

De indicatoren zijn volgens Google het belangrijkst om te bepalen hoe de gebruikservaring van een website is. Met LCP wordt de laadtijd van een website gemeten. FID bekijkt hoe het zit met de interactiviteit van een website. De CLS meet op zijn beurt de visuele stabiliteit van een website. Nog niet helemaal duidelijk wat deze 3 Core Web Vitals betekenen? Geen nood. Ik leg hieronder in detail uit wat ze betekenen.

Wat is Largest Contentful Paint?

Largest Contentful Paint (LCP) meet hoe lang het duurt voordat de meest betekenisvolle inhoud op je site is geladen – dat is meestal het hero-gedeelte of de aanbevolen afbeelding van een website.

Volgens Google is de tijd die het duurt voordat de hoofdinhoud van een pagina is geladen, van invloed op hoe snel gebruikers denken dat jouw website wordt geladen.

Hoe werkt dit in de praktijk? Een voorbeeld: je bezoekt een website en het valt je op dat de bovenste afbeelding van deze pagina niet meteen volledig wordt weergegeven. In het beste geval denk je: “Hmm, da’s best slordig”, maar er zijn genoeg mensen die zelfs direct de pagina verlaten. Het zegt namelijk iets over de laadtijd van je website. Op deze manier beïnvloedt het dus ook de gebruikerservaring van je bezoekers.

Het LCP-element is voor elke site anders, en het verschilt ook tussen de mobiele en desktopversies van een site. Soms kan het LCP-element een afbeelding zijn, terwijl het soms gewoon tekst kan zijn.

Wat is nu een goede LCP score? Google hanteert de volgende scores:

  • Good – Minder dan, of gelijk aan 2.5 seconden
  • Needs Improvement – Minder dan, of gelijk aan 4.0 seconden
  • Bad – Meer dan 4.0 seconden

Wat is Cumulative Layout Shift?

Ken je dat? Je bezoekt een pagina en je wilt klikken op een knop. Dat lukt alleen niet, want opeens wordt er op die plek een ander element geladen. Gevolg is dat de knop verspringt en je op niets klikt. Of nog erger, dat je op een advertentie of compleet andere knop klikt. Dat is precies wat CLS inhoud. Cumulative Layout Shift meet dus hoeveel de inhoud van een website verschuift of beweegt tijdens het laden. Je begrijpt waarschijnlijk wel dat dit ontzettend irritant is voor bezoekers als dit op jouw pagina gebeurt.

Google hanteert voor CLS de volgende scores:

  • Good – Minder dan, of gelijk aan 0.1 seconden
  • Needs Improvement – Minder dan, of gelijk aan 0.25 seconden
  • Poor – Meer dan 0.25 seconden

Wat is First Input Delay?

First Input Delay of FID meet de tijd tussen wanneer een gebruiker interactie heeft met iets op jouw pagina (bijv. klikken op een knop of een link) en wanneer zijn browser kan beginnen met het verwerken van die gebeurtenis.

FID is de lastigste van de drie Web Core Vitals. Dit komt doordat met deze metric veel te maken heeft met het laden van Javascript op je website. Een voorbeeld: als je op een knop klikt om een accordeongedeelte uit te vouwen, hoe lang duurt het dan voordat je site hierop reageert en de inhoud laat zien? Het gaat hier dus om interactie van de gebruiker met je website. Denk hierbij aan het klikken op een button of link, het invoeren van tekst in een leeg veld, het navigeren door te klikken op een dropdownmenu, het uitvouwen van een accordeongedeelte (zoals je die veel ziet op FAQ pagina’s) en nog veel meer. 

Google hanteert voor FID de volgende scores:

  • Good – Minder dan, of gelijk aan 100 ms
  • Needs Improvement – Minder dan, of gelijk aan 300 ms
  • Poor – Meer dan 300 ms

Hoe kan ik de Core Web Vitals van mijn website meten?

Je kunt de Core Web Vitals van jouw website testen en meten met alle tools van Google voor webontwikkelaars, van PageSpeed Insights tot de Chrome DevTools en Search Console. Sommige tools laten niet de FID zien, maar Total Blocking Time. Dit komt dat FID gebaseerd is op data van echte gebruikers. Wanneer deze niet beschikbaar is, dan “Lab Data”. Dit is overigens geen probleem, want Google gebruikt juist die Lab Data. Een andere goede tool is GTmetrix.

Wanneer gaat Google de Core Web Vitals meten?

Google heeft bekend gemaakt dat ze in mei en juni 2021 de Core Web Vitals gaan uitrollen. Het is dus zaak om nu actie te ondernemen voordat dit je Google ranking negatief gaat beïnvloeden.

Hoe kan ik de Core Web Vitals op mijn WordPress website verbeteren?

De grote vraag is natuurlijk hoe je je WordPress website kunt optimaliseren om de Core Web Vitals te verbeteren. Let wel dat optimalisatie voor mobiele weergave vele malen moeilijker is dan voor de desktop. Dit is voor mij zelf ook nog iets waar ik dagelijks mee bezig ben. Deze tips gaan je sowieso op weg helpen:

Maak gebruik van een cache plugin

Elke WordPress website zou gebruik moeten maken van een cache plugin. Mijn favoriete plugin is WP Rocket. Deze cache plugin is niet gratis, maar wel heel gebruiksvriendelijk. Het allerbelangrijkste: met WP Rocket heb ik mijn websites erg snel kunnen maken. Zaak hierbij is wel dat je elke optie die je aanzet even test. Zo kwam ik er bijvoorbeeld achter dat wanneer ik de optie ‘CSS-levering optimaliseren’ uitzet mijn scores drastisch omhoog gingen. Elke website is anders, dus wat voor de ene website wel werkt hoeft niet te werken voor een andere website. Meer weten over WP Rocket? In mijn artikel Maak je WordPress website sneller met WP Rocket leg je alles uit over deze cache plugin.

Maak gebruik van een CDN

Een Content Delivery Network maakt je website een stuk sneller. Cloudflare biedt een gratis versie van hun diensten aan. Hierbij geldt natuurlijk wel dat alle geld naar zijn waar is. Verwacht er dus geen wonderen van, maar het is beter dan geen CDN gebruiken. Cloudflare werkt in ieder geval goed samen met WP Rocket.

Kies goede hosting

Hosting heeft grote invloed op de snelheid van je website. Zelf ben ik tevreden over SiteGround. SiteGround is absoluut niet perfect, maar levert voor de prijs goede hosting. Het allerbeste is managed hosting zoals bijvoorbeeld Cloudways. Cloudways ligt wel weer een stukje duurder dan SiteGround, maar is weer niet zo duur als bijvoorbeeld Kinsta. Als je echter een grotere website hebt, vereist die meer ruimte en dan kan Kinsta toch weer wat goedkoper zijn dan Cloudways. Elke hosting heeft zijn voor- en nadelen, dus research is een vereiste. In mijn blog Hoe vind je goede hosting voor je website? lees je meer over het kiezen van hosting.

Optimaliseer afbeeldingen

Het optimaliseren van je afbeeldingen is ook erg belangrijk. Zorg er voor dat je niet te grote afbeelding upload. Als je bijvoorbeeld meer een afbeelding nodig hebt met een breedte van 900 pixels, upload dan niet een afbeelding met een breedte van 2000 pixels. Daarnaast is het verstanding om een plugin als Smush te gebruiken en je afbeeldingen even door compressie tool Tinypng te halen.

Een andere tip is om je layout aan te passen bij mobiele weergave. Met bijvoorbeeld het WordPress thema Astra is het mogelijk om per afbeelding er voor te kiezen om deze schakelen voor weergave op tablets en smartphones.

Gebruik alleen essentiële plugins

Let er op welke plugins je installeert. Controleer af en toe even je geïnstalleerde plugins even en bekijk of je deze plugins echt nodig hebt. Daarnaast is het ook de moeite waard om te kijken of je plugins kunt vervangen voor betere, lichtere plugins. Een voorbeeld hiervan is Contact Form 7 wat ik zelf recentelijk heb vervangen voor een betere contactformulieren plugin.

Gebruikersgemak en usability worden anno 2021 (terecht) steeds belangrijker. Je wilt tenslotte de gebruikers van je website een prettige ervaring geven. Daar wordt je zelf namelijk ook beter van. Het doel is om bezoekers zo lang mogelijk te houden op je website. Hoewel het misschien lastig is, helpen deze Core Web Vitals daar ook bij. Lukt het je zelf niet om je Core Web Vitals te verbeteren? Neem contact met me op. Ik help je graag om je website te optimaliseren. Natuurlijk worden al mijn websites ook gebouwd met het oog op deze 3 waarden.

Alles wat je moet weten over core web vitals Pinterest afbeelding

ComputerComputer

Deel dit artikel

Lees meer van de blog

seo tips om je website een boost te geven
Marketing

12 SEO tips om je website een boost te geven

Bijna iedereen gebruikt Google om te zoeken naar een product of dienst. Als website eigenaar is het dus belangrijk om hoog in de zoekresultaten te staan. Hoe hoog jouw site scoort hangt af van verschillende factoren. Gelukkig kun je zelf ook veel hier aan doen door je website te optimaliseren. Wanneer je zelf een website

Lees meer »
Webdesign trends in 2021
Website Design

Webdesign trends in 2021

Welke webdesign trends gaan we zien in 2021? Vorige week schreef ik al een blog over de logo ontwerp trends van 2021. In de webdesign trends van 2021 zien we een overlap van bepaalde logo ontwerp trends. Ook zien we een aantal trends die we al kennen van dit jaar, maar natuurlijk zijn er ook

Lees meer »
woocommerce webshop optimaliseren
Website Design

Je WooCommerce webshop optimaliseren voor een hogere conversie

Wanneer je een webshop hebt, draait alles om een betere conversie te behalen. Je conversieratio is het aantal verkopen dat je doet in vergelijking met het aantal bezoeken op je WooCommerce website. Behoorlijk belangrijk om je hier dus op te focussen, want meer klanten betekend tenslotte een hogere omzet en hopelijk ook een hogere winst.

Lees meer »
De 5 beste gratis stockfoto sites + een bonus tip
Grafisch vormgeving

De 5 beste gratis stockfoto sites + een bonus tip

Bij het ontwerpen van websites of flyers, posters en andere promotie materiaal is beeldmateriaal zoals foto’s en illustraties erg belangrijk. Illustraties ontwerpen we natuurlijk zelf, maar voor foto’s is het toch de vraag waar we geschikte foto’s kunnen vinden. Idealiter maak je natuurlijk gebruik van het fotograaf, maar niet iedereen heeft het budget daar voor.

Lees meer »

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd.

Scroll naar top
Krijg mijn Website en SEO Checklist

Schrijf je in voor mijn nieuwsbrief

Ontvang mijn website en SEO checklist. Elke maand krijg je 1 a 2 keer een mail met nieuws, tips, freebies en kortingen.