duplicate content

Google Core web vitals: wat zijn het en hoe verbeter ik ze?

10 min
3-10-2022
Levi

De afgelopen jaren heeft Google zich steeds meer gefocust op de gebruikservaring van websites. Om deze reden heeft Google besloten de gebruikservaring van een pagina mee te nemen als ranking factor. Een van de manieren hoe Google de gebruikservaring van een pagina meet is met behulp van de Core Web Vitals. In dit artikel lees je wat Google’s Core Web Vitals zijn en hoe jij deze kunt verbeteren voor jouw website.

  1. Wat zijn Core Web Vitals?
  2. Largest Contentful Paint
  3. First Input Delay
  4. Cumulative Layout Shift
  5. Tools om de Core Web Vitals te meten

Wat zijn Core Web Vitals?

Core Web Vitals zijn een reeks specifieke factoren die Google belangrijk vindt voor de algehele gebruikerservaring van een website. De Core Web Vitals bestaan uit drie specifieke factoren om paginasnelheid, gebruikersinteractie en visuele stabiliteit te meten: Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS).

Kort gezegd: Web Vitals zijn een combinatie van de elementen die samen de “Page Experience”-score van Google vormen. Scoor je goed op deze score? Dan is dit positief voor de organische positiesan jouw website.

Largest Contentful Paint (LCP)

LCP meet de tijd die nodig is om een ​​webpagina te laden vanuit het perspectief van de gebruiker. Veel andere metingen van de paginasnelheid doen dit anders. Metingen zoals TTFB en First Contextual Paint geven niet noodzakelijk weer hoe het voor een gebruiker is om een webpagina te openen, maar wanneer het eerste element zichtbaar is op de website. LCP geeft aan hoelang het duurt voordat het grootste element op het scherm verschijnt. Deze elementen kunnen video’s, afbeeldingen of andere elementen zijn.

Wat is een goede LCP score?

Een goede LCP-score heeft een laadtijd van minder dan de 2,5 seconden. Is de laadtijd van jouw website tussen de 2,5 en 4 seconden? Dan ben je goed op weg. Maar er is nog zeker ruimte voor verbetering. Duurt het laden langer dan 4 seconden? Dan is de laadtijd van jouw website niet goed en is de kans erg groot dat de gebruikers van jouw website wegklikken.

Hoe verbeter ik de LCP score van mijn website?

Om de LCP score van jouw website te verbeteren zijn er een aantal dingen waar je mee aan de slag kan:

  • Upgrade de webhosting: Een ander hosting pakket kan ervoor zorgen dat de server sneller reageert. Hierdoor zal een website over het algemeen sneller laden en kan de LCP verbeteren.
  • Stel lazy loading in: Lazy loading zorgt ervoor dat afbeeldingen alleen laden wanneer iemand naar beneden scrolt op de webpagina. De pagina hoeft nu alleen de elementen die je direct ziet te laden, waardoor dit sneller kan laden.
  • Verwijder of wijzig de grootste pagina elementen: Google pagespeed of een van de andere tools zal aangeven of jouw webpagina een element heeft dat de LCP kan vertragen. Zorg er in dit geval voor dat dit element wordt verwijderd of gewijzigd op je website.
  • Verwijder alle non-critical third party scripts: Met een third party script kunnen functies en elementen op de website worden uitgevoerd die verder gaan dan de mogelijkheden van de website zelf. Dit wordt gedaan met behulp van javascript. Als je te veel van deze scripts op je pagina hebt kan dit ervoor zorgen dat het langer duurt voordat elementen zijn geladen. Zorg er daarom voor dat third party scripts worden verwijderd van de pagina wanneer deze niet worden gebruikt.
  • Minimaliseer CSS: Het ontwerp van een website bestaat uit CSS-bestanden. Deze bestanden bestaan uit een groot aantal regels met code. In deze code staan vaak onnodige stukken die ervoor zorgen dat de website minder snel laadt. Het minimaliseren van deze CSS-bestanden kan ervoor zorgen dat ze kleiner worden en de website sneller zal laden.

First Input Delay (FID)

FID is de tijd die een gebruiker nodig heeft om een actie uit te voeren op een pagina. Zo’n actie kunnen bijvoorbeeld het klikken op een link, op een knop klikken of het uitklappen van een menu zijn. Hoelang de pagina erover doet om deze actie te laden wordt ook wel de FID genoemd.

Google vindt het FID belangrijk, omdat dit aangeeft hoe goed acties van gebruikers met de pagina kunnen gebeuren. Hoe sneller de actie kan gebeuren, hoe fijner dit is voor de gebruiker van de pagina.

Wat is een goede FID score?

De FID is goed wanneer deze onder de 100 milliseconden is. Is de FID tussen de 100 en 300 milliseconden? Dan is het belangrijk de snelheid van de acties te verbeteren. Het lijkt er namelijk voor de gebruiker op dat er iets misgaat op de website. Is de FID langer dan 300 milliseconden? In dit geval lijkt het er voor de gebruiker op dat de website niet reageert en is de kans groot dat zij de website zullen verlaten.

Hoe verbeter ik de FID score van mijn website?

Er zijn verschillende manieren om de interactiviteit van jouw website te verbeteren:

  • Javascript minimaliseren: Het gebruik van JavaScript op je website kan ervoor zorgen dat interacties op je website langer duren. Zorg er hierom voor dat je de javascript op je website minimaliseert of een defer instelt.
  • Verwijder alle non-critical third party scripts: Net als bij FCP kunnen non-critical third party scripts een negatieve invloed hebben op je FID. Zorg er daarom voor dat wanneer je scripts, zoals Google analytics en heatmaps, uitschakelt wanneer je deze niet gebruikt.
  • Browser caching: Het gebruiken van browser caching kan ervoor zorgen dat de website sneller laadt en de FID voor jouw website zo laag mogelijk blijft.

Cumulative Layout Shift (CLS)

CLS geeft aan hoe stabiel de visuele elementen zijn op een pagina terwijl hij geladen wordt. Met anderen woorden is CLS ook wel aantal elementen die verplaatsen op je pagina terwijl deze geladen wordt. Hoe meer van deze elementen verplaatsen, hoe slechter dit is voor de CLS score.

Eigenlijk wil je ervoor zorgen dat elementen op je pagina redelijk stabiel worden geladen en er zo min mogelijk verplaatst. Hiermee zorg je ervoor dat gebruikers weten waar op de pagina welke elementen zich begeven en dit niet veranderd wanneer de pagina volledig is geladen.

Wat is een goede CLS score?

Een goede CLS score is een score onder de 0,1. In dit geval is de pagina stabiel en prettig voor de gebruiker. Is de CLS score tussen de 0,1 en de 0,25? Zorg er dan voor dat minder elementen op de website zich verplaatsen tijdens het laden. Is de CLS score hoger dan 0,25? Dan is de webpagina niet stabiel en is het onduidelijk voor de gebruiker waar elementen op de website zich gaan begeven.

Hoe verbeter ik de CLS score van mijn website?

Je kunt een aantal dingen doen om de stabiliteit van jouw website te verbeteren:

  • Gebruik “set-size” voor elementen op je website: Met het gebruik van “set size” voor media-elementen op je website zorg je ervoor dat de browser weet hoe groot de elementen moeten zijn op de webpagina. Hierdoor is het makkelijker voor de browser om in te schatten hoeveel ruimte de elementen gebruiken op de pagina.
  • Advertenties op de pagina: Advertenties bovenaan je pagina kunnen ervoor zorgen dat er verschuivingen ontstaan tijdens het laden op je website. Wanneer je de advertenties lager op de website plaats is er minder content dat kan verschuiven en zal je CLS dus ook verbeteren. Als je de advertentie niet lager wil zetten kan je ook set-size voor ze instellen. In dit geval weet de browser hoe groot het element wordt en zullen er minder verschuivingen ontstaan.
  • Dynamische content: Met behulp van dynamische content wordt een pagina aangepast op de individuele gebruiker. Dit is wat je bijvoorbeeld wanneer je op een bookingsite ziet hoeveel personen de pagina op dit moment aan het bekijken zijn. Het is belangrijk deze informatie niet boven andere content te plaatsen. Wanneer dit wel zo is kan er door de veranderingen van de content verschuivingen op de pagina optreden. Als je toch dynamische content wil gebruiken, zorg er dan voor dat deze onder de vaste content komt te staan en alleen getriggerd wordt bij een actie van de gebruiker.
  • Extra ruimte: Zorg ervoor dat elementen extra ruimte hebben op de pagina. Hiermee zorg je ervoor dat de elementen altijd op de juiste plek staan en niet plotseling ergens anders op de webpagina.

Tools om de Core Web Vitals te meten

Om de web vitals van jouw website goed te kunnen meten zijn er verschillende tools die je hierbij kunnen helpen. Deze verschillende tools kunnen je inzichten geven welke factor je nog aan kunt werken en wat je kunt doen om je web vital score te verbeteren.

Hieronder een overzicht van tools die je kan gebruiker om de Core Web Vitals van jouw website te meten:

Merk je toch dat je zelf niet tot de oplossing komt? Bij MarketingKarwei helpen we je graag. Dankzij onze jarenlange ervaring met vindbaarheid gaan we samen aan de slag om jouw website te laten scoren. Neem vrijblijvend contact op of kom langs bij ons kantoor in Nijmegen!