Waarom snelheid ertoe doet
De helft van alle mensen sluit een website die langer dan 3 seconden laadt. Je bezoekers hebben niet allemaal een gloednieuwe telefoon op snel Wi-Fi – sommigen hebben een oudere telefoon in de trein. Een projectbaas denkt ook aan hen.
Goed nieuws: de grootste snelheidsboost krijg je van één ding – afbeeldingen. Een foto recht van je telefoon kan makkelijk 5 MB zijn; een website heeft een tiende daarvan nodig.
Ik laat je zien: meten met Lighthouse
Lighthouse is een meettool ingebouwd in Chrome:
- Open je website (de live versie, niet localhost).
- F12 → tabblad Lighthouse → Analyze page load.
- Je krijgt een score van 0–100 voor performance, toegankelijkheid, SEO – en vooral een lijst met concrete tips wat te verbeteren.
De meest voorkomende tips en wat te doen:
| Lighthouse-tip | Wat te doen |
|---|---|
| Properly size images | verklein je afbeeldingen (zie hieronder) |
| Serve images in next-gen formats | sla op als WebP |
| Image elements do not have width/height | voeg width en height attributen toe |
| Links do not have descriptive text | in plaats van “click here”, zeg waar de link naartoe gaat |
Verklein je afbeeldingen
- Afmetingen: een website heeft ongeveer 1200px breedte nodig (een hero-foto) of ongeveer 600px (een gewone foto). Verkleinen kan in elke editor, ook online (bijv. squoosh.app).
- Formaat: WebP is ongeveer een derde kleiner dan JPG bij dezelfde kwaliteit.
- Lazy loading: afbeeldingen onder de vouw laden pas als de bezoeker ernaartoe scrollt:
<img src="photo.webp" alt="Match against the Eagles" width="600" height="400" loading="lazy" />Nu jij 💪
- Meet je website met Lighthouse en noteer je performance-score – dat is je startlijn.
- Zoek de 3 grootste afbeeldingen op je website (F12 → Network-tab → sorteer op Size).
- Verklein ze (afmetingen + WebP) en voeg
loading="lazy"toe aan alles behalve de eerste afbeelding bovenaan. - Meet opnieuw en vergelijk scores. Schrijf in
LAUNCH.md: voor → na. - Bonus: test je website op je telefoon met Wi-Fi uit. Hoe is het?
Verwacht geen 100 punten. Zelfs grote websites scoren 70–90. Wat telt is vooruitgang: van 60 naar 85 is een winst die bezoekers echt merken.
Controle: Je kent je Lighthouse-score voor en na. Je afbeeldingen zijn verkleind, in WebP en met lazy loading. Je website laadt merkbaar sneller op mobiel.
Wat neem je mee uit deze les
- Snelheid = bezoekers blijven. 3 seconden is de grens.
- Lighthouse vertelt precies wat te verbeteren.
- De grootste hefboom: kleinere afbeeldingen (afmetingen, WebP, lazy loading).
© 2026 Ing. Martin Polak / AlgoRhino · Contentgebruiksvoorwaarden