// Performance

Core Web Vitals
verbeteren

Een snelle website is geen luxe meer — het is een rankingfactor. Google gebruikt Core Web Vitals om te bepalen welke pagina's bezoekers een goede ervaring geven en welke niet.

Goede score

LCP

< 2.5s

Largest Contentful Paint — hoe snel verschijnt het grootste element op uw pagina.

Goede score

INP

< 200ms

Interaction to Next Paint — hoe snel reageert uw site op klikken en typen.

Goede score

CLS

< 0.1

Cumulative Layout Shift — hoeveel springt de pagina-indeling tijdens het laden.

Wat zijn Core Web Vitals?

Core Web Vitals zijn drie meetbare prestatie-indicatoren van Google die samen aangeven hoe goed of slecht een pagina voelt voor de bezoeker. Ze meten geen technische rariteiten — ze meten de daadwerkelijke ervaring van échte gebruikers.

De drie metrics zijn:

  • LCP — Largest Contentful Paint: hoe snel verschijnt het grootste zichtbare element (vaak een hero-afbeelding of grote koptekst)? Onder 2.5 seconden is goed, onder 1.0 seconden is uitstekend.
  • INP — Interaction to Next Paint: hoe snel reageert de site nadat een gebruiker klikt, scrollt of typt? Onder 200ms is goed. (INP heeft FID vervangen in maart 2024.)
  • CLS — Cumulative Layout Shift: hoeveel "springt" de pagina-indeling tijdens het laden? Onder 0.1 is goed — boven 0.25 is irritant.

Waarom belangrijk voor SEO?

Sinds Google's Page Experience update (2021, verder uitgebouwd in 2024) zijn Core Web Vitals een officiële rankingfactor. Twee pagina's met vergelijkbare content en autoriteit krijgen niet dezelfde positie als de ene snel is en de andere traag — Google geeft voorrang aan de snelle.

Daarnaast hebben slechte Core Web Vitals een dubbel effect: meer bezoekers haken af voordat de pagina is geladen, wat de bounce rate verhoogt en het gemiddelde sessieduur verlaagt. Dat zijn óók signalen die Google meeweegt.

Waarom WordPress vaak problemen geeft

Een doorsnee WordPress site scoort op mobiel tussen de 40 en 65 in PageSpeed Insights. Dat komt zelden door één probleem — het komt door een opeenstapeling:

  • Render-blocking CSS en JavaScript van thema's en plugins.
  • Niet-geoptimaliseerde afbeeldingen in te grote formaten zonder lazy loading.
  • Te veel HTTP-requests door losse plugin-assets.
  • Trage server response (TTFB) door PHP en MySQL queries.
  • Layout shifts door advertenties, embeds en lazy-loaded content zonder placeholder.

Plugins zoals WP Rocket of Autoptimize kunnen veel verbeteren, maar ze zijn pleisters op een fundamentele architectuur. Een echt snelle WordPress site vereist veel kennis en vaak ook duurdere hosting.

Hoe Next.js betere scores behaalt

Next.js is vanaf de grond af gebouwd met performance als prioriteit. Een paar mechanismen die standaard meekomen:

  • Static Site Generation (SSG) en Server-Side Rendering (SSR) leveren kant-en-klare HTML aan de browser — geen PHP, geen database query op het pad.
  • Automatische code splitting: alleen de JavaScript voor de huidige pagina wordt geladen.
  • next/image levert afbeeldingen in moderne formaten (AVIF, WebP), met juiste afmetingen, lazy loading en placeholder.
  • next/font host fonts lokaal met preload — geen externe Google Fonts roundtrip die CLS veroorzaakt.
  • CDN edge delivery: statische assets en zelfs HTML worden vanuit de CDN dichtbij de bezoeker geserveerd.
  • React Server Components: minder JavaScript naar de client, snellere interactiviteit.

Het resultaat: pagina's die standaard rond de 95-100scoren in PageSpeed Insights, zelfs op mobiel 3G/4G.

Praktische optimalisaties

Naast de framework-voordelen pas ik per project nog een aantal specifieke optimalisaties toe:

Hero LCP optimalisatie

Het grootste zichtbare element krijgt een priority flag, wordt preloaded, en gebruikt fetchpriority="high". Hierdoor verschijnt de hero vaak binnen 0.5-0.8 seconde, ook op mobiel.

Font display swap + preload

Custom fonts worden preloaded met font-display: swap zodat tekst direct zichtbaar is, ook als de font nog laadt.

Layout reservation

Voor elke afbeelding en embed reserveer ik in CSS de hoogte en breedte, zodat tekst nooit verschuift tijdens het laden. CLS blijft daardoor standaard 0.00.

Third-party scripts isoleren

Google Analytics, chatbots en pixels worden via next/scriptmet strategie "afterInteractive" of "lazyOnload" geladen, zodat ze de Core Web Vitals niet beïnvloeden.

Resultaten voor bedrijven

Wat levert het concreet op? Een paar concrete gevolgen die we keer op keer zien bij overgangen van WordPress naar Next.js:

  • Bounce rate daalt met 15-40% — bezoekers blijven hangen omdat de site direct verschijnt.
  • Pagina's per sessie stijgen — gebruikers klikken makkelijker door als alles snel is.
  • Organische posities in Google stijgen voor de meeste keywords binnen 4-8 weken.
  • Mobiele conversie verbetert, vooral op trage netwerken.
  • Adverteren wordt goedkoper — Google Ads beloont snelle landing pages met lagere CPC's.

Core Web Vitals zijn niet alles. Goede content, sterke autoriteit en duidelijke conversiestructuur blijven minstens zo belangrijk. Maar zonder snelheid valt al die andere moeite in een lekkende emmer.

Laat uw website testen.

Stuur de URL en u krijgt een gratis Core Web Vitals analyse met concrete actiepunten.

Test mijn site