Core Web Vitals zijn een set specifieke gebruikerservaringsgegevens die meten hoe snel en stabiel een webpagina is voor bezoekers. Deze metrieken richten zich op het laden van content, de interactiviteit van de pagina en de visuele stabiliteit tijdens het renderen.
Technische werking
- De browser begint met het downloaden van de HTML-broncode vanaf de server.
- Zodra de browser de code ontvangt, begint het renderen van de DOM (Document Object Model) en CSSOM (CSS Object Model).
- Tijdens dit proces meet de browser wanneer het eerste element zichtbaar is en wanneer het grootste visuele element volledig is geladen.
- Terwijl de pagina laadt, monitort de browser of elementen van positie verschuiven door het inladen van andere assets.
- Wanneer een gebruiker op een element klikt of typt, meet de browser de tijd die verstrijkt voordat de interface daadwerkelijk reageert.
- Deze gegevens worden verzameld als field data op basis van echte gebruikerservaringen.
Belangrijke begrippen
Largest Contentful Paint (LCP)
Dit meet de tijd die nodig is om het grootste zichtbare element op het scherm, zoals een grote afbeelding of een tekstblok, volledig te renderen. Een lage LCP-waarde betekent dat de gebruiker snel ziet waar de pagina over gaat.
Interaction to Next Paint (INP)
Dit meet de reactiesnelheid van een pagina door de vertraging tussen een gebruikersinteractie (zoals een klik) en de volgende visuele update op het scherm te bepalen. Dit vervangt de oudere First Input Delay (FID) omdat het alle interacties meet, niet alleen de eerste.
Cumulative Layout Shift (CLS)
Dit is een score die de visuele stabiliteit meet. Het berekent hoeveel onverwacht elementen verschuiven terwijl de pagina laadt, wat kan leiden tot foutieve klikken door de gebruiker.
First Contentful Paint (FCP)
Dit is het moment waarop het allereerste element (zoals een logo of achtergrondkleur) zichtbaar wordt voor de gebruiker. Hoewel dit geen onderdeel is van de drie hoofdmetrieken, is het een belangrijke indicator voor de totale laadsnelheid.
Time to First Byte (TTFB)
Dit is de tijd die verstrijkt tussen het verzenden van het HTTP-verzoek door de browser en het ontvangen van het eerste byte aan data van de server. Een hoge TTFB vertraagt de FCP en LCP.
Total Blocking Time (TBT)
Dit meet de tijd waarin de hoofdthread van de browser geblokkeerd is door zware JavaScript-processen, waardoor de pagina niet reageert op input van de gebruiker.
Field data versus Lab data
Lab data zijn metingen in een gecontroleerde omgeving (zoals Google Lighthouse). Field data zijn echte gebruikersgegevens verzameld via Real User Monitoring, wat een accurater beeld geeft van de ervaring op diverse mobiele apparaten en netwerken.
Praktijkvoorbeeld
Een webshop op example.nl heeft een grote productafbeelding bovenaan de pagina en een advertentieblok dat pas na twee seconden verschijnt. Wanneer een bezoeker de pagina opent, ziet hij eerst de tekst en afbeeldingen (LCP). Echter, zodra de advertentie inlaadt, wordt de hele productbeschrijving plotseling naar beneden geduwd. De bezoeker wil op een knop klikken, maar klikt per ongeluk op de advertentie omdat de layout verschoof. Dit resulteert in een slechte CLS-score.
Om dit op te lossen, geeft de ontwikkelaar vaste afmetingen mee aan het advertentieblok in de HTML. Hierdoor reserveert de browser direct de juiste ruimte, zelfs voordat de advertentie is geladen.
<div class="ad-container" style="width: 300px; height: 250px;">
<!-- Advertentie wordt hier geladen zonder de layout te verschuiven -->
</div>
Veelgemaakte fouten en valkuilen
- Het negeren van afbeeldingen zonder afmetingen: Wanneer breedte en hoogte niet in de HTML zijn gedefinieerd, moet de browser de layout herberekenen zodra de afbeelding is gedownload. Dit veroorzaakt een hoge CLS-score.
- Te veel zware JavaScript-bundels: Het laden van grote scripts in de head van het document blokkeert de rendering van de pagina. Dit verhoogt de TBT en verslechtert de INP, omdat de browser geen tijd heeft om op gebruikersinput te reageren.
- Onjuist gebruik van lazy loading: Het toepassen van lazy loading op de LCP-afbeelding (de belangrijkste afbeelding bovenaan) vertraagt het laden van de LCP-elementen. Dit verhoogt de LCP-waarde negatief.
- Te grote afbeeldingen uploaden: Het gebruiken van ongecomprimeerde bestanden zorgt voor een langere downloadtijd. Hierdoor duurt het langer voordat het grootste element op het scherm verschijnt, wat de LCP verslechtert.
- Vertrouwen op alleen Lab data: Een pagina kan in een snelle testomgeving perfect scoren, maar op mobiele apparaten met een trage 4G-verbinding slecht presteren. Alleen kijken naar synthetische tests geeft een onvolledig beeld van de werkelijke gebruikerservaring.
Toepassing
Gebruik deze metrieken wanneer je de conversie van een website wilt verhogen, aangezien een trage of instabiele site nadelig kan zijn voor de gebruikerservaring. Dit is belangrijk voor sites met veel verkeer vanaf mobiele apparaten, omdat de hardware en netwerkverbindingen daar vaker variëren.
Kijk minder naar deze scores bij interne applicaties of dashboards waar gebruikers een vaste, snelle verbinding hebben en waar de visuele layout statisch is. In dergelijke omgevingen weegt de functionele complexiteit zwaarder dan de exacte laadtijd van het grootste element.
Controle en analyse
- Open Google Search Console en ga naar het menu ‘Core Web Vitals’ om te zien welke pagina’s op je domein als ‘Slecht’ of ‘Verbeterbaar’ worden aangemerkt.
- Gebruik Google PageSpeed Insights om specifieke URL’s te analyseren; hier zie je zowel de field data (CrUX) als de lab data.
- Open Chrome DevTools en navigeer naar het ‘Lighthouse’ tabblad voor een lokale analyse van de rendering-volgorde.
- Gebruik het ‘Performance’ tabblad in Chrome DevTools om Layout Shifts te lokaliseren door de optie ‘Experience’ aan te vinken tijdens het opnemen van een pagina-laadbeurt.
- Controleer met een tool als Screaming Frog of alle afbeeldingen op de site voorzien zijn van breedte- en hoogte-attributen om CLS te minimaliseren.
- Monitor de INP door interactieve elementen op de pagina handmatig te testen terwijl de CPU-snelheid in DevTools wordt beperkt (CPU throttling).
Zet de belangrijkste afbeelding bovenaan de pagina op fetchpriority="high" om de LCP-tijd direct te verkorten.
