Lazy loading

Lazy loading laadt afbeeldingen en content pas wanneer ze in beeld komen.

Lazy loading is een techniek waarbij afbeeldingen, video's en andere content pas worden geladen wanneer de gebruiker naar dat deel van de pagina scrollt. Dit versnelt de initiële laadtijd aanzienlijk.

Voordelen:
• Snellere First Contentful Paint
• Minder data-gebruik voor bezoekers
• Lagere serverbelasting
• Betere Core Web Vitals scores

Implementatie in HTML is eenvoudig met het loading attribuut:
<img src="afbeelding.jpg" loading="lazy" alt="beschrijving">

Moderne browsers ondersteunen native lazy loading. Voor oudere browsers bestaan JavaScript-oplossingen. WordPress heeft lazy loading standaard ingebouwd sinds versie 5.5.

Latency reductie: 40-60% sneller bij pagina's met 20+ resources

Let op: De KeepAliveTimeout waarde wordt meestal op server-niveau ingesteld en niet in .htaccess.

10. Lazy loading voor afbeeldingen zonder JavaScript

Instrueer browsers om afbeeldingen pas te laden wanneer ze in beeld komen zonder extra JavaScript.

<IfModule mod_headers.c>
    # Link preload hint voor critical images
    <FilesMatch "\.(jpg|jpeg|png|webp)$">
        Header set Link "</style.css>; rel=preload; as=style"
    </FilesMatch>
</IfModule>

Je winkelwagen is leeg

Je winkelwagen is leeg

Lazy loading

Gerelateerde artikelen

Lazy loading

10. Lazy loading voor afbeeldingen zonder JavaScript