Product 1
Adaptieve beschrijving
€19,99
Prestaties
Verminderde beweging, zoom, aanpasbaarheid
Bewegingsvoorkeuren respecteren
Slecht voorbeeld
Standaard animaties
Springende kaart
Deze animatie triggert constant
Goed voorbeeld
Respectvolle animaties
Respectvolle kaart
Lichte animatie alleen bij hover
Uitleg: Gebruikers kunnen hun systeem configureren om animaties te verminderen. Deze voorkeur moet worden gerespecteerd om misselijkheid en afleiding te voorkomen.
Zoom en grote lettergrootte ondersteuning
Slecht voorbeeld
Vaste interface
Product 1
Korte beschrijving
€19,99
Product 2
Korte beschrijving
€24,99
Goed voorbeeld
📏 Tekstgrootte: 100%
Adaptieve interface
Product 2
Adaptieve beschrijving
€24,99
Uitleg: De interface moet functioneel en leesbaar blijven tot 200% zoom. Teksten moeten zich aanpassen aan de lettergrootte voorkeuren van de gebruiker.
Adaptief en responsief ontwerp
Slecht voorbeeld
Vaste desktopinterface
Logo
Neem contact op
Onze contactgegevens
123 Vredesstraat
1000 Brussel
+32 2 123 45 67
Goed voorbeeld
Adaptieve interface
Logo
Neem contact op
Uitleg: De interface moet werken op alle apparaten en oriëntaties, met passende besturingsgroottes voor aanraking.
Lazy Loading: laad alleen zichtbare bronnen
Slecht voorbeeld
❌ Alles tegelijk laden (Eager Loading)
Concreet voorbeeld: Een e-commercesite met 50 producten laadt alle afbeeldingen onmiddellijk, zelfs die onderaan de pagina die de gebruiker misschien nooit ziet.
📚 Technische term: Eager Loading = onmiddellijk laden van alle bronnen
- 📥 Probleem 1: 50 afbeeldingen × 200 KB = 10 MB onmiddellijk gedownload
- ⏱️ Probleem 2: 8-15 seconden wachttijd voor je de pagina ziet
- 📱 Probleem 3: Verbruikt onnodig mobiel datategoed
- 🔋 Probleem 4: Belast de processor en leegt de batterij
📄 HTML (20 KB)
🎨 CSS (50 KB)
⚙️ JavaScript (200 KB)
🖼️ Afbeelding 1 zichtbaar (200 KB)
🖼️ Afbeelding 2 zichtbaar (200 KB)
🖼️ Afbeelding 3 onderaan pagina (200 KB)
🖼️ Afbeelding 4 onderaan pagina (200 KB)
🖼️ Afbeelding 5 onderaan pagina (200 KB)
⏱️ Totale laadtijd: 8 seconden
📊 Verbruikte data: 1,27 MB (inclusief 600 KB onnodig)
Goed voorbeeld
✅ Progressief laden (Lazy Loading + Cache)
Concreet voorbeeld: Dezelfde e-commercesite laadt eerst zichtbare inhoud, dan volgende afbeeldingen alleen wanneer de gebruiker scrolt.
📚 Technische termen: Lazy Loading = uitgesteld laden • HTTP Cache = tijdelijk browsergeheugen
Test de optimalisaties:
📄 HTML (20 KB) - Geladen
🎨 CSS (50 KB) - Geladen
⚙️ JavaScript (200 KB) - Geladen
🖼️ Afbeelding 1 zichtbaar (200 KB) - Geladen
🖼️ Afbeelding 2 zichtbaar (200 KB) - Geladen
🖼️ Afbeelding 3 (geladen bij scrollen)
🖼️ Afbeelding 4 (geladen bij scrollen)
🖼️ Al geziene afbeelding (gecached, 0 KB)
⏱️ Initiële laadtijd: 2 seconden
📊 Bespaard data: 600 KB (47%)
💡 Impact op toegankelijkheid:
Snelheid (FCP)
Snellere First Contentful Paint = pagina onmiddellijk zichtbaar
Mobiele data
Essentieel voor gebruikers met beperkt dataplan of traag netwerk (3G)
Batterij
Minder netwerkoverdracht = aanzienlijke energiebesparing
Oude apparaten
Minder te verwerken bronnen = werkt op oude hardware
Uitleg: Lazy loading (uitgesteld laden) maakt het mogelijk afbeeldingen en bronnen alleen te laden wanneer de gebruiker ze nodig heeft, in plaats van alles tegelijk te downloaden wanneer de pagina laadt.