Core Web Vitals

Gebruikservaring als ranking factor

Dat Google User Experience (UX) belangrijk vindt was al lange tijd bekend. Sinds enige jaren zijn de Core Web Vitals ook in in de pagespeed test van Google te vinden. In mei 2021 deed Google daar nog een schepje bovenop.  Sinds dat moment worden de Core Web Vitals als rankingfactor meegenomen en heeft het impact op je SEO posities. Het algoritme van Google is steeds slimmer geworden en weet nu beter te analyseren hoe jij als websitebezoeker je bezoek ervaart. Het doel van Google blijft dan ook het presenteren van de beste content als jij een zoekopdracht uitvoert. Zo blijf je de zoekmachine gebruiken en daar verdient Google weer aan.

De Core Web Vitals update heeft grote verschuivingen veroorzaakt in de SERP, wat je hoogstwaarschijnlijk hebt gemerkt in de rankings voor jouw website. Als je hiervoor wilt optimaliseren, moet je eerst weten wat de Core Web Vitals inhouden en hoe je een scan kunt uitvoeren. Sommige punten zal je met enige technische ervaring zelf op kunnen pakken, maar vaak zal je hulp van een developer nodig hebben. Onze developers hebben ruime ervaring om deze technische SEO punten snel voor jou te verbeteren zodat jij weer kunt stijgen in de rankings. Vraag onderaan deze pagina een Core Web Vitals scan aan en wij helpen je verder!
 

Wat zijn de Core Web Vitals?

De Core Web Vitals zijn drie metrics die door Google zijn vastgesteld om de gebruikerservaring op een website te meten. Google wil namelijk zo relevant mogelijke resultaten tonen voor de gebruiker, zodat deze Google zal blijven gebruiken. De metrics zijn de Largest Contentful Paint, de First Input Delay en de Cumulative Layout Shifts. Hieronder leggen we per stuk uit wat het betekent. 
Belangrijk om te weten is dat Google als eerste kijkt naar de resultaten op mobiele apparaten. Optimaliseer dus altijd mobile first!

Bron afbeelding: Google Search Central

Largest Contentful Paint (LCP)

De Largest Contentful Paint (LCP) geeft de tijd aan die het kost om het grootst weergegeven blok content dat direct zichtbaar is op je website in te laden.. Dit kan een tekstblok zijn, maar is veel vaker een afbeelding of video. 

De LCP moet onder de 2,5 seconden zitten om de test voor de Core Web Vitals te doorstaan. Dat betekent dat deze binnen 2,5 seconden helemaal ingeladen moet zijn. Wanneer de score tussen de 2,5 en 4 seconden zit, zijn er verbeteringen nodig. Als de LCP groter dan 4 seconden is, laadt je website erg traag. De kans is dan groot dat bezoekers je website alweer verlaten, voordat de pagina volledig is geladen. Hierdoor biedt je dus geen goede gebruikerservaring en kan het zijn dat je minder goed rankt dan concurrenten die deze score wel op orde hebben.

Hoe los je een slechte LCP score op?

Een slechte LCP score kan vele oorzaken hebben. In de meeste gevallen is de LCP een afbeelding. Het is dan zaak om de afbeelding zo snel mogelijk in te laden. 
 

Afbeelding sneller laden

Een mogelijk trucje om een afbeelding sneller te laden is om deze lokaal te hosten en hardcoded in te laden, op deze manier hoeft er niet een externe call te worden gemaakt wat al aanzienlijk in de tijd scheelt.
 

Reactietijd van de server

Ook de server kan flinke impact hebben op de LCP. Hoe trager de server zelf, hoe langer het duurt voor alle bronnen worden ingeladen (lees: dus ook de afbeelding of LCP). Zorg er dus voor de je een vlotte server hebt.
 

First Input Delay (FID)

First Input Delay (FID) is een metric van de Core Web Vitals die aangeeft hoe snel je website een actie uitvoert (bijv. een klik op een link). De FID score is de tijd vanaf het moment dat een gebruiker voor het eerst interactie heeft met een website (d.w.z. wanneer ze op een link of knop klikken) tot het moment waarop de browser daadwerkelijk in staat is om op die interactie te reageren. Dus hoe snel reageert de browser op een eerste interactie van een gebruiker. Hier mag volgens Google niet veel vertraging in zitten. 

 De First Input Delay moet onder de 100ms blijven om de test voor de Core Web Vitals te doorstaan. Bij een score tussen de 100 en 300 ms heeft je website verbeteringen nodig. Bij een slechte score (hoger dan 300 ms) geeft Google aan dat de gebruikerservaring niet voldoende is.

Hoe los je een slechte FID score op?

Eigenlijk heeft de FID veel te doen met de score “Total Blocking Time (TBT)”, welke ook in verschillende tooling is terug te vinden. Reden nummer één van slechte FID score is te veel zware JavaScript code. Het beter onderverdelen in componenten van je JavaScript kan al flink helpen. 

Daarnaast kan je bepaalde componenten ook “lazy” of asynchroon gaan inladen. Lazy betekent dat componenten pas ingeladen worden als ze benodigd zijn, en asynchroon zorgt ervoor dat je meerdere componenten parallel aan elkaar kan inladen. Hierdoor verlaag je de hele bundel die ingeladen moet worden en zorg je er voor dat het gedeelte dat wel direct nodig is, sneller wordt geladen.
 

Cummulative Layout Shifts (CLS)

De Cumulative Layout Shift geeft aan of je website verschuivende elementen vertoont.

Het is niet zozeer de belangrijkste metric van de Core Web Vitals, maar optisch wel de meest irritante voor een eindgebruiker. Iedereen kent het wel dat de layout verspringt door het inladen van banners, afbeeldingen, video's of andere Javascript elementen. Hier mag volgens Google niet te veel verschuiven: dit moet namelijk onder de 10% blijven om de test voor de Core Web Vitals te doorstaan. 

Hoe los je een slechte CLS score op?

Om de CLS score te verbeteren ga je te werk met de tool Lighthouse van Google. Deze tool zit ingebakken in de webbrowser Google Chrome. Via deze tool kan je het gehele proces van laden van de website inzien, en analyseren. Stap voor stap ga je elementen bij langs die verspringen tijden het laden. Deze elementen kan je vastzetten met bepaalde hoogtes en breedtes, waardoor ze niet meer verspringen. 

Afbeeldingen verspringen vaak

Vooral afbeeldingen zijn vaak een probleem voor de CLS score. Afbeeldingen worden vaak pas later ingeladen met een dynamische hoogte. Door de hoogte en breedte van afbeeldingen al van te voren vast te zetten, zal deze niet meer verspringen maar op de juiste plek ingeladen worden.

Lettertype: font-display swap

Verder zijn lettertypes tegenwoordig al sneller een probleem voor de CLS score. Steeds vaker wordt voor een snellere laadsnelheid voor de techniek “font-display: swap;” gekozen om al sneller überhaupt een lettertype te kunnen laten zien aan de bezoeker. Hierdoor wordt er direct een lettertype ingeladen dat al op het systeem van de bezoeker staat. Pas nadat het lettertype van de website zelf volledig geladen is, zal het lettertype voor het oog van de bezoeker vervangen worden.

Soms zit er verschil in hoogte en letter-spacing van de twee lettertypes. Hierdoor kunnen verspringingen voorkomen. Door een vaste hoogte van zinnen in te stellen, kan al een hoop verbeterd worden. Met JavaScript en de FontFace.load API kan je programmeren dat het eerste lettertype dichterbij het uiteindelijke lettertype komt qua layout. Wanneer het juiste lettertype ingeladen is, kan je het lettertype weer terugzetten naar de originele vormgeving.
 

Wil je hulp bij het verbeteren van de Core Web Vitals voor jouw website? Wij hebben de kennis en know how om je hierbij te helpen! Onze developers hebben ruime ervaring om deze technische SEO punten snel voor jou te verbeteren zodat jouw website een goede gebruikerservaring kan geven!

Core Web Vitals verbeteren: plan van aanpak

Om je Core Web Vitals aan te pakken gaan we via een drie-delig stappenplan te werk.

1) Scan van de website

We beginnen met een scan van de website via tooling waarmee we de Core Web Vitals kunnen meten. Met Google PageSpeed Insights of Lighthouse maken we deze scan, waarmee we uitgebreide informatie kunnen inzien over de scores. Zo kunnen we opsporen wat het grootste element is dat geladen moet worden (LCP), hoe snel je website interactief is (FID) en welke elementen verschuiven tijdens het laden (CLS).

2) Rapport doornemen

Na het opstellen van een volledige analyse met concrete actiepunten, zullen we het rapport aan je presenteren. We nemen het door en kijken hoeveel werk het gaat kosten om de waardes goed te optimaliseren. Met de inschatting van het werk kan jij beslissen of en hoe je het wilt gaan aanpakken en of je dit door ons wilt laten doen.

3) Aan de bak!

Mogen we knallen? Dan gaan we los! Afhankelijk van de hoeveelheid werk om de Core Web Vitals tot gewenste waardes te krijgen, gaan een of meerdere developers aan de bak. Binnenkort geniet jij van de winst van je goede Core Web Vitals scores!