High-end design en topsnelheid gaan prima samen — als je er vanaf het begin rekening mee houdt. Dit zijn de principes waarmee we op Webflow en Framer consequent hoge scores halen.
Wat zijn Core Web Vitals?
Google meet de gebruikservaring met drie kerncijfers:
- LCP (Largest Contentful Paint): hoe snel het grootste element zichtbaar is.
- INP (Interaction to Next Paint): hoe snel de pagina reageert op interactie.
- CLS (Cumulative Layout Shift): hoeveel de layout verspringt tijdens het laden.
1. Beelden: het grootste winstpunt
- Gebruik moderne formaten zoals WebP of AVIF.
- Lever beelden in de juiste afmeting aan — geen 4000px-foto in een kaart van 400px.
- Lazy-load alles onder de vouw, maar laad je hero-beeld juist met prioriteit.
2. Fonts slim laden
- Beperk het aantal gewichten en varianten.
- Gebruik
font-display: swapom onzichtbare tekst te voorkomen. - Overweeg een variabel font: één bestand voor alle gewichten.
3. Animaties zonder haperen
Animaties zijn vaak de boosdoener bij een slechte INP of een schokkerige ervaring.
- Animeer alleen transform en opacity — die kunnen door de GPU worden verwerkt.
- Vermijd zware effecten als
backdrop-filterop grote, bewegende vlakken. - Gebruik één animatiebibliotheek en laad die alleen waar nodig.
- Respecteer
prefers-reduced-motion.
4. Scripts van derden
Chatwidgets, trackingpixels en embeds zijn de stille killers van performance. Laad ze uitgesteld of pas na interactie, en kritisch: heb je ze echt allemaal nodig?
5. Layout shift voorkomen
Geef beelden en embeds vaste afmetingen of een aspect-ratio, en reserveer ruimte voor elementen die later laden.
6. Meten, niet gokken
We testen elke pagina geautomatiseerd met Lighthouse vóór livegang en monitoren daarna de echte gebruikersdata in Search Console.
Wil je weten hoe jouw huidige site scoort? Vraag een audit aan.