Ruben Bijker
Neem contact op

Webperformance en Core Web Vitals: wat optimaliseer je eerst?

Door Ruben Bijker · Gepubliceerd · 6 min lezen

Performancewerk loont het meest als je eerst de grootste bottleneck aanpakt. Bij de meeste sites is dat de hero-afbeelding, render-blokkerende resources en te veel JavaScript. Meet, verander één ding, meet opnieuw.

De drie metrics

  • LCP (Largest Contentful Paint): hoe snel de hoofdcontent verschijnt. Streef naar 2,5 seconden of minder.
  • INP (Interaction to Next Paint): hoe snel de pagina reageert op input. Streef naar 200 ms of minder.
  • CLS (Cumulative Layout Shift): hoeveel de layout verspringt tijdens het laden. Streef naar 0,1 of minder.

LCP verbeteren

  • Lever afbeeldingen in moderne formaten (AVIF, WebP) met de juiste afmetingen en srcset.
  • Preload of prioriteer de hero-afbeelding; lazy-load die nooit.
  • Verlaag de serverresponstijd met caching, een CDN en statische of incrementeel geregenereerde pagina's.
  • Haal render-blokkerende CSS en scripts uit het kritieke pad.

INP verbeteren

  • Lever minder JavaScript. Verwijder ongebruikte dependencies en splits bundels per route.
  • Breek lange taken op, stel niet-kritiek werk uit en vermijd zware synchrone handlers.
  • Kies server rendering en kleine interactieve eilanden boven volledig gehydrateerde pagina's.
  • Let op scripts van derden; analytics en chatwidgets zijn vaak de boosdoener.

CLS verbeteren

  • Geef afbeeldingen, video en embeds altijd breedte en hoogte (of aspect ratio).
  • Reserveer ruimte voor advertenties, banners en laat ladende componenten.
  • Laad fonts met font-display en een op maat gemaakte fallback om tekstverspringen te voorkomen.

Caching en levering

Gebruik langdurige, immutable cache-headers op gehashte assets. Gebruik een CDN voor HTML waar content publiek is. Comprimeer met Brotli. HTTP/2 of HTTP/3 neemt de meeste redenen voor bundeltrucs weg.

Meet op de juiste manier

  1. Gebruik labtools (Lighthouse, WebPageTest) om oorzaken te vinden.
  2. Gebruik velddata (CrUX, real-user monitoring) om echte impact te bevestigen.
  3. Stel een performancebudget in CI in, zodat regressies de build laten falen.

Zie ook: renderstrategieën en TypeScript in webprojecten.

Veelgestelde vragen

Wat zijn Core Web Vitals?
Drie gebruikersgerichte metrics van Google: Largest Contentful Paint (laden), Interaction to Next Paint (reactiesnelheid) en Cumulative Layout Shift (visuele stabiliteit).
Moet ik Lighthouse-scores vertrouwen?
Gebruik ze om te debuggen, maar beoordeel succes op velddata van echte gebruikers, zoals het Chrome User Experience Report of eigen real-user monitoring.

Bijbehorende dienst: Freelance webdeveloper in Amsterdam

Een project in gedachten?

Vertel kort wat je nodig hebt. Je krijgt antwoord van mij, niet van een verkoopteam.

Neem contact op

Verder lezen