Wat is lazy loading?

Lazy loading is een techniek die het laden van niet-kritieke bronnen uitstelt totdat ze daadwerkelijk nodig zijn. In plaats van elke afbeelding, iframe en video op een pagina te downloaden op het moment dat de HTML wordt geparseerd, wacht de browser tot die elementen op het punt staan in beeld te scrollen. Dit betekent dat de initiële paginalading sneller en lichter is, omdat de browser zijn bandbreedte richt op wat de bezoeker als eerste ziet.

Hoe lazy loading onder de motorkap werkt

Er zijn twee belangrijke benaderingen voor het implementeren van lazy loading. De eerste is de native browser-aanpak, die afhankelijk is van het HTML-attribuut loading="lazy". Wanneer de browser een element met dit attribuut tegenkomt, stelt hij het ophalen van de bron uit totdat het element een berekende afstand tot de viewport bereikt. Elke browser bepaalt deze drempel iets anders, maar het doel is hetzelfde: start de download net voordat de gebruiker ernaartoe scrollt, zodat de inhoud naadloos verschijnt.

De tweede aanpak gebruikt JavaScript, meestal via de Intersection Observer API. Een klein script kijkt naar de pagina en detecteert wanneer placeholder-elementen de viewport binnenkomen. Zodra dat gebeurt, wisselt het script de daadwerkelijke afbeeldingsbron of iframe-URL in en activeert de download. Voordat de Intersection Observer API bestond, vertrouwden ontwikkelaars op scroll-event-listeners, die minder efficiënt waren en jank konden veroorzaken op tragere apparaten.

Wat lazy geladen kan worden

Lazy loading is van toepassing op verschillende soorten bronnen:

Afbeeldingen: het meest voorkomende gebruik. Elke <img>-tag onder de vouw is een goede kandidaat voor lazy loading.
Iframes: ingesloten YouTube-video's, Google Maps en andere widgets van derden kunnen zwaar zijn. Het lazy laden van iframes voorkomt dat ze de initiële paginarendering blokkeren.
Video's: zelfgehoste video's met de <video>-tag kunnen preload="none" of JavaScript-gebaseerde lazy loading gebruiken om de download uit te stellen.
Achtergrondafbeeldingen: CSS-achtergrondafbeeldingen die via background-image worden geladen, kunnen het native loading-attribuut niet gebruiken, dus ze vereisen JavaScript-oplossingen of zorgvuldige CSS-structurering.

Native browser lazy loading versus JavaScript-bibliotheken

Native lazy loading is de eenvoudigste optie. U voegt loading="lazy" toe aan uw <img>- of <iframe>-tag en de browser handelt alles af. Geen JavaScript nodig, geen extra bestandsgrootte, geen configuratie. Het werkt in alle moderne browsers, waaronder Chrome, Firefox, Safari en Edge.

<img src="foto.jpg" loading="lazy" width="800" height="600" alt="Beschrijving" />
<iframe src="https://www.youtube.com/embed/xyz" loading="lazy"></iframe>

JavaScript-bibliotheken zoals lazysizes, lozad.js of vanilla-lazyload bieden meer controle. Ze ondersteunen achtergrondafbeeldingen, kunnen fade-in-animaties toevoegen en laten u de laaddrempel aanpassen. Ze voegen echter extra JavaScript toe aan uw pagina en vereisen een juiste initialisatie. Voor de meeste WordPress-sites is native lazy loading de betere keuze vanwege de eenvoud en nul prestatieoverhead.

WordPress en native lazy loading sinds versie 5.5

WordPress voegt sinds versie 5.5, uitgebracht in augustus 2020, automatisch loading="lazy" toe aan afbeeldingen. Dit geldt voor afbeeldingen in berichtinhoud, uitgelichte afbeeldingen en andere afbeeldingen die via kernfuncties worden uitgevoerd. WordPress voegt ook loading="lazy" toe aan iframes die in inhoud zijn ingesloten. Sinds WordPress 5.9 wordt de eerste afbeelding in inhoud (degene die het meest waarschijnlijk boven de vouw staat) automatisch uitgesloten van lazy loading om geen LCP-scores te schaden.

Impact op Core Web Vitals en LCP-overwegingen

Lazy loading heeft een directe relatie met Core Web Vitals, met name Largest Contentful Paint (LCP). Indien correct uitgevoerd, verbetert lazy loading de LCP omdat de browser het downloaden van het grootste zichtbare element kan prioriteren zonder te concurreren om bandbreedte met afbeeldingen onder de vouw. Als u echter per ongeluk het LCP-element zelf lazy laadt (vaak de hero-afbeelding of een grote banner boven de vouw), maakt u de LCP slechter. De browser wacht met het ophalen van die afbeelding totdat hij de viewport-nabijheid berekent, wat onnodige vertraging toevoegt.

Overweeg voor afbeeldingen die niet lazy worden geladen, maar wel kritiek zijn, om fetchpriority="high" toe te voegen om de browser te vertellen die download te prioriteren:

<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="Hero-banner" />

Wanneer NIET lazy laden

Niet elke afbeelding moet lazy worden geladen. Er zijn duidelijke uitzonderingen:

Hero-afbeeldingen: de hoofdbanner of uitgelichte afbeelding die direct bij het laden van de pagina verschijnt, mag nooit lazy worden geladen.
Logo- en site-identiteitsafbeeldingen: deze staan meestal in de koptekst en zijn zichtbaar zonder te scrollen.
Eerste zichtbare inhoudsafbeelding: elke afbeelding die binnen de initiële viewport verschijnt, moet eager worden geladen.
LCP-kandidaten: als een afbeelding het grootste zichtbare element is wanneer de pagina voor het eerst rendert, zal lazy loading uw LCP-score rechtstreeks schaden.

Gebruik voor deze afbeeldingen loading="eager" (het standaardgedrag) of voeg expliciet fetchpriority="high" toe, zodat de browser ze zo snel mogelijk downloadt.

WordPress-plug-ins voor lazy loading

Hoewel WordPress basis-lazy loading native afhandelt, bieden verschillende plug-ins uitgebreide functionaliteit:

WP Rocket: bevat lazy loading voor afbeeldingen, iframes en video's als onderdeel van zijn bredere prestatieoptimalisatiesuite. Het kan ook YouTube-video-embeds vervangen door een lichtgewicht miniatuur die de daadwerkelijke speler pas bij klikken laadt.
Autoptimize: voornamelijk een CSS/JS-optimalisatieplug-in, maar bevat lazy loading voor afbeeldingen met behulp van het native attribuut of een JavaScript-fallback.
a3 Lazy Load: een speciale lazy-loading-plug-in met granulaire controle over welke elementen lazy worden geladen, inclusief ondersteuning voor achtergrondafbeeldingen en aangepaste selectoren.
Perfmatters: een lichtgewicht prestatieplug-in die naast andere optimalisaties zoals scriptbeheer en database-opschoning ook lazy loading bevat.

Lazy loading en SEO

De crawler van Google (Googlebot) rendert JavaScript, dus hij kan lazy geladen afbeeldingen zien zolang ze uiteindelijk tijdens het renderen worden geladen. Vertrouwen op JavaScript-gebaseerde lazy loading betekent echter dat Googlebot uw scripts moet uitvoeren om die afbeeldingen te ontdekken. Native lazy loading met loading="lazy" is veiliger voor SEO, omdat het daadwerkelijke src-attribuut vanaf het begin in de HTML aanwezig is. Zoekmachines kunnen de afbeeldings-URL vinden zonder JavaScript uit te voeren. Zorg er altijd voor dat uw afbeeldingen de juiste alt-attributen hebben, ongeacht de lazy-loading-methode die u kiest.

Wat InspectWP controleert

InspectWP analyseert de afbeeldingen op uw pagina en rapporteert of het attribuut loading="lazy" aanwezig is op elke afbeelding. Dit helpt u te verifiëren dat lazy loading correct is geïmplementeerd op uw WordPress-site en eventuele afbeeldingen te identificeren die het attribuut missen of ten onrechte lazy worden geladen wanneer ze eager moeten worden geladen.