Web vitals

Home   »   Web vitals

Web vitals

Google heeft een nieuw paradepaardje, genaamd “Web Vitals”. Web Vitals zijn key performance indicatoren die de gebruiksvriendelijkheid van je website inzichtelijk maakt voor Google. In deze blog leg ik je uit wat de Web Vitals zijn en hoe je een audit kan doen voor jouw website.

Wat zijn Web Vitals?

De Core Web Vitals bestaan uit 3 performance indicatoren:
1. Largest Contentful Paint (LCP)
Google kijkt bij deze KPI naar de laadtijd van het grootste element, zoals een afbeelding of tekst box boven “the fold”.
2. First Input Delay (FID)
Google kijkt naar het moment waarop er voor het eerst interactie mogelijk is(voordat de pagina volledig geladen is).

Largest contentful paint en first input delay

3. Cumulative Layout Shift (CLS) 
Een calculatie gebaseerd op het aantal frames waarin elementen visueel bewegen en de totale afstand in pixels die hierin is afgelegd.

cumulative layout shift

Naast deze primaire performance indicatoren, zijn er ook secundaire metrics. Deze metrics dekken een groter deel van je website ervaring en helpen ter ondersteuning van je Core Web Vital metrics:

1. Time To Frist Byte (TTFB) en First Contentful Paint (FCP) – Helpen ter ondersteuning van je LCP
2. Total Blocking Time (TBT) en Time To Interactive (TTI) – Helpen ter ondersteuning van je interactiviteit (FID)

Waar moet je aan voldoen?

Een laadtijd van 0,01 seconden zou mijn antwoord zijn.. Dat is helaas niet realistisch. Neem de KPI: LCP als voorbeeld. 0 seconden, is niet haalbaar omdat de uiteindelijke laadtijd ook afhankelijk is van externe factoren zoals je netwerkverbinding en de rekenkracht van je mobiel of desktop. Google kwam met een slimme oplossing: De Chrome User Experience Report. Dit rapport bevat UX data van Chrome gebruikers op populaire websites. Op basis van deze data, hebben ze voor elke “Core Web Vital” de classificaties: goed, gemiddeld of slecht aan de hand van het 3e kwartiel (Q3) als volgt gedefinieerd:

lcp_fid_cls

Let op: Zorg ervoor dat je CWV niet ten koste gaan van de UX van je website.

Hoe beoordeel je jouw Web Vitals (“at scale”)

1. Crawl je website met Screaming Frog gekoppeld aan de Pagespeed Insights API
Vink bij zowel de Lighthouse metrics als de CrUX metrics de Web Vitals aan.

Let op:  Web Vitals gaan alleen een rol spelen in de rankings op mobiel, zorg dat je de instellingen in Screaming frog hierop instelt.

screamingfrog_webvitals

2. Exporteer de resultaten naar Google Sheets 3. Bereken per type pagina het gemiddelde per Core Web Vital.

Je kan dit eenvoudig doen door een =ArrayFormula() te combineren met een Regexmatch. Gebruik hiervoor de volgende formule:

=ArrayFormula(
     averageif(
        regexmatch(A2:A,"/blog"),
        TRUE,
        B2:B
     )
)

4. Herhaal stap 3 voor je CrUX data. Zo ontdek je op een eenvoudige manier of jouw resultaten ook overeenkomen met “Real User Metrics”.

Let op: Zie je deze niet naar voren komen? Controleer dan of je in Screaming Frog het configuratiescherm met de juiste KPI’s hebt geconfigureerd. Klopt dit en zie je nog steeds niks? Dan heeft Google helaas geen CrUX data van jouw website (dit is vaak bij kleine websites het geval). In dat geval, kan je er ook voor kiezen om op je eigen website “Real User Metrics” van je bezoekers te gaan meten.

api settings screamingfrog

5. Maak een benchmark. Nu je een duidelijk beeld hebt van jouw eigen performance, is het belangrijk om te kijken hoe je concurrenten het doen. Op die manier kan je een juiste prioritering bepalen ten opzichte van je overige SEO verbeteringen.

Largest Contentful Paint verbeteren

Bij de Largest Contentful Paint (LCP), is het van belang dat 75% van de geladen pagina’s sneller laad dan 2.5 seconden. Wordt dit niet bereikt, dan kunnen de volgende punten wel eens de oorzaak zijn:

1. Langzame server response tijd

Mogelijke oplossingen:
• Optimaliseer je server
• Maak gebruik van een CDN
• Cache onderdelen van je website

2. Render-blocking javascript of CSS bestanden

Mogelijke oplossingen:
• Verklein CSS bestanden
• Defer niet kritische CSS
• Verklein en comprimeer JavaScript files
• Defer ongebruikte JavaScript
• Minimaliseer ongebruikte Polyfills

3. Laadtijd van bestanden

Mogelijke oplossingen:
• Optimaliseer en comprimeer afbeeldingen (let op: als de LCP een lazy load element “above the fold” is, adviseerd Google om dit attribuut te verwijderen)
• Preload belangrijke bestanden
• Comprimeer tekstbestanden
• Serveer bestanden o.b.v. netwerk connectie
• Cache onderdelen d.m.v. een server worker

4 Veel bestanden worden cient-side geladen

Mogelijke oplossingen:
• Minimaliseer kritische JavaScript
• Maak gebruik van server-side rendering
• Maak gebruik van pre-rendering

First Input Delay verbeteren

Bij First Input Delay (FID), wat alleen getest kan worden met “real user metrics”, is het van belang dat niet langer dan 100 milliseconden duurt. Wordt dit niet bereikt, dan wordt dit veroorzaakt door te zware JavaScript bestanden.

Mogelijke oplossingen zijn:
• Splits lange taken op
• Reduceer de executietijd van JavaScript
• Maak gebruik van een web worker

Cumulative layout shift verbeteren

Bij de CLS is het van belang dat 75 procent van de geladen pagina’s een score onder de 0.10 bereikt.

Oorzaken kunnen zijn:
1. Afbeeldingen zonder dimensie
2. Advertenties, embed bestanden en iframse zonder dimensies
3. Dynamisch geïnjecteerde content
4. Webfonts die FOIT of FOUT fouten bevatten
5. Acties die een netwerk response nodig hebben voordat de DOM geladen 
kan worden.

Mogelijke oplossingen:
• Voeg altijd een width en height attribuut toe aan afbeeldingen en video’s (evt. voor afbeeldingen aspect ratio boxes gebruiken)
• Reserveer ruimte voor advertentie ruimtes
• Laad geen nieuwe content in boven bestaande content
• Preload fonts

TIP: Wil je de techniek van je website verder verbeteren voor SEO? Bekijk dan mijn Technische SEO checklist

Interaction to next paint (INP)

Interaction to next paint (hierna INP), is een nieuwe Core Web Vital metric die (zeer waarschijnlijk) toegevoegd wordt aan de page experience signalen van google. Op dit moment is dat nog niet zo (ook niet voor je CRUX data).

INP meet de vertraging die ontstaat bij een gebruikersinteractie. Praktisch voorbeeld: Klikken op een thumbnail om een afbeelding te zien of de kleur die van een Call to action veranderd zodra je een product aan het winkelmandje toevoegt.

Is je INP slecht? Dan ervaart de gebruiker een langzamere respons en dus een slechte gebruikerservaring. Zeker nu steeds meer websites leunen op javascript, wordt deze metric voor Google steeds belangrijker.

Hoe word je INP gemeten?

De duur wordt gemeten vanaf het punt waarop de gebruiker interactie heeft met de pagina tot het volgende frame wordt gepresenteerd. Technisch gezien ziet dat er zo uit (zie afbeelding hieronder).

Interaction to next paint
INP – Interaction to next paint

INP is de som van: input delay, processing time en presentation delay.

  • Input delay is de tijd tussen de interactie van de gebruiker met de pagina en de uitvoering van de “event handlers”
  • Processing time is de totale tijd die nodig is om de code in de event-handlers uit te voeren.
  • Presentation delay is de tijd tussen het einde van de uitvoering van de event-handlers en het moment waarop de browser het volgende frame voorstelt.
INP SEO
Doelstelling INP voor SEO

Voor SEO is het volgende van belang:

  • Je IND mag niet groter zijn dan 500ms.
  • heeft je webpagine minder dan 50 interacties, dan geld de interactie met de grootste vertraging
    Heeft je webpagine meer dan 50 interacties? Dan geld het 98 percentiel.

Goed om te weten: Wil je al experimenteren met IND? Dan is er via de Crux API v.a. april 2022 data beschikbaar.

Web vitals monitoren

Gelukt om je Core Web Vitals te verbeteren? Belangrijk om dan je resultaten te blijven monitoren. Nieuwe ontwikkelingen op je website kunnen er namelijk voor zorgen dat de resultaten van je Web Vitals verslechteren. Mogelijkheden om dit te doen zijn:

1. Je Web Vitals monitoren met een website snelheid monitoring tool.
2. Een dashboard bouwen met CrUX data in Google data studio

Tip: Maak ook een CrUX dashboard van jouw belangrijkste concurrenten.

crux dashboard

FAQ

Hoe kan het dat Google search console geen data vertoont over de Core Web Vitals?

Dat komt omdat je te weinig field data hebt. Dat is data van echte gebruikers vanuit de Google chrome browser. Als je voldoende verkeer hebt, zal dit wel vertoond worden onder de rapportage pagina functionaliteit. Let op: Google loopt een paar dagen achter op de werkelijkheid.

Welke pagina’s tellen niet mee voor de Core web vitals?

Google gebruikt niet de data van pagina’s met een no-index tag en pagina’s die een andere http statuscode uitserveren dan 200 (bron)

Hoe groot is het effect van Core Web Vitals op je rankings in Google

Het heeft geen mega effect. Een medewerker van Google deelde recent “it’s more than a tie-breaker, but it also doesn’t replace relevance” (bron). Veel SEO casussen wijzen dat ook uit. Mijn mening: Core Web Vitals doe je niet alleen voor Google maar ook voor de gebruiker. Zoek de juiste balans tussen kosten/baten en de gebruiksvriendelijkheid.

Krijg je een ranking voordeel als je voor 1 van de CWV slaagt of moet je voor alle drie slagen om beter te scoren?

Je moet voor alle 3 de CWV metrics het 75e percentiel behalen om de status: goed te krijgen en dus een ranking voordeel te behalen (bron)

Telt CRUX data van buitenlandse bezoekers ook voor je rankings in Belgie/Nederland?

Ja. Dus stel je voor dat iemand vanuit India met een slechte internet verbinding op jouw website komt, dan zal de perf. van je website slechter zijn. Dit heeft imapct op je CRUX data en dus op je CWV metrics. Zie ook deze casus.

Over welke tijdsperiode heeft CRUX data impact op je CWV?

De afgelopen 28 dagen.

Hoe lang duurt het voordat Google een verbetering ziet?

Nadat je de fout hebt opgelost, trackt Google je URL(s) 28 dagen. Als de fout dan niet meer voorkomt, beschouwd Google het als opgelost.

SEO-fouten voorkomen?

SEO-checklist
Controleer je optimalisatie-stappen met mijn gratis SEO-checklist. Zo voorkom je fouten in Google en Bing.
Download SEO-checklist
Deze bedrijven gingen je voor:
Logo Action
Logo ANWB
Logo staatsloterij
SEO-checklist
Download SEO-checklist
Deze bedrijven gingen je voor:
Logo Action
Logo ANWB
Logo staatsloterij
SEO Mastermind SEO-vraag? Stel hem hier