Waarom aandacht besteden aan je Core Web Vitals
Tech30 maart 2022

Waarom aandacht besteden aan je Core Web Vitals

Core Web Vitals vormen een belangrijk onderdeel van Google's strategie voor een beter, sneller en bruikbaarder internet. Maar wat zijn deze Core Web Vitals en waarom zou je je er druk om maken?

Core Web Vitals

De Core Web Vitals zijn een subset van de Google Web Vitals en zijn volgens Google van toepassing op alle pagina's en zouden door alle site-eigenaren moeten worden gemeten. Meerdere onderzoeken hebben aangetoond dat de Core Web Vitals een directe correlatie hebben met conversie. Bovendien is Google de Core Web Vitals zelfs gaan gebruiken als beslissende factor bij het indexeren van je website.

Op dit moment bestaan de Core Web Vitals uit de volgende metrieken (Dit is waarschijnlijk aan verandering onderhevig):

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

Largest Contentful Paint (LCP)

De Largest Contentful Paint meet de tijd die nodig is voordat de grootste afbeelding of het grootste tekstblok zichtbaar is op het scherm. Of een element het grootste is of niet, wordt bepaald op basis van de grootte van het element dat zichtbaar is voor de gebruiker in de viewport (Above the fold).

Het LCP geeft een goede indicatie van de laadduur van de hoofdinhoud van de pagina.

Als we de LCP meten (Op een mobiel apparaat) van de pagina die je momenteel aan het lezen bent, zien we dat de hero-afbeelding als het grootste element wordt beschouwd en dat er 2.1s nodig was om die te laden.

Voorbeeld van largest contentful paintVoorbeeld van largest contentful paint

Wat is een goede waarde voor LCP? Volgens Google zou dit binnen 2,5 seconden moeten zijn vanaf het moment waarop de pagina voor het eerst wordt geladen.

LCP-drempelaanbevelingenLCP-drempelaanbevelingen

First Input Delay (FID)

First Input Delay meet de tijd die nodig is voordat de pagina begint met het verwerken van de eerste interactie van de gebruiker. Bijvoorbeeld wanneer de gebruiker voor het eerst op een knop of link klikt.

De FID is belangrijk omdat deze een goede indruk geeft van de laadresponsiviteit van de pagina. Daarnaast is het de eerste indruk die de gebruiker van een pagina krijgt en de eerste indruk moet natuurlijk goed zijn.

Een slechte FID-score wordt meestal veroorzaakt door overmatige JavaScript-verwerking tijdens het laden van de pagina, waardoor JavaScript-code wordt geblokkeerd die de gebruikersinteractie moet afhandelen.

In tegenstelling tot de LCP kan de FID alleen in het veld worden gemeten met behulp van tools zoals Google Search Console of PageSpeed ​​Insights. Als u geen veldgegevens heeft, kan de statistiek Total Blocking Time (TBT) worden gemeten met Google Lighthouse, deze correleert met de FID.

In tegenstelling tot het LCP kan de FID alleen in het veld worden gemeten met behulp van tools zoals Google Search Console of PageSpeed ​​Insights. Als u geen veldgegevens heeft, kan de statistiek Total Blocking Time (TBT) worden gemeten met Google Lighthouse, deze correleert met de FID.

Volgens Google is een goede waarde voor de FID-score 100 milliseconden of minder.

FID-drempelaanbevelingenFID-drempelaanbevelingen

Cumulative Layout Shift (CLS)

Cumulative Layout Shift meet visuele stabiliteit en volgens Google is een visueel stabiele pagina een aangename pagina.

Een slechte CLS-score resulteert echter in een onaangename ervaring. Iedereen heeft wel eens een pagina bezocht en geprobeerd op een knop of link op een pagina te klikken, waarbij de knop in de tussentijd verplaatste en je uiteindelijk op iets anders klikte. Dit is niet de ervaring die je je bezoekers wilt geven.

Simpel gezegd meet de CLS de cumulatie van layout shifts tijdens de levensduur van een pagina. Een layout shift vindt plaats wanneer een element wordt verplaatst of de grootte ervan wordt gewijzigd in een gerenderd frame.

De exacte implementatie van de CLS-metriek is complexer. Voor de exacte details raad ik je aan om deze gedetailleerde beschrijving van Google te lezen.

Als voorbeeld heb ik ook de CLS voor deze pagina gemeten in Google Lighthouse en de score is 0.019. Google Lighthouse toont ook de verschillende frames en zoals je kunt zien, lijken de elementen op deze pagina niet te bewegen of van grootte te veranderen van het ene frame naar het andere. Dit is een geweldig hulpmiddel om CLS-problemen op te sporen.

Voorbeeld van cumulatieve lay-outverschuivingVoorbeeld van cumulatieve lay-outverschuiving

Een goede score voor de CLS-statistiek is 0,1 of minder, wat in feite betekent dat er geen elementen mogen bewegen tijdens het laden van de pagina.

CLS-drempelaanbevelingenCLS-drempelaanbevelingen

Hoe te meten

Google Lighthouse is een geweldige tool om de Web Vitals van je site te meten. Je kunt de tool uitvoeren met behulp van de Google Chrome Developer Tools of online via web.dev. Om erachter te komen hoe je bezoekers je webpagina's echt ervaren, en de enige manier om FID daadwerkelijk te meten, is het gebruik van gegevens uit het veld. Dit kan worden gemeten met behulp van het Core Web Vitals-rapport in Google Search Console of Google Page Speed ​​Insights.

Hulp nodig bij het verbeteren van uw Core Web Vitals?

Bij Aviva Solutions zijn we experts in webtechnologie, met een ongekende focus op Core Web Vitals en performance. Gebruik ons ​​contactformulier of stuur ons een e-mail om een ​​gratis Core Web Vitals-audit te boeken: info@unplatform.io .

Jonne Kats
Geschreven door Jonne Kats
Op 30 maart 2022