Google Core Web Vitals en hoe ze je kunnen helpen

Wie zich een beetje heeft verdiept in SEO, zal kunnen beamen dat Google regelmatig hun algoritme aanpast waardoor je jouw website soms ineens helemaal om moet gooien. Maar niet getreurd: de wijzigingen in hun algoritme zijn ook vaak in het voordeel van jou als gebruiker, en betekenen lang niet altijd dat je ranking erop achteruit zal gaan. Dit jaar staan de Core Web Vitals op de planning als grote toevoeging aan het rankingsysteem. Wat het is, hoe het werkt en hoe je het in jouw voordeel kunt gebruiken, bespreken we hier.

De gezondheid van je website als SEO-pluspunt

Core Web Vitals zijn indicatiepunten van jouw website waarmee je vanaf juni bonuspunten kunt verdienen in de ranking. De laadtijd van je pagina’s, responsiviteit van je website en visuele stabiliteit van de pagina-inhoud gaan strenger meetellen in de beoordeling van jouw website. Met andere woorden: de kwaliteit en bruikbaarheid van je website worden belangrijke factoren in je ranking.

De zoekgigant hield al rekening met gebruiksvriendelijkheid voor mobiele browsers, Google Safe Browsing, gebruik van HTTPS en het niet gebruiken van ‘intrusive interstitials’, oftewel pop-ups. Maar vooral de Core Web Vitals verdienen vanaf nu dus wat meer je aandacht, want vanaf juni 2021 zullen ze worden meegeteld in het rankingalgoritme van Google. Deze Core Web Vitals krijgen elk een score van ‘poor’ naar ‘needs improvement’ naar ‘good’ en zijn afhankelijk van een aantal punten, maar wees niet bang: omdat ze vooral UX-gerelateerde punten meten, kun je je score meestal snel verbeteren.

In Google’s Search Console kun je deze metrics al bekijken. Ook worden ze al weergegeven in Lighthouse als onderdeel van de Chrome DevTools. Met die tool kun je de score van een website bekijken op het gebied van First Contentful Paint, Largest Contentful Paint, Time to Interactive, Total Blocking Time, Speed Index en Cumulative Layout Shift. Hieronder gaan we dieper in op de nieuwe Core Web Vitals en bekijken we wat ze precies inhouden.

Largest Contentful Paint (LCP)

LCP of Largest Contentful Paint meet hoelang het duurt voor het grootste element op een pagina is geladen. Dit kan een afbeelding of video zijn, maar ook een tekstblok of in het geval van een webshop, de afbeelding van een product op een productpagina. Een bezoeker van je website moet dus binnen een bepaalde tijd je voornaamste content op hun scherm te zien krijgen. Een LCP-score is goed als dit grootste element binnen 2.5 seconden geladen is. Duurt het langer dan 2.5 seconden, dan valt het onder het kopje ‘heeft verbetering nodig’. Een slechte score is een laadtijd van langer dan 4 seconden. LCP is vaak sterk gerelateerd aan de First Contentful Paint, die kort gezegd meet hoelang het duurt voordat de eerste tekst of afbeelding getoond wordt op een leeg scherm.

Het bepalen van welk element wordt gezien als het grootste op je pagina wordt beïnvloed door bijvoorbeeld hoe schaalbaar je pagina’s zijn. Elementen die slecht schalen en daardoor worden afgesneden op kleinere beeldschermen, of slecht meekrimpen als je een pagina bekijkt op een mobiele browser, tellen alleen mee met het deel van het element dat daadwerkelijk getoond wordt. Hierom is het dus belangrijk jouw website goed schaalbaar te maken en houden.

Je Largest Contentful Paint-score kan invloed hebben op de bruikbaarheid van je website, vooral als jouw grootste element iets is waar de bezoeker daarna interactie mee moet of wil hebben, zoals een banner waar ze op kunnen klikken, of afbeeldingen waar ze doorheen willen scrollen.

First Input Delay (FID)

De tijd tussen de eerste actie van een gebruiker op je website en de eerste mogelijkheid dat je website op die actie kan reageren, wordt First Input Delay of FID genoemd. Dit is een ijkpunt die vooral belangrijk is voor het krijgen en behouden van gebruikers, want een trage of niet-reagerende website kan zeer frustrerend zijn. Wanneer een pagina binnen 100 milliseconden bruikbaar is, wordt het als ‘goed’ beschouwd. Langer dan 300 milliseconden is een slechte waardering.

First Input Delay kan worden veroorzaakt door scripts of code die op de achtergrond geladen worden op je website, waardoor je browser druk kan zijn met het afronden van die handelingen en nog geen mogelijkheid heeft om te reageren op input van de gebruiker. Onder deze input worden acties gerekend als klikken of tappen, of het indrukken van een toets op je toetsenbord. De FID kan de ene keer heel kort, en de andere keer veel langer zijn; als een gebruiker net tussen twee handelingen in op een knop drukt of iets aanklikt kan het zomaar zijn dat de pagina heel snel reageert. Maar is de pagina net bezig met het afronden van een actie, wordt de klik van de gebruiker achteraan in de rij gezet en moet het op zijn beurt wachten.

Het zal je wellicht opvallen dat er geen FID-score wordt toegekend in de Lighthousetool. Hier wordt wel gekeken naar de Time To Interactive-score, of TTI. First Input Delay kan namelijk eigenlijk alleen gemeten worden als er een interactie wordt gedaan met je pagina. Daarom kijkt Lighthouse wel naar de Total Blocking Time op je pagina. Deze metric telt de tijd op tussen de First Contentful Paint- en de Time to Interactive-scores.

Cumulative Layout Shift (CLS)

Cumulative Layout Shift gebeurt als na het laden van een pagina ineens de content verschuift door een element dat vertraagd laadt, zoals een advertentie, een pop-up of een knop. Dit kan direct invloed hebben op de gebruiksvriendelijkheid van je website: het kan irritatie oproepen bij je gebruiker, of in extreme gevallen ongewenste acties op je pagina’s veroorzaken doordat gebruikers onbedoeld op elementen klikken.

De CLS wordt berekend op basis van een Layout Shift Score, die rekening houdt met het totale schermoppervlak dat in beslag wordt genomen door het verschuivende element, en hoever de afstand is die het element verschoven is. Hoe hoger de score, hoe slechter de beoordeling. Niet alle lay-outshifts worden als slecht gezien: gebruikersinput die directe invloed heeft op de weergave (denk bijvoorbeeld aan een venster dat uitklapt na een klik, of een zoekbalk die groter wordt wanneer hij in gebruik is) wordt niet meegeteld.

Zelf aan de slag

De Core Web Vitals versterken de drang naar meer gebruiksvriendelijke websites, wat eigenlijk heel goed uitkomt. Er is een toenemend gebruik van CMS’en, plug-ins en andere kant-en-klare oplossingen om snel en makkelijk een site online te krijgen. En hoewel het voor ondernemers natuurlijk heel fijn is om zo’n kant-en-klare omgeving in een mum van tijd neer te kunnen zetten, betekent het ook dat we misschien genoegen moeten nemen met bepaalde trends die niet ideaal zijn vanuit een bezoekersperspectief. Denk bijvoorbeeld aan pop-ups of grote banners die standaard in een plug-in of CMS zitten, die je pagina langzamer of minder gebruiksvriendelijk maken. Daarnaast hebben deze standaardoplossingen vaak helaas veel bloat, bijvoorbeeld in de vorm van scripts die geladen moeten worden voor de pagina bruikbaar is.

De Core Web Vitals geven je goed inzicht in welke elementen het waard zijn om te behouden, en welke elementen misschien aangepast moeten worden. Google heeft inmiddels deze Core Web Vitals al aan een aantal tools toegevoegd. Voor snel inzicht in je scores is de Lighthouse-app in de Chrome Dev Tools waarschijnlijk de handigste. Deze tool scant namelijk elke pagina die je wilt en geeft een score met toelichting. Voor een meer diepgaande check kun je PageSpeed Insights proberen, die meteen handige aanbevelingen geeft over verbeterpunten. Andere tools die je kunnen helpen zijn de Chrome UX Report-API, Chrome DevTools en de Web Vitals Chrome-extension. Google stelt zelfs een workflow voor waarbij je een aantal van deze tools gebruikt om tot het beste resultaat te komen.

Aan jou de keuze

Het is goed dat Google irritaties als lange laadtijden en verschuivende elementen aan wil pakken en website-eigenaren bewust wil maken van hoe ze hun websites kunnen verbeteren. Aan de andere kant is het wellicht goed om te onthouden dat de score die je gegeven wordt, gegeven wordt door Google. Hun monopoliepositie binnen de zoekmachinemarkt geeft ze de mogelijkheid op te leggen wat websites wel of niet zouden moeten doen. Het is aan jou om te beslissen of je je hierdoor wilt laten leiden in het plannen en invullen van je website.