Een vlotte en fijne website ervaring; dat is wat Google met de introductie van de Core Web Vitals wilt bereiken. Met de Core Web Vitals is Google in staat om de gebruikerservaring, die jij je bezoekers biedt, te meten. Met een succesvolle Core Web Vitals score zorg je ook voor een betere, organische vindbaarheid. In deze blog vertel ik je daarom graag meer over wat Core Web Vitals precies inhoudt en hoe je jouw website hiervoor kunt optimaliseren.

Wat zijn de Core Web Vitals?

Google wil haar bezoekers een zo fijn mogelijke gebruikerservaring bieden. De Core Web Vitals is een maatstaf die Google gebruikt om te beoordelen hoe gebruikersvriendelijk jouw website precies is. Samen met onder andere een beveiligde verbinding en een mobielvriendelijke website maken de Core Web Vitals een belangrijk onderdeel uit van de technische kant van SEO. Redenen genoeg om jouw website hiervoor te optimaliseren, toch? 😉

Waarom zijn de Core Web Vitals belangrijk?

Anno 2022 is een snelle en gebruiksvriendelijk website essentieel om succes te behalen op het internet. Dit geldt niet alleen voor de richtlijnen van Google, maar voornamelijk om je bezoekers op een zo fijn mogelijke manier te helpen. De kans dat een websitebezoeker, die langer dan 4 seconden moet wachten totdat de pagina geladen is, de website verlaat is groot. De Core Web Vitals is daarom dé ideale maatstaf om te onderzoeken hoe jouw website ervoor staat.

Welke Core Web Vitals zijn er?

De Core Web Vitals hebben vooral te maken met de laadsnelheid van je website. De drie Core Web Vitals zijn:  

1. Largest Contenful Paint (LCP)
2. First Input Delay (FID)
3. Comulative Layout Shift (CLS)

Hieronder leg ik per onderdeel uit wat het precies inhoudt en hoe je jouw website hiervoor kan optimaliseren. Zo weet je zeker dat je voldoet aan de eisen en het maximale uit jouw online aanwezigheid haalt!

Largest Contentful Paint (LCP)

De Largest Contenful Paint, afgekort LCP, is de laadtijd tot het moment dat de bezoeker de webpagina daadwerkelijk te zien krijgt. Dit is namens Google enorm belangrijk om te meten, omdat er op de achterkant nog andere zaken ingeladen kunnen worden. De bezoeker staat in elk onderdeel centraal en daarom dient dit onderdeel snel te laden.

Wanneer voldoe je aan de LCP eisen?
Om te voldoen aan de LCP eisen dient de laadtijd van je webpagina onder de 2,5 seconden te zijn. Heeft je pagina een laadtijd tussen de 2,5 en 4 seconden? Dan is er volgens Google ruimte voor verbetering. Om te voorkomen dat je organische vindbaarheid lijdt onder de lange laadtijd adviseren we om je LCP altijd onder de 2,5 seconden te houden.

Tips om de LCP te verbeteren

Is de LCP score van je webpagina boven de 2,5 seconden? Of wil je jouw laadtijd nog meer verlagen? Veel van de websites die wij analyseren kennen dezelfde problemen. Om je een handje te helpen heb ik hieronder de belangrijkste tips voor je verzameld:  

• Verklein je bestanden: Een veel voorkomend probleem voor websites zijn grote bestanden zoals afbeeldingen en video’s. Hoe groter de bestanden op je webpagina zijn, hoe langer het duurt voordat deze zijn ingeladen. Om deze reden is het handig om afbeeldingen te verkleinen en video’s extern in te laden. Je kunt afbeeldingen als WEBP in het juiste formaat uploaden. Kleine bestanden gebruiken, zorgt ervoor dat de totale grootte van je pagina laag blijft. Probeer pagina’s zoveel mogelijk onder de 2MB te houden.
• Verbeter de laadsnelheid van je server: Een betrouwbare en snelle server vormt de fundering van een goede website. Het is belangrijk dat de server van je website snel reageert wanneer een bezoeker een webpagina inlaadt. Om te meten of de server waar je website op draait snel reageert kijk je naar de ‘Time to First Byte’. Deze maatstaf vertelt wat de precieze tijd is totdat de server reageert. Ga zo nodig met je hosting bedrijf in gesprek wat je kunt doen om je server te versnellen.
• Maak gebruik van caching: Door middel van caching sla je bestanden tijdelijk op in de browser van je gebruiker. Hierdoor hoeft deze niet elke keer de volledige pagina in te laden. Dit maakt je website een stuk sneller. Voor WordPress zijn er een aantal plugins die je kunt gebruiken. Zelf gebruiken we vaak WP .
• Verklein de grootte van je DOM: De DOM is het aantal HTML elementen op je webpagina. Teveel HTML elementen op je pagina heeft een negatief effect op de laadtijd van je webpagina. Het advies is daarom om het aantal elementen onder de 900 te houden.
• Kritisch kijken naar het inladen van JavaScript en CSS: Het komt bij veel websites voor dat er onnodig veel codes ingeladen worden. Vaak zijn dit JavaScript en CSS bestanden. Ondanks dat deze code(s) niet gebruikt wordt op de pagina, zorgt het er wel voor dat de laadsnelheid vertraagt. Probeer daarom altijd kritisch te zijn op het aantal codes die je inlaadt. Wordt het niet gebruikt op de pagina? Dan is het niet nodig om het in te laden.
• Minimaliseer het gebruik van 3th party scripts: Scripts inladen van derde partijen duurt enorm lang. Dit zijn scripts van bijvoorbeeld Google Analytics en Hotjar. Probeer het gebruik hiervan te minimaliseren en gebruik waar het kan Google Tag Manager.
• Lazy loading instellen: Je kunt door middel van Lazy Loading elementen, zoals afbeeldingen, op een later moment inladen. Deze elementen worden dan ingeladen op het moment dat de bezoeker hier daadwerkelijk naartoe scrolt. Zo voorkom je dat wanneer je enkel het eerste deel van een webpagina gaat bekijken toch moet wachten tot de gehele pagina ingeladen is.
• Voorkom overmatig gebruik van plugins: De laatste tip geldt met name voor WordPress websites: Voorkom dat je onnodig veel plugins gebruikt. Vraag je bij elke plugin af wat de toegevoegde waarde is en of je het niet op een andere manier kunt implementeren.

First Input Delay (FID)

De First Input Delay, ook wel FID, is de tijd tussen het moment dat een pagina zichtbaar is en daadwerkelijk functioneel is. Een pagina die ingeladen en zichtbaar is, is nog niet altijd functioneel. Je kunt dus niet gelijk al op buttons en links klikken; hier zit een kleine vertraging in. Voor de gebruiksvriendelijkheid is het cruciaal dat de tijd tussen inladen en functionaliteit niet te lang is. Je wilt niet dat je bezoekers op knoppen klikken terwijl deze nog niet ingeladen zijn.

Wanneer voldoe je aan de FID eisen?
Het is belangrijk dat je FID niet lager is dan 100 ms seconden. Google geeft bij 300 ms seconden aan dat er ruimte is voor verbetering en dat alles langer dan 100ms seconden een slechte gebruikerservaring is. Om hieraan te voldoen adviseer ik je om ervoor te zorgen dat de FID niet langer is dan 100 ms seconden.

Tips om de FID te verbeteren

Om ervoor te zorgen dat jouw FID score onder de 100 ms seconden blijft, heb ik een aantal tips voor je verzameld:

• Minimaliseer het JavaScript gebruik: Een lage FID score is in veel gevallen terug te leiden naar JavaScript die overmatig gebruikt wordt. Wees daarom kritisch op het aantal JavaScript elementen dat je gebruikt.
• Maak gebruik van caching: Ook voor je FID is caching een belangrijke tip. Gebruik waar nodig een plugin om dit in te stellen.
• Minimaliseer 3th party scripts: Ook voor je FID score is het belangrijk om 3th party scripts te beperken.

Cumulative Layout Shift (CLS)

Er is niks zo storend als content dat ineens verschuift. Zeker wanneer dit ervoor zorgt dat je op een verkeerde knop of link klikt. Google weet inmiddels wat voor irritaties dit bij bezoekers van je website opwekt en daarom is dit één van de Core Web Vitals. CLS is de beweging die plaatsvindt op je pagina omdat er dingen ingeladen worden. Dit zorgt ervoor dat de gehele content verschuift. Vaak zijn dit afbeeldingen, video’s en advertenties.

Wanneer voldoe je aan de CLS eisen?
Deze score wordt bepaald aan de hand van het percentage wat je content op de website verschuift en vervolgens aan ruimte inneemt. Vult de content die verschuift eerst 50% van je scherm en verschuift deze naar 75%? Dan is je CLS score 0.75.

Google merkt een maximale score 0.1 aan als goed. Is je score tussen de 0.1 en 0.25? Dan is er volgens Google ruimte voor verbetering. Net als bij de andere Core Web Vitals blijft het advies om zoveel mogelijk aan de eisen van Google te voldoen. In dit geval is het de maximum van 0.1 aanhouden.

Tips om de CLS te verbeteren

Om je CLS te verbeteren kun je een aantal dingen doorvoeren:

• Reserveer ruimte voor je afbeeldingen, video’s en advertenties: Door vooraf ruimte te reserveren voor afbeeldingen, video’s en advertenties zorg je ervoor dat ondanks dat afbeeldingen niet zijn ingeladen er alsnog ruimte is gereserveerd. Op het moment dat de afbeeldingen ingeladen worden, verschuift deze niet meer.
• Sluit de eerste afbeeldingen uit van je lazy load: Lazy Loading helpt je om je CLS score laag te houden. Wel is belangrijk dat je enkel de afbeeldingen later inlaadt die je tegenkomt wanneer je begint te scrollen. Zorg er daarom voor dat de bovenste afbeeldingen op je pagina geen gebruik maken van lazy loading en gewoon zichtbaar zijn vanaf het begin.
• Voeg geen content toe boven je bestaande content: Voorkom dat er content wordt ingeladen boven bestaande content. Dit zorgt ervoor dat het scherm van je bezoeker direct verschuift. Doe dit alleen wanneer de bezoeker een bewuste handeling uitvoert.

Zo meet je de Core Web Vitals

Nu je weet wat de Core Web Vitals precies inhouden, is het tijd om te gaan meten hoe jouw website ervoor staat. Meten geeft je inzicht in wat je scores precies zijn en waar er verbeterpunten liggen.

Voor je gaat meten is het belangrijk dat je snapt dat de tests veelal momentopnamen zijn. Is je server op dat moment druk bezocht? Dan heeft dit invloed op de prestaties van je website. Voer daarom altijd meerdere tests uit op verschillende momenten.

De drie tools die wij veelal gebruiken zijn:

• PageSpeed Insights
• GTmetrix
• Google Search Console

PageSpeed Insights

Deze tool van Google is ideaal om inzicht te krijgen in hoe snel jouw website is en welke verbeterpunten er zijn. Zoals ik al eerder aangaf is het een momentopname. Al haalt de tool in sommige gevallen informatie uit Google Search Console waardoor er alsnog uitgebreidere data beschikbaar is die over langere tijd gemeten is.

Ideaal aan PageSpeed Insights is dat er direct aanbevelingen worden getoond. Deze kun je dan direct doorgeven aan je websitebouwer of zelf oppakken.

GTmetrix

Een tool die ik persoonlijk fijner vind dan PageSpeed Insights is GTmetrix. Net als PageSpeed Insights gaat het bij GTmetrix om een momentopname. GTmetrix geeft een stuk meer inzichten en stelt je met de betaalde versie in staat metingen uit te voeren op verschillende plekken ter wereld met een verschillende verbinding en device. Ideaal voor een uitgebreide technische audit.

Ook GTmetrix geeft een aantal verbeterpunten die je aan je websitebouwer door kunt geven of zelf op kunt pakken. De website van GTmetrix staat vol met interessante artikelen om je uit te leggen wat alles precies inhoudt.

Google Search Console

Google Search Console is voor mij altijd leidend. Mocht je deze tool nog niet aan je website hebben gekoppeld, is dit gelijk je eerste actiepunt! Google Search Console geeft enorm veel inzichten in hoe je website ervoor staat en op welke zoekwoorden je vindbaar bent. Eén van de mogelijkheden van Google Search Console is je website monitoren op basis van de Core Web Vitals.

Mocht je problemen tegenkomen in het rapport dan kun je de website door PageSpeed Insights en/of GTmetrix halen. Zo kun je achterhalen wat precies de problemen veroorzaakt en wat je eraan kunt doen.

Ga aan de slag!

Heb je jouw website al getest met één van de tools die ik heb toegelicht? Zo ja, voldoet jouw website al aan de Core Web Vitals? Laat het ons vooral weten als je ergens tegenaan loopt. Mijn collega’s en ik kijken graag even met je mee of we als SEO bureau wat voor jou kunnen betekenen!