Je winkelwagen is leeg
Producten die je toevoegt, verschijnen hier.
Lazy loading is een performanceoptimalisatie waarbij afbeeldingen, video's en andere content pas worden geladen op het moment dat de gebruiker ernaar scrollt. Dit versnelt de initiële laadtijd aanzienlijk omdat alleen de content die direct zichtbaar is meteen wordt geladen. De rest volgt pas wanneer nodig.
De techniek werkt door gebruik te maken van de Intersection Observer API of het native HTML loading attribuut. Moderne browsers ondersteunen het loading="lazy" attribuut sinds 2019, waarmee je eenvoudig lazy loading kunt implementeren zonder JavaScript. Voor oudere browsers zijn JavaScript-oplossingen beschikbaar die de Intersection Observer API gebruiken.
Lazy loading verbetert Core Web Vitals zoals First Contentful Paint (FCP) en kan de Largest Contentful Paint (LCP) verbeteren, maar alleen wanneer correct toegepast. Het is cruciaal om above-the-fold afbeeldingen niet lazy te laden, omdat dit juist de LCP verslechtert. Gebruik loading="eager" voor belangrijke content die meteen zichtbaar is.
WordPress heeft native lazy loading standaard ingebouwd sinds versie 5.5 (augustus 2020). Dit bespaart bandbreedte voor zowel servers als gebruikers. De techniek is vooral effectief voor websites met veel afbeeldingen of lange pagina's waar gebruikers niet altijd helemaal naar beneden scrollen.
De techniek werkt door gebruik te maken van de Intersection Observer API of het native HTML loading attribuut. Moderne browsers ondersteunen het loading="lazy" attribuut sinds 2019, waarmee je eenvoudig lazy loading kunt implementeren zonder JavaScript. Voor oudere browsers zijn JavaScript-oplossingen beschikbaar die de Intersection Observer API gebruiken.
Lazy loading verbetert Core Web Vitals zoals First Contentful Paint (FCP) en kan de Largest Contentful Paint (LCP) verbeteren, maar alleen wanneer correct toegepast. Het is cruciaal om above-the-fold afbeeldingen niet lazy te laden, omdat dit juist de LCP verslechtert. Gebruik loading="eager" voor belangrijke content die meteen zichtbaar is.
WordPress heeft native lazy loading standaard ingebouwd sinds versie 5.5 (augustus 2020). Dit bespaart bandbreedte voor zowel servers als gebruikers. De techniek is vooral effectief voor websites met veel afbeeldingen of lange pagina's waar gebruikers niet altijd helemaal naar beneden scrollen.
Geschiedenis
De Intersection Observer API werd ontwikkeld om lazy loading en andere visibility-detectie efficiënter te maken. Voor deze API waren oplossingen onbetrouwbaar en zorgden ze vaak voor performance-problemen. De API maakt het mogelijk om asynchroon te detecteren wanneer elementen in beeld komen.
Het HTML loading attribuut werd in 2019 toegevoegd aan de WHATWG HTML Living Standard. Chrome ondersteunde het vanaf versie 76 (2019), Firefox vanaf versie 75 (2020), en Safari vanaf versie 15.4 (2022). Dit maakte native lazy loading mogelijk zonder JavaScript.
Belangrijke mijlpalen:
- 2016: Intersection Observer API geïntroduceerd
- 2019: Chrome 76 krijgt native loading attribuut support
- 2020: WordPress 5.5 introduceert standaard lazy loading (augustus 2020)
- 2022: Safari voegt loading attribuut support toe
Bronnen
- WHATWG - HTML Standard - Lazy Loading Specification
- MDN Web Docs - Lazy Loading Performance Guide
- web.dev - Browser-level Image Lazy Loading
- Can I Use - Lazy Loading via Attribute Browser Support
- WordPress Core - Lazy-loading Images in WordPress 5.5