Wat is een snelle website? Core Web Vitals uitgelegd

Sinds 2021 gebruikt Google "Core Web Vitals" om mee te wegen welke sites bovenaan komen. Bureaus die hier serieus mee bezig zijn, ranken hoger. Bureaus die het negeren, vallen. Tijd om in mensentaal uit te leggen wat ze zijn en wat je eraan kunt doen.

Waarom maakt Google hier zoveel werk van?

Omdat trage websites zijn gebruikers stuk maken. 53% van mobiele bezoekers haakt af na 3 seconden laden. Voor Google's resultaten betekent dat: traag = slecht voor je gebruiker = niet de site die wij willen tonen.

De 3 metingen

1. LCP, Largest Contentful Paint

Wat het is: hoe snel het grootste zichtbare element op je pagina geladen is. Meestal een grote afbeelding of header-tekst.

Doel: onder 2,5 seconden.

Wanneer slecht: grote afbeeldingen die niet zijn gecomprimeerd, of trage hosting.

2. INP, Interaction to Next Paint

Wat het is: hoe snel je site reageert nadat een gebruiker klikt of typt. Vervangt sinds maart 2024 de oude metric "FID".

Doel: onder 200 milliseconden.

Wanneer slecht: zware JavaScript, third-party scripts (chat widgets, tracking), trage formulier-validaties.

3. CLS, Cumulative Layout Shift

Wat het is: hoeveel je pagina "schokt" tijdens het laden. Je kent het: je wilt op een knop klikken en op het laatste moment springt er een advertentie tussen. CLS meet hoe vaak dat gebeurt.

Doel: onder 0,1 (een score, geen seconde).

Wanneer slecht: afbeeldingen zonder vaste afmetingen, fonts die laat laden en tekst doen verspringen, advertentieblokken die later inschuiven.

6 directe acties om sneller te worden

1. Comprimeer afbeeldingen

Foto's van een telefoon zijn vaak 4–8 MB groot. Op het web wil je 100–300 KB. Gebruik Squoosh (gratis, in je browser) om PNG/JPG naar WebP of AVIF te converteren, vaak 70–90% kleiner zonder zichtbaar kwaliteitsverlies.

2. Specificeer afmetingen op <img> tags

Elke afbeelding moet een breedte en hoogte hebben. Dit voorkomt CLS-problemen: de browser reserveert ruimte voordat de afbeelding geladen is.

<img src="foto.webp" width="800" height="600" alt="…">

3. Host webfonts lokaal

Google Fonts via Google's CDN voegt 200–500 ms toe aan je laadtijd. Download de fonts en host ze zelf met font-display: swap. Sinds privacy-regelgeving is dit bovendien verplicht.

4. Lazy load afbeeldingen onder de fold

Afbeeldingen die pas zichtbaar zijn na scrollen, mogen later laden. Voeg loading="lazy" toe aan <img>-tags. Browsers doen de rest.

5. Minder third-party scripts

Elk script dat van een andere site komt (chat widget, Google Analytics, Facebook Pixel, hotjar, etc.) vertraagt je site. Vraag jezelf bij elk script: wat levert het op? Zo niet, weg ermee.

6. Caching aan

Bij je hosting kun je instellen dat afbeeldingen, fonts en stylesheets in de browser van je bezoeker worden bewaard. Volgende keer zijn ze direct beschikbaar. Vercel, Netlify en Cloudflare doen dit standaard goed.

"Mijn score is rood, wat nu?"

Goede vraag. PageSpeed Insights toont een lijst met concrete suggesties onder je score. De aanbevelingen zijn gerangschikt op impact. Begin bij de top 3. Vaak zit 80% van de winst in de eerste 3 verbeteringen.

Wat is realistisch voor MKB?

Een goed gebouwde MKB-site haalt 90+ op mobile en 95+ op desktop. Een WordPress-site met 8 plugins kan vaak nog naar 75–85 zonder enorme aanpassingen. Onder de 50? Dan is er werk te doen, en dat heeft direct impact op je ranking en conversie.

Wat doet een goed bureau hieraan?

Bij Uniek Webdesign meet ik elke site die ik bouw met PageSpeed. Doel: 95+ op zowel mobile als desktop. Dat zit in de prijs, je bent geen losse "performance optimization" hierdoor verschuldigd. Snelheid is geen optie, het is basis.

Wil je weten waar je staat?

Test je site nu op pagespeed.web.dev. Als je rode of oranje scores ziet, weet je waar de aandacht moet liggen. Vragen? Ik kijk graag mee, meestal kan ik binnen 10 minuten zeggen waar de grootste verbeteringen zitten.