Core Web Vitals zijn niet alleen iets voor techneuten. Sinds 2024 gebruikt Google ze als reëel rankingsignaal op commerciële zoekopdrachten, en de impact op de conversie is meetbaar: een site die van 4 seconden naar 2 seconden LCP gaat, wint doorgaans 10 tot 25% mobiele conversie. Deze gids legt de drie huidige metrics precies uit, hoe u ze meet en hoe u ze optimaliseert op PrestaShop en WordPress in 2026.
De drie Core Web Vitals die u moet kennen
LCP: Largest Contentful Paint
De LCP meet de tijd tussen het begin van het laden van de pagina en het verschijnen van het grootste zichtbare element in het venster. Op een webshop is dat element bijna altijd een afbeelding: de hoofdfoto van het product op een productpagina, de hero van de homepage, de bannerafbeelding van de categorie.
Officiële Google-doelen:
- Goed: minder dan 2,5 seconden
- Verbetering nodig: tussen 2,5 en 4 seconden
- Slecht: meer dan 4 seconden
CLS: Cumulative Layout Shift
De CLS meet de visuele stabiliteit van de pagina tijdens het laden. Concreet: een knop die verschuift nadat de gebruiker begon te klikken, een afbeelding die de content naar beneden duwt door laat te arriveren, een cookiebanner die alles verschuift. Hoe lager de score, hoe beter.
- Goed: minder dan 0,1
- Verbetering nodig: tussen 0,1 en 0,25
- Slecht: meer dan 0,25
INP: Interaction to Next Paint
De INP verving de FID (First Input Delay) in maart 2024. Hij meet de vertraging tussen de interactie van de gebruiker (klik, tap, toetsaanslag) en de zichtbare reactie van de browser, over alle interacties van de sessie, niet alleen de eerste.
- Goed: minder dan 200 ms
- Verbetering nodig: tussen 200 en 500 ms
- Slecht: meer dan 500 ms
De INP is veeleisender dan de FID omdat hij alle interacties meetelt, niet alleen de eerste. Sites die de FID nog nipt haalden, zakken vaak voor de INP, vooral WooCommerce met zijn variatiescripts en AJAX-toevoegingen aan de winkelwagen.
Hoe u uw Core Web Vitals meet
Vier complementaire tools:
- PageSpeed Insights (gratis, van Google): geeft een samenvattende score met specifieke aanbevelingen. Maakt onderscheid tussen “lab”-data (gesimuleerde test) en “field”-data (echte data, op basis van het Chrome User Experience Report)
- Lighthouse (ingebouwd in Chrome DevTools): volledige lokale audit, nuttig om knelpunten te identificeren
- Google Search Console → Ervaring → Core Web Vitals: geaggregeerd beeld van uw site op basis van echte data van Chrome-gebruikers
- WebPageTest: gedetailleerde test met waterfall en keuze van de verbinding
Belangrijk: de “lab”-data van een losse test weerspiegelen niet wat uw gebruikers ervaren. De “field”-data in Search Console zijn representatiever. Die tellen voor Google.
De LCP optimaliseren
Het LCP-element identificeren
In Lighthouse geeft de sectie Largest Contentful Paint element precies aan welk element van uw pagina de LCP is. Op een PrestaShop- of WooCommerce-productpagina is dat bijna altijd de hoofdfoto.
Afbeeldingen optimaliseren
Drie essentiële acties:
- Converteren naar WebP of AVIF: verkleint de bestandsgrootte met 30 tot 60% zonder zichtbaar verlies. Op PrestaShop verzorgen dedicated modules de automatische conversie. Op WordPress plugins zoals ShortPixel, Imagify of Smush.
- De juiste afmetingen serveren: stuur geen afbeelding van 2000 × 2000 voor een vak van 400 × 400. Gebruik
srcsetensizesom per viewport de passende afbeelding te serveren. - De LCP-afbeelding preloaden: voeg
<link rel="preload" as="image">toe in de<head>voor de hoofdafbeelding. De browser downloadt haar dan met absolute prioriteit.
Een HTTP-cache activeren
Op PrestaShop: Smarty-cache plus full-page cache via een module of een reverse proxy zoals Varnish. Op WordPress: een cacheplugin (LiteSpeed Cache als uw server op LiteSpeed Web Server draait, anders WP Rocket). De LCP-winst met een correct geconfigureerde HTTP-cache is doorgaans 1 tot 2 seconden.
Een CDN gebruiken
Cloudflare, BunnyCDN of een CDN geïntegreerd bij uw hoster. Voor uw afbeeldingen, video’s en statische assets. Verlaagt de LCP voor gebruikers die geografisch ver van uw server zitten.
De CLS optimaliseren
De CLS is vaak het eenvoudigst te corrigeren. Drie hoofdacties:
Altijd width en height opgeven bij afbeeldingen
De browser moet de ruimte van de afbeelding kunnen reserveren voordat ze geladen is. Zonder afmetingen is de gereserveerde ruimte nul en verschuift de content eronder zodra de afbeelding arriveert.
<img src="product.webp" width="800" height="600" alt="..." />De verhouding van de afmetingen is wat telt. De browser gebruikt CSS om aan te passen aan de werkelijke weergavegrootte, maar reserveert ruimte in de juiste ratio.
Ruimte reserveren voor banners en popups
Cookiebanners, nieuwsbriefpopups en urgentiebanners bovenaan de pagina veroorzaken CLS als ze na het laden worden geïnjecteerd. Oplossingen: ze server-side renderen (HTML al aanwezig bij het laden, alleen zichtbaar gemaakt via CSS), of de hoogte vanaf het begin in CSS reserveren.
Webfonts correct laden
FOUT (Flash of Unstyled Text) en FOIT (Flash of Invisible Text) veroorzaken CLS wanneer het vervangende en het definitieve lettertype verschillende afmetingen hebben. Oplossingen: font-display: swap met een goed gekozen fallback (vergelijkbare grootte), preloaden van kritieke lettertypes met <link rel="preload">, of font-size-adjust gebruiken om de metrieken uit te lijnen.
De INP optimaliseren
De INP is de moeilijkste van de drie. Hij hangt af van de kwaliteit van de JavaScript die wordt uitgevoerd wanneer de gebruiker met de pagina interageert.
Blokkerende JavaScript verminderen
Audit uw scripts van derden: analytics, chat, A/B-tests, retargeting, popups. Elk voegt uitvoeringstijd toe op de main thread. Wees genadeloos: genereert een script geen meetbare omzet, verwijder het dan.
Voor de scripts die blijven: laad ze met defer of async waar mogelijk. Trackingtags kunnen vrijwel altijd uitgesteld worden.
JavaScript opdelen in stukken
Op sites met veel JS verlaagt code splitting (alleen de code laden die de huidige pagina nodig heeft) de INP. Op PrestaShop 8 met zijn bundles is dat beperkt; op WordPress met zware plugins is het vaak een grote optimalisatie.
Interacties optimaliseren
Veelvoorkomende interacties die de INP ondermijnen:
- Toevoegen aan de winkelwagen (vooral op WooCommerce)
- Toepassen van een productvariatie
- Zoeken in een megamenu met autocomplete
- Toepassen van een filter in een productoverzicht
Voor elk loopt de optimalisatie via profiling in Chrome (Performance-tab) om de trage functies te identificeren, gevolgd door refactoring.
Specifiek voor PrestaShop
Op PrestaShop zijn de meest lonende acties:
- De Smarty-cache en het combineren/minificeren van assets activeren in Geavanceerde instellingen → Prestaties
- Smarty-templates compileren en hercompilatie bij elk bezoek uitschakelen
- Een module voor kritieke CSS-generatie gebruiken voor het above-the-fold gedeelte
- Modules van derden auditen: één slecht gecodeerde module kan 500 ms servertijd toevoegen
Specifiek voor WordPress / WooCommerce
Op WordPress zijn de hoofdacties:
- Cacheplugin verplicht (LiteSpeed Cache, WP Rocket, W3 Total Cache)
- Plugins auditen: ongebruikte deactiveren en verwijderen
- Afbeeldingen massaal converteren naar WebP via ShortPixel of een equivalent
- WooCommerce-scripts beperken op pagina’s waar ze nutteloos zijn (homepage, blogartikelen): een plugin zoals Asset CleanUp maakt dat mogelijk
- Een serieuze hoster: op goedkope shared hosting komt u nooit boven een mobiele Lighthouse-score van 50
Veelgemaakte fouten
- Alleen de desktop Lighthouse-score optimaliseren. Mobiel is wat telt voor Google.
- Field-data negeren ten gunste van lab-data
- 5 cacheplugins installeren “voor de zekerheid”: ze zitten elkaar in de weg en het resultaat is slechter
- Afbeeldingen doodcomprimeren tot ze lelijk worden: mik op 75-85% kwaliteit, niet lager
- Essentiële JavaScript blokkeren uit overdreven ijver (de winkelwagenknop werkt niet meer)
Verder gaan
Al onze prestatie-artikelen staan in de categorie Prestaties & Core Web Vitals. Voor de technische oplossingen: verken onze SEO-modules voor PrestaShop, die Core Web Vitals optimalisaties bevatten (kritieke CSS-generatie, geavanceerde lazy loading, WebP-conversie). Een snelle shop is een shop die converteert: waarschijnlijk de beste technische investering van 2026.
Lees ook: de technische checklist LCP, INP, CLS, cache, Critical CSS en next-gen afbeeldingen en productvideo’s en Core Web Vitals.
Om in actie te komen: onze modulesselecties om uw shop te versnellen op PrestaShop en op WooCommerce.
