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

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
• 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
• Reserveer ruimte voor advertentie ruimtes
• Laad geen nieuwe content in boven bestaande content
• Preload fonts

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

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
SEO-checklist