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

Share on facebook
Share on pinterest
Share on linkedin
Share on twitter
Share on email

Lees meer van de blog

de logo design trends van 2021
Logo ontwerp

De logo ontwerp trends van 2021

Aan het eind van het jaar is tijd om achterom te kijken en het jaar te evalueren. Het is ook de tijd om juist vooruit te kijken. Een logo is een belangrijk onderdeel van de visuele identiteit van een bedrijf. Het is vaak het eerste van je bedrijf waar klanten mee in aanraking komen. Wordt

Lees meer »
De beste contactformulier plugins voor Wordpress
Wordpress

De beste contactformulier plugins voor WordPress

Tot voor kort maakte ik gebruik van het bekende Contact Form 7, maar hier ben ik vanaf gestapt. Ik was op zoek naar een betere contactformulier plugin die wat lichter was. Wat zijn de beste contactformulier plugins voor WordPress? Ik vertel het je in de ze blog Waarom ik af ben gestapt van Contact Form

Lees meer »
Tips voor een effectieve blog
Bloggen

Tips voor een effectieve blog

Heb jij al een blog? Zo niet, dan zou ik er zeker eens over nadenken toch te beginnen met bloggen. Een blog is namelijk een uitstekende manier om meer verkeer naar je website te leiden. Dat lukt echter alleen als je blogs ook aan een aantal eisen voldoen. In dit blog artikel vind je handige

Lees meer »

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Scroll naar top