Development9 min leestijd2026-02-20

Website performance optimaliseren: van traag naar razendsnel

Core Web Vitals, beeldoptimalisatie, code splitting en meer — zo maak je je website écht snel.

Snelheid is geen luxe, het is een vereiste

Google heeft het al jaren duidelijk gemaakt: snelheid is een ranking factor. Maar het gaat verder dan SEO. Elke seconde extra laadtijd kost je 7% conversie. Een website die 5 seconden laadt, verliest meer dan de helft van zijn bezoekers. Bij NedDev is performance geen bijzaak maar een kernonderdeel van elk project.

Core Web Vitals: de drie heilige metrics

Google meet je website op drie specifieke punten:

Largest Contentful Paint (LCP)

Hoe snel is het grootste zichtbare element geladen? Doel: onder 2.5 seconden. Veelvoorkomende boosdoeners: grote hero-afbeeldingen zonder optimalisatie, render-blocking CSS en trage serverrespons.

Oplossingen:

Gebruik next/image of vergelijkbare componenten voor automatische beeldoptimalisatie

Preload je hero-afbeelding met ``

Implementeer server-side rendering (SSR) of static generation (SSG)

Gebruik een CDN voor statische assets

Interaction to Next Paint (INP)

Hoe snel reageert je site op gebruikersinteracties? Doel: onder 200 milliseconden. Dit verving First Input Delay (FID) in maart 2024.

Oplossingen:

Vermijd lange JavaScript taken op de main thread

Gebruik `requestAnimationFrame` en `requestIdleCallback`

Debounce scroll- en resize-events

Splits zware berekeningen op met Web Workers

Cumulative Layout Shift (CLS)

Hoeveel verschuift de layout tijdens het laden? Doel: onder 0.1. Niets is irritanter dan op een knop klikken die plotseling verspringt.

Oplossingen:

Geef afbeeldingen en video's altijd een width en height attribuut

Reserveer ruimte voor advertenties en embeds

Gebruik `font-display: swap` met fallback fonts van gelijke grootte

Vermijd content die dynamisch boven bestaande content wordt ingevoegd

Beeldoptimalisatie: het laaghangende fruit

Afbeeldingen vormen gemiddeld 50% van het gewicht van een webpagina. Hier win je het meest:

WebP of AVIF formaat: 25-50% kleiner dan JPEG bij dezelfde kwaliteit

Responsive images: Serveer verschillende formaten voor desktop, tablet en mobiel via `srcset`

Lazy loading: Laad afbeeldingen pas wanneer ze in de viewport komen

Blur placeholder: Toon een wazige preview terwijl de echte afbeelding laadt

Code splitting en lazy loading

Stuur niet je hele applicatie naar de browser bij de eerste pageload:

Dynamic imports: Laad componenten pas wanneer ze nodig zijn met `React.lazy()` of `next/dynamic`

Route-based splitting: Elke pagina krijgt zijn eigen JavaScript bundle

Tree shaking: Verwijder ongebruikte code automatisch bij de build

Caching strategie

Een goede cachingstrategie voorkomt onnodige serverrequests:

Browser caching: Stel Cache-Control headers in voor statische assets (minimaal 1 jaar)

Service Workers: Cache kritieke assets voor offline toegang en instant herbezoeken

CDN caching: Zet Cloudflare of Vercel Edge Network in voor wereldwijde distributie

Stale-while-revalidate: Serveer gecachte content terwijl je op de achtergrond de nieuwste versie ophaalt

Monitoring en meten

Performance optimalisatie is geen eenmalige actie. Meet continu:

Google PageSpeed Insights: Gratis en geeft concrete verbeterpunten

Web Vitals Chrome extensie: Real-time metrics tijdens development

Lighthouse CI: Automatische performance checks bij elke deployment

Real User Monitoring (RUM): Meet daadwerkelijke gebruikerservaring met tools als Vercel Analytics

Ons recept

Bij NedDev bouwen we standaard met Next.js, wat ons een enorme voorsprong geeft: automatische code splitting, image optimization, server components en edge rendering. Gecombineerd met onze performance-first mindset scoren onze projecten consistent 90+ op Lighthouse.

Een trage website is een keuze — en het is de verkeerde.