Ga naar de hoofdinhoud
Terug naar blog
Technische SEO

Core Web Vitals op productpagina: LCP verlagen

LCP, CLS, INP: de 3 metrics die uw productpagina laten stijgen of dalen. Zo optimaliseert u ze zonder beeldkwaliteit of UX te verliezen.

#core web vitals#performance#lcp#inp#seo
Core Web Vitals op productpagina: LCP verlagen

Core Web Vitals op een productpagina: LCP verlagen zonder afbeeldingen op te offeren

Sinds 2021 gebruikt Google Core Web Vitals als rankingsignaal. In 2026 is het gewicht ervan verder toegenomen, en productpagina's zijn het belangrijkste speelveld: afbeeldingen met hoge resolutie, sliders, knoppen om aan winkelwagen toe te voegen, dynamische reviews — alles wat de performance verslechtert.

Hier leest u hoe u de 3 metrics optimaliseert die tellen (LCP, CLS, INP) op een productpagina zonder visuele kwaliteit of UX te verliezen.

De 3 Core Web Vitals in 2026

LCP (Largest Contentful Paint) — de tijd totdat het grootste zichtbare element (meestal de hoofdafbeelding van het product) wordt weergegeven. Doel: <2,5 s.

CLS (Cumulative Layout Shift) — visuele stabiliteit: elementen mogen niet verspringen tijdens het laden. Doel: <0,1.

INP (Interaction to Next Paint) — sinds maart 2024 vervangt INP FID. Meet de vertraging tussen een gebruikersklik (toevoegen aan winkelwagen, een menu openen) en de visuele reactie. Doel: <200 ms.

Een productpagina die voor alle 3 drempels in het groen zit, heeft een rankingvoordeel ten opzichte van pagina's die dat niet halen. Het verschil kan 3-5 posities bedragen op een competitief keyword.

LCP op de hero-afbeelding: het grote werk

Op 90% van de productpagina's is de LCP de hero-afbeelding (de eerste productafbeelding). Het gewicht en de laadtijd ervan bepalen alles.

Afbeeldingsformaat

  • WebP: 25-35% lichter dan JPEG, in 2026 overal ondersteund. De standaard.
  • AVIF: 40-50% lichter dan JPEG, betere kwaliteit. Ondersteund door Chrome/Firefox/Safari sinds 2022. Gebruik dit waar mogelijk.
  • JPEG: alleen fallback voor zeer oude browsers (<1% van het verkeer in 2026).

Serveer het juiste formaat per browser via <picture>:

<picture>
  <source srcset="/product.avif" type="image/avif" />
  <source srcset="/product.webp" type="image/webp" />
  <img src="/product.jpg" alt="..." />
</picture>

Afmetingen en dichtheid

Een hero-afbeelding die op het scherm op 600×600 pixels wordt weergegeven, mag geen 4000×4000 pixels wegen. Serveer de afbeelding op het juiste formaat + een 2x-versie voor retina-schermen:

<img
  src="/product-600.webp"
  srcset="/product-600.webp 1x, /product-1200.webp 2x"
  width="600"
  height="600"
  alt="..."
/>

Op Shopify regelt de Liquid-syntax img_url: '600x600' dit automatisch. Op WooCommerce via WP Fastest Image Optimizer of Smush.

Slimme lazy-loading

Gebruik geen lazy-loading voor de hero-afbeelding (de eerste zichtbare afbeelding): die moet direct laden. Voeg fetchpriority="high" toe:

<img
  src="/product-hero.webp"
  fetchpriority="high"
  loading="eager"
  alt="..."
/>

Gebruik lazy-loading voor al het overige (secundaire afbeeldingen, reviews met foto's, vergelijkbare producten onderaan de pagina):

<img
  src="/product-thumbnail.webp"
  loading="lazy"
  alt="..."
/>

CDN en cache

Alle productafbeeldingen moeten via een CDN lopen (Cloudflare, Fastly, Bunny). Typische winst op LCP: 30-50% in Europa, 50-70% buiten Europa.

Shopify heeft een eigen CDN (Fastly). WooCommerce vereist een expliciete configuratie.

CLS: oorzaken en oplossingen

CLS op een productpagina komt vooral door:

Afbeeldingen zonder afmetingen

<!-- ❌ Oorzaak van CLS -->
<img src="/product.webp" alt="..." />

<!-- ✅ Reserveert ruimte -->
<img src="/product.webp" width="600" height="600" alt="..." />

Zelfs bij een responsive afbeelding (CSS die de width/height overschrijft) moet u de HTML-attributen opgeven — die dienen als hint om ruimte te reserveren vóór het laden.

Meldingen of banners die laat verschijnen

Een banner "Gratis verzending vanaf € 50" die 500 ms na het laden verschijnt en alle content naar beneden duwt = rampzalige CLS.

Oplossing: reserveer de ruimte in de initiële HTML met min-height, en vul de content daarna in.

Webfonts die de tekstgrootte veranderen

Als u een custom font laadt, komt dat met vertraging binnen. Intussen wordt de tekst weergegeven in een fallback-font met andere metrics. Zodra het definitieve font arriveert, verschuift alles.

Oplossing: font-display: optional of font-display: swap met passende size-adjust:

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter.woff2') format('woff2');
  font-display: swap;
  size-adjust: 100%; /* Match fallback metrics */
}

Carrousel / slider met productafbeeldingen

Sliders zijn een veelvoorkomende oorzaak van CLS als ze slecht zijn geïmplementeerd. Regels:

  • Zet een vaste hoogte op de slidercontainer (height: 600px bijvoorbeeld)
  • Geen JS-paginering die de hoogte verandert bij een klik
  • Thumbnails hebben opgegeven afmetingen

INP: toevoegen aan winkelwagen en andere kritieke interacties

INP meet de slechtste reactietijd op gebruikersinteracties. Op een productpagina zijn de belangrijkste interacties:

  • Klik op "Toevoegen aan winkelwagen"
  • Wijzigen van een variant (maat, kleur)
  • Openen van een hamburgermenu
  • Scrollen in een carrousel

Typische oorzaken van een hoge INP:

Blokkerende JavaScript

Bibliotheken van derden (Facebook Pixel, Google Tag Manager, Hotjar, review-widgets) zijn de eerste schuldigen. Elk script dat op de main thread draait, blokkeert interacties.

Oplossingen:

  • Laad scripts van derden waar mogelijk met defer of async
  • Verplaats ze naar een Web Worker als dat kritisch is
  • Consolideer analytics-pixels via één tag (GTM)
  • Bewuste vertragingen: laad Hotjar niet vóór 3 seconden na de First Contentful Paint

Zware JavaScript-handlers bij klik

Een klik op "Toevoegen aan winkelwagen" die 5 API-calls triggert, 3 elementen animeert en een modal opent, kan 500 ms nodig hebben om te reageren.

Optimalisaties:

  • Optimistic UI: toon direct feedback (knop verandert van status), ook als de API 300 ms nodig heeft om te reageren
  • Debounce handlers: voorkom dat berekeningen bij elke hover opnieuw starten
  • Verplaats animaties waar mogelijk naar CSS in plaats van JS

Hydration op SPA / frameworks

Als u React/Next/Vue gebruikt, kan de initiële "hydration" de main thread 1-2 seconden blokkeren. In die tijd werken klikken niet.

Oplossingen:

  • Server-side rendering met aanvankelijk beperkte interactieve content
  • Progressive hydration: hydrateer eerst de kritieke onderdelen
  • Op Next.js 16+ gebruikt u "use client" spaarzaam — hoe meer de component server-side is, hoe beter de INP

Meettools

Lab tools (gesimuleerde data, nuttig tijdens development):

  • PageSpeed Insights — snel, openbaar
  • Lighthouse (ingebouwd in Chrome DevTools) — gedetailleerd
  • WebPageTest — meer configuratie, tests op meerdere devices

Field data (echte gebruikersdata, kritisch voor Google):

  • Chrome User Experience Report (CrUX) — openbare geaggregeerde data
  • Google Search Console → Core Web Vitals — specifiek voor uw site
  • PostHog, Vercel Analytics, Cloudflare Web Analytics — continue monitoring

Belangrijke regel: alleen field data telt voor ranking. Een perfecte lab-score met slechte field scores = geen positief SEO-effect.

Per platform

Shopify

Shopify levert standaard redelijke Core Web Vitals. De officiële thema's (Dawn, Studio, Crave) zijn geoptimaliseerd. Slechte Core Web Vitals op Shopify komen bijna altijd door:

  • Third-party apps die zware JS injecteren
  • Slecht geoptimaliseerde externe betaalde thema's
  • Niet-gecomprimeerde afbeeldingen

Audit op Shopify: verwijder onnodige apps (Online Store → Apps), gebruik een recent officieel thema, comprimeer afbeeldingen.

WooCommerce

Meer variatie afhankelijk van hosting en plugins. Aanbevolen stack:

  • Snelle host: Kinsta, WP Engine, Hostinger Cloud (geen goedkope shared hosting)
  • Licht thema: officiële Storefront of een geoptimaliseerd custom thema (geen Divi of Avada)
  • Alleen essentiële plugins
  • Cache-plugin: WP Rocket, Cache Enabler
  • Plugin voor afbeeldingsoptimalisatie: ShortPixel, Imagify

Headless

Op Next.js met next/image is er automatische optimalisatie. Op een custom frontend: implementeer dit handmatig (formaten, lazy, fetchpriority).

FAQ

Hoe lang duurt het voordat Google Core Web Vitals-verbeteringen meeneemt?

28 dagen aan "field data" worden geaggregeerd voor CrUX. Na een deployment van optimalisaties moet u rekenen op 4-6 weken voordat de Google-score de werkelijkheid weerspiegelt. Blijf geduldig, draai niet na 1 week terug.

Zijn Core Web Vitals belangrijker dan content voor ranking?

Nee. Content (relevantie, kwaliteit, backlinks) blijft de dominante factor. Core Web Vitals zijn een tie-breaker: bij twee pagina's met vergelijkbare content scoort de pagina met betere CWV hoger. Content verslechteren om CWV te winnen is contraproductief.

Kan ik in het groen komen zonder CDN?

Voor een Nederlandse site met alleen Nederlands publiek: ja — als uw server in Nederland staat en goed is geconfigureerd. Voor internationaal verkeer is een CDN vrijwel verplicht. De gratis versie van Cloudflare volstaat in 80% van de gevallen.

Moet ik beeldkwaliteit opofferen om LCP te verbeteren?

Nee. Met de juiste configuratie (WebP/AVIF + afmetingen + CDN + fetchpriority) kunt u een afbeelding van 600×600 hebben van 40 KB met kwaliteit die vergelijkbaar is met een JPEG van 200 KB. Opofferen is sinds 2023 niet meer nodig.

Zijn Core Web Vitals hetzelfde op mobiel en desktop?

De drempels wel, maar de scores worden door Google apart gemeten. Een pagina kan op desktop "Good" zijn en op mobiel "Poor" (dat komt vaak voor). Google gebruikt vooral mobiele metrics voor ranking (Mobile-First Indexing).

Hoeveel geld moet ik investeren in CWV-optimalisatie?

Richtlijn: als uw pagina's al "Good" zijn, hoeft u niet meer te investeren. Zit u op "Needs improvement", dan zijn 1-3 weken development op de belangrijkste fixes (afbeeldingen, scripts van derden, CDN) meestal voldoende. Zit u overal op "Poor", dan is mogelijk een technische herbouw nodig — begin met een volledige audit.

Ecomptimize optimaliseert automatisch de Core Web Vitals op de productpagina's van uw catalogus. Bekijk Ecomptimize voor Shopify of Ecomptimize voor WooCommerce.

Vond je dit artikel interessant?