Core Web Vitals: De aankomende Google Update

Robin, 17 maart 2021

In mei 2020 liet Google al weten op korte termijn meer aandacht te gaan geven aan de zogenaamde page experience. In mei van 2021 gaat het dan echt gebeuren, Google gaat websites onder andere beoordelen aan de hand van Core Web Vitals.

Voor we in de Core Web Vitals duiken wil ik je even kort iets uitleggen over Google en hun updates.

Google Search van Google

Wanneer ik Google zeg heb ik het namelijk specifiek over Google Search, de zoekmachine. In de praktijk zeggen we vaker Google wanneer we eigenlijk Google Search bedoelen.

Zoals je hoogstwaarschijnlijk weet zit er een ongelofelijk gecompliceerd algoritme achter deze zoekmachine.

Dit algoritme bepaalt, aan de hand van honderden factoren, welke pagina er op welke positie in de zoekresultaten komt te staan op een specifiek zoekwoord.

Een voorbeeld van zo’n rankfactor is bijvoorbeeld de veiligheid van jouw website. Maakt jouw website, bijvooorbeeld, gebruik van een beveiligde verbinding? (https in plaats van http).

Google Update

Ik zal je in een spreekwoordelijke noten-dop vertellen wat een Google Update is:

Google is er letterlijk dag-in-dag-uit mee bezig om te zorgen dat zij hun gebruikers de beste ervaringen geven. Hiervoor analyseren zij enorme hoeveelheden data en maken zij daaruit op wat hun gebruikers het liefst willen, soms zelfs nog voor dat gebruikers het zelf weten.

Zo concludeert Google bijvoorbeeld dat gebruikers van Google Search snel ladende pagina’s willen. Een gevolg hiervan is dat Google snelheid als rankingfactor meeneemt in hun algoritme.

Omdat zowel de technologie, als de wensen van Google-gebruikers, niet stil staat komen er om de zoveel tijd zogenaamde Google Updates uit. Deze Google Updates hebben dus invloed op het algoritme van Google Search.

Het is dus mogelijk dat je eerder op een bepaalde positie van de Google zoekresultaten stond op een specifiek zoekwoord en je, na zo’n Google Update, gezakt of juist gestegen bent.

Als website eigenaar doe je er dus goed aan om op de hoogte te blijven van deze Google Updates. En beter nog, dat je zorgt dat je jouw website optimaliseert aan de hand van deze updates.

Bovenstaande afbeelding komt van https://web.dev/vitals/

Google Update 2021: Core Web Vitals

Nu je weet wat een Google Update is en wat voor invloed deze kan hebben is het goed om te kijken naar de aankomende Google Update. Deze update wordt Core Web Vitals genoemd.

Zoals ik je aan het begin van dit artikel liet weten, gaat Google meer naar de pagina ervaring kijken. Met andere woorden, ze willen de ervaring van hun gebruikers (internetgebruikers die Google Search gebruiken) verbeteren.

Om dit te realiseren hebben ze Core Web Vitals in het leven geroepen. Core Web Vitals bestaan uit de volgende drie onderdelen:

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

Misschien heb je al wel eens een van deze termen voorbij zien of horen komen. Ik zal ze nu even met je doornemen.

Largest Contentful Paint (LCP)

De Largest Contenful Paint, vaak afgekort tot LCP, meet de laadsnelheid van een website. Daarbij is het goed om te weten dat het de laadtijd meet van het grootst zichtbare element. Dit kan een afbeelding zijn, maar ook een tekstblok.

Het is ook goed om te weten dat, tijdens het laden, de LCP kan veranderen. Zie bijvoorbeeld onderstaand voorbeeld van https://web.dev/lcp/

Hier zie je de LCP, het groene blok, eerst om de tekst Visual stories staan, vervolgens om het tekstblok Who has qualified for the September debates, so far en pas in de laatste schermafbeelding is de foto de LCP.

Bovenstaande afbeelding komt van https://web.dev/lcp/

Google geeft aan dat een goede Largest Contenful Paint onder de 2,5 seconden hoort te zitten. Met andere woorden: het grootste element op je pagina moet onder de 2,5 seconden geladen zijn.

Bovenstaande afbeelding komt van https://web.dev/lcp/

First Input Delay (FID)

De First Input Delay, vaak afgekort tot FID, heeft te maken met de snelheid waarmee bezoekers interactie kunnen hebben met jouw pagina. Met een interactie bedoel ik bijvoorbeeld het klikken op een knop of bijvoorbeeld het naar beneden of boven scrollen.

Het meet namelijk de tijd tussen wanneer een bezoeker voor het eerst interactie heeft gehad met jouw website (klikken van een knop etc.) tot het moment waarop de browser de mogelijkheid heeft om dit verzoek te verwerken.

Wanneer we als bezoeker op een knop klikken verwachten we dat er vrijwel meteen iets gebeurt. In de praktijk kan het echter zo zijn dat de browser op dat specifieke moment met een andere taak bezig is. Dit zou in de praktijk zorgen voor een (te) lange FID.

Bovenstaande afbeelding komt van https://web.dev/fid/

Het bovenstaande schema laat zien hoe de browser te maken krijgt met interactie terwijl het op dat moment met een ander verzoek bezig is. Hierdoor kan de browser niet eerder reageren, dan wanneer het andere verzoek is afgehandeld, en ontstaat er een langere FID.

Bovenstaande afbeelding komt van https://web.dev/fid/

Een goede First Input Delay ligt onder de 100 ms. Let er hierbij goed op dat het dus niet zo moet zijn dat er iets binnen 100 ms geladen is. Het mag maximaal 100 ms duren voordat de browser aan het eerste interactie verzoek kan voldoen.

Cumulative Layout Shift (CLS)

De Cumulative Layout Shift, vaak afgekort tot CLS, is er een waar ik persoonlijk helemaal van begrijp dat het een belangrijkere factor gaat worden.

Je hebt vast wel eens meegemaakt dat je op een pagina bent aangekomen, op een knop wilt klikken en de knop in een keer verschuift? Heel erg irritant.

En dat vind Google, of dus eigenlijk haar gebruikers, ook.

Het onderstaande gifje maakt het best duidelijk wat ik bedoel.

Bovenstaande GIF komt van https://dev.to/ben/fixing-cumulative-layout-shift-41ja

In de praktijk komt zo’n verschuiving doordat bijvoorbeeld de volgorde van het laden van elementen niet chronologisch is.

Het staat vast dat zo’n verschuiving erg irritant is, ook wanneer je daardoor niet per ongeluk 56 items koopt, zoals in het voorbeeld gifje.

Een goede Cumulative Layout Shift blijft onder de 0.1.

Bovenstaande afbeelding komt van https://web.dev/cls/

Het berekenen van de CLS is iets gecompliceerder dan enkel iets meten. Google heeft daarvoor de volgende formule bedacht:

layout shift score = impact fraction * distance fraction

De zogenaamde layout shift score wordt hier door Google uitgelegd.

Gelukkig zijn er makkelijkere manieren om achter je CLS te komen.

Core Web Vitals meten

Je weet nu dat je LCP onder de 2,5 seconden moet zitten, je FID onder de 100 ms en je CLS onder de 0.1.

Daarbij is het nog wel goed om te weten dat Google kijkt naar 75% van je website bezoekers (zowel mobiel als desktop). Dat geldt voor alle drie de Core Web Vitals.

To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

https://web.dev/cls/#what-is-a-good-cls-score

Ik kan me voorstellen dat je razend benieuwd bent naar de score van jouw pagina’s.

Ik zal binnenkort een artikel publiceren waarin ik dieper in ga op het meten van de Core Web Vitals.

Maar voor nu is het goed om te weten dat je met de PageSpeed Insights tool van Google kan kijken hoe je ervoor staat wat betreft de Core Web Vitals.

Hier kun je de First Input Delay (FID) niet meten. Dat is simpelweg omdat daarvoor input van een echte menselijke gebruiker nodig is.

Aan de slag met Core Web Vitals

Is dit de eerste keer dat jij van de Core Web Vitals Update hoort? Of ben je misschien al bezig met voorbereiding?

Heb je tips of advies met betrekking tot de Core Web Vitals die je kunt delen met mede Savvii’ers?

Laat het ons weten in de reacties.

Laat een reactie achter