Core Web Vitals: wat zijn ze & hoe kan je ze optimaliseren?

Ontwerp zonder titel (42)

Wil je goed scoren in Google? Dan kan je de gebruikservaring op je website niet meer zomaar links laten liggen. Google heeft namelijk bevestigd dat het gebruikservaring nu ook meeneemt als ranking factor. Google hoopt hiermee een stap dichter bij zijn ultieme doel te komen: webpagina’s zo relevant en gebruiksvriendelijk mogelijk maken voor bezoekers.

Een meetbare page experience

Page experience blijft natuurlijk een grote en veelomvattende term. Om deze reden besliste Google om de page experience zoals zij het ervaren meetbaar te maken aan de hand van de (voorlopig driedelige) ‘Core Web Vitals score’. In dit blogartikel vertellen we je graag meer over deze 3 interessante metrics en hoe je ze kan optimaliseren.

Wat zijn Core Web Vitals?

Core Web Vitals zijn een reeks specifieke factoren die Google belangrijk vindt om de algemene gebruikservaring van een webpagina te bepalen. Core Web Vitals bestaan uit drie specifieke metingen van paginasnelheid en gebruikersinteractie, namelijk: Largest Contentful Paint, First Input Delay en Cumulative Layout Shift.

Metric 1: Largest Contentful Paint (LPC)

Largest Contentful Paint (LCP) meet de waargenomen laadsnelheid. Dit is de tijd die je pagina nodig heeft om het grootste element op je scherm te tonen. Algemeen geldt hier dat je voor een goede gebruikservaring een grens van 2,5 seconden moet nastreven. Geef toe: je klikt zelf ook gauw weg als je langer dan 5 seconden moet wachten, toch?

Hoe Largest Contentful Paint (LPC) optimaliseren?

  • Verwijder onnodige scripts van derden: uit een recent pagespeed-onderzoek bleek dat elk script van derden een pagina tot 34 ms kan vertragen. Onnodige scripts doe je dus maar beter weg. 
  • Upgrade je webhost: betere hosting staat over het algemeen gelijk aan snellere laadtijden. Een kleine upgrade van je webhost zal je LCP dus zeker ten goede komen. 
  • Stel lazy loading in: lazy loading zorgt ervoor dat afbeeldingen alleen worden geladen als iemand naar beneden scrollt op je pagina.
  • Verwijder grote pagina-elementen: dit kan je afleiden uit de tool Google PageSpeed Insights. Deze vertelt je of je pagina een groot element heeft dat de LCP van je pagina vertraagt.
  • Minimaliseer je CSS: grote hoeveelheden CSS kunnen de LCP-tijden aanzienlijk vertragen. Beperk je daarom tot de CSS die echt nodig is.

Metric 2: First Input Delay (FID)

De metric First Input Delay (FIDI) meet de “responsiviteit” van je webpagina. Met andere woorden: de tijd die nodig is tussen het laden van de pagina en het moment waarop de gebruiker voor het eerst een mogelijkheid heeft tot interactie.  First Input Delay gaat dus meer over gebruikersbetrokkenheid dan over gebruikservaring. Google geeft hier aan dat een score tot 100ms aan als een goede prestatie.

Is je score hoger dan 100ms? Dan lees je best nog even verder.

Hoe First Input Delay (FID) optimaliseren?

Een FID score tussen de 100ms en de 300ms verbeteren kan op verschillende manieren:

  • Minimaliseer JavaScript (of stel het uit): het is bijna onmogelijk voor gebruikers om te communiceren met een pagina terwijl de browser JavaScript laadt. Het minimaliseren of uitstellen van JavaScript op je pagina is dus essentieel om je FID te verbeteren.
  • Verwijder alle niet-kritische scripts van derden: net als bij FCP kunnen scripts van derden (zoals Google Analytics, heatmaps etc.) een negatieve invloed hebben op FID.
  • Gebruik een browser cache:  browser caches zorgt ervoor dat de inhoud op je pagina sneller laadt, waardoor de browser van je gebruiker nog sneller door de JavaScript laadtaken heen gaat.

Metric 3: Cumulative Layout Shift (CLS)

De Cumulatieve Layout Shift (CLS) is een maatstaf voor onverwachte lay-outverschuivingen. Een lay-out verschuiving treedt op wanneer een zichtbaar element van positie verandert van het ene gerenderde frame naar het volgende. Elk onstabiel of beweegbaar item op een pagina zorgt dus in principe voor een lagere CLS score. Een goede score ligt hier rond de 0.1 of minder.

Hoe Cumulative Layout Shift (CLS) optimaliseren?

  • Gebruik vast afmetingen voor media: afbeeldingen en  advertenties hebben altijd meer laadtijd nodig, zorg er daarom voor dat je op voorhand al ruimte reserveert & hoogtes en breedtes specificeert.
  • Voeg nieuwe User Interface (UI) elementen onder de vouw toe: op deze manier duwen ze geen inhoud naar beneden waarvan de gebruiker "verwacht" dat die blijft waar hij is.

Tools om je Core Web Vitals te meten

Met de Google Web Vitals score heb je als marketeer of developer een aantal objectieve metrics bij de hand om de gebruikservaring op je website bij te houden. Je Core web Vitals zijn in principe via verschillende tools te achterhalen. Welke tool je het liefste gebruikt, laten we volledig bij jou.

Je Core Web Vitals score verbeteren met onze experten?

Benieuwd wat wij kunnen doen om je Google Core Web Vitals te verbeteren? Neem dan gerust contact op via onderstaand formulier.