Core Web Vitals zijn de drie signalen waarmee Google de gebruikerservaring van je webshop meet: LCP (laden), INP (reageren) en CLS (stabiliteit). Groen betekent: LCP onder de 2,5 seconde, INP onder de 200 milliseconden en CLS onder de 0,1, gemeten bij je echte bezoekers. Dit artikel legt per signaal uit wat webshops de score kost, en hoe je hem terugwint.
Waarom deze drie getallen ertoe doen
Sinds 2021 gebruikt Google de Core Web Vitals als onderdeel van de ranking, maar belangrijker: ze meten precies de momenten waarop een bezoeker afhaakt. Een productpagina die traag opbouwt, een filterknop die niet reageert, een koopknop die wegschuift onder een binnenschuivende banner: dat zijn geen abstracte scores maar gemiste bestellingen. En de metingen komen niet uit een testtool maar van échte Chrome-gebruikers in jouw shop; wat je in Search Console ziet, hebben je bezoekers dus daadwerkelijk meegemaakt. De basisuitleg van sitespeed en het 75e percentiel staat in ons artikel over website performance; hieronder duiken we per metric de webshop-praktijk in.
Wat is "groen"? De drempels
| Metric | Groen | Verbetering nodig | Slecht |
|---|---|---|---|
| LCP (laden) | onder 2,5 s | 2,5 tot 4 s | boven 4 s |
| INP (reageren) | onder 200 ms | 200 tot 500 ms | boven 500 ms |
| CLS (stabiliteit) | onder 0,1 | 0,1 tot 0,25 | boven 0,25 |
Let op de middencategorie: veel webshops zitten niet in het rood maar in het oranje, en juist daar is de winst het snelst te pakken. Eén metric van oranje naar groen tillen is meestal een kwestie van dagen, geen maanden.
LCP: het laadmoment dat telt
LCP (Largest Contentful Paint) meet wanneer het grootste element in beeld staat, en in een webshop is dat vrijwel altijd een afbeelding: het herobeeld op de homepage of de productfoto op de productpagina. Dit verpest de LCP in de praktijk:
Een te zwaar hoofdbeeld, geüpload op volle resolutie en niet op maat geserveerd.
Een slider of video als opening: de browser moet meerdere zware bronnen laden voor er íets definitiefs staat.
Lazy loading op precies het verkeerde beeld. Het hoofdbeeld moet met voorrang laden; staat het op lazy, dan wacht je bezoeker onnodig.
Scripts die vóór het beeld dringen: elke app en pixel die eerst laadt, schuift je productfoto naar achteren.
De fix in het kort: één sterk, licht hoofdbeeld met voorrang, en de rest van de pagina daarna. Draai je op Shopify, dan staan de concrete stappen in Shopify sneller maken: 9 fixes. De boosdoener opsporen is overigens geen giswerk: PageSpeed Insights benoemt in de diagnose letterlijk wélk element je LCP is. Staat daar een ander element dan je hoofdbeeld (een laat ladende banner, een tekstblok dat op een webfont wacht), dan weet je meteen waar je moet zijn.
INP: reageert je shop op de klik?
INP (Interaction to Next Paint) verving in 2024 de oude FID-metric en is strenger: hij meet over álle interacties hoe snel de pagina zichtbaar reageert. Voor webshops is dit de sluipmoordenaar, want de pagina lijkt geladen terwijl klikken nog niets doen. Typische boosdoeners:
Te veel JavaScript van apps en widgets dat de hoofddraad van de browser bezet houdt.
Zware variant-switchers en filters: kies een kleur of maat en de pagina moet eerst rekenen voor er iets verandert.
Mega-menu's en zoek-overlays die bij de eerste klik nog opgebouwd moeten worden.
De fix begint vrijwel altijd bij opruimen: minder scripts, lichtere widgets, en zware onderdelen pas laden wanneer ze nodig zijn. Precies de app- en scriptfixes uit het sneller-maken-artikel. Opsporen doe je in het lab via de Total Blocking Time: die telt de momenten waarop scripts de browser blokkeren en wijst per script aan wie de grootste blokkeerder is. Grote uitschieters daar voorspellen vrijwel altijd een slechte INP in het veld.
CLS: de verspringende pagina
CLS (Cumulative Layout Shift) meet hoeveel de pagina verschuift tijdens het laden. Iedereen kent het moment: je wilt op "in winkelwagen" tikken en raakt een banner die er net tussen schoof. Webshop-klassiekers:
Beelden zonder gereserveerde ruimte, waardoor de tekst opschuift zodra de foto binnenkomt.
USP-balken, kortingsbanners en cookiemeldingen die de pagina omlaag duwen in plaats van in een vaste ruimte te verschijnen.
Laat ladende reviewsterren en badges boven de vouw die de prijs en koopknop verplaatsen.
Webfonts die wisselen nadat de tekst al stond, waardoor regels verspringen.
De fix is conceptueel simpel: reserveer voor élk element dat later binnenkomt alvast de ruimte. Afmetingen op beelden, een vaste hoogte voor banners en badges, en fonts die tonen zonder herindeling. Ook hier hoef je niet te raden: PageSpeed Insights toont onder "vermijd grote lay-outverschuivingen" precies welke elementen verschoven en hoeveel, gesorteerd op impact.
De praktijk per paginatype
Elke pagina in je webshop heeft zijn eigen typische zwakte, en dat maakt het werk overzichtelijk:
Homepage: vrijwel altijd een LCP-verhaal. De hero, de slider of de campagnevideo bepaalt de score van je duurste pagina.
Collectiepagina's: het INP- en CLS-territorium. Filters, sorteren en eindeloos scrollen zijn interactie-zwaar, en laat ladende productbadges duwen het grid heen en weer.
Productpagina's: de mediagalerij drukt op LCP, en reviewsterren of upsell-widgets die boven de vouw binnenvallen drukken op CLS. Omdat één template honderden URL's aanstuurt, is dit meestal de plek waar één fix het meeste oplevert.
Checkout: die is bij Shopify door het platform zelf geoptimaliseerd en grotendeels afgeschermd; verwacht daar zelden een probleem, en richt je energie op de pagina's ervóór.
Zo meet je je Core Web Vitals
Begin in Search Console: het Core Web Vitals-rapport groepeert je URL's per probleem en per metric, op basis van echte bezoekers. Gebruik daarna PageSpeed Insights per URL om de oorzaak te vinden. En meet als webshop per paginatype: je homepage, collectiepagina's, productpagina's en blog hebben elk hun eigen template en dus hun eigen score. Eén trage sectie in het producttemplate raakt in één klap honderden URL's; dat is slecht nieuws én goed nieuws, want één fix repareert ze ook allemaal tegelijk. En kijk altijd naar de mobiele cijfers eerst: daar zit het merendeel van je bezoekers, op tragere hardware en wisselende netwerken, en daar staat of valt je score.
Twee dingen om te onthouden bij het meten: de veldcijfers zijn een voortschrijdend venster van 28 dagen, dus een fix wordt pas na weken volledig zichtbaar, en de labscore van een testtool kan afwijken van wat echte bezoekers meemaken. Stuur op het veld, gebruik het lab om te zoeken.
De valkuil: optimaliseren voor de test
Er bestaat een verleiding om voor de meting te bouwen in plaats van voor de bezoeker: content uitstellen tot na het meetmoment, placeholders tonen die nét meetellen, scripts verstoppen. Sinds de Core Web Vitals uit veldsignalen komen is dat zinloos: de score ís de ervaring van je echte bezoekers, over 28 dagen gemeten. Wie de test probeert te slim af te zijn, houdt een trage shop met een gaaf rapport. De enige route naar blijvend groen is de saaie: minder laden, ruimte reserveren, en elke nieuwe app wegen op wat hij kost.
Groen worden: de volgorde die werkt
Kies per paginatype de slechtste metric en werk die eerst af: LCP-problemen zitten vrijwel altijd in beelden, INP-problemen in scripts en apps, CLS-problemen in gereserveerde ruimte. Voer één fix tegelijk door en meet ertussen. De volledige werkvolgorde, van beelden tot server, staat in onze gids website snelheid verbeteren. Wil je weten waar jouw webshop nu staat, inclusief de vertaling naar concrete knelpunten? Doe de gratis webshop-analyse: je krijgt de drie metrics en de grootste boosdoeners direct terug. Komt er structureel werk uit, dan pakken wij het op; snelheid is bij ons een opleveringseis, geen optie. Plan een vrijblijvende call en we lopen je rapport samen door.
