Definitie
Lazy loading is het uitstellen van het laden van afbeeldingen, iframes of content tot ze bijna in beeld komen. Het bespaart bandbreedte, maar verkeerd toegepast vertraagt het LCP.
Wat is lazy loading?
Lazy loading betekent dat de browser bepaalde onderdelen pas laadt als ze nodig zijn, meestal wanneer ze in de buurt van het zichtbare scherm komen. Voor afbeeldingen en iframes kan dat met één attribuut: loading="lazy". Alle grote browsers ondersteunen dat.
Daarnaast bestaan JavaScript-oplossingen met de Intersection Observer API, en het principe wordt ook toegepast op content: reviews, gerelateerde producten of extra producten die laden tijdens het scrollen.
Het grote voordeel van de native variant: er is geen JavaScript voor nodig. De browser bepaalt zelf wanneer een afbeelding dichtbij genoeg is, en houdt daarbij rekening met de snelheid van de verbinding. Daarmee valt een hele categorie oude lazy-loadplugins weg.
Waarom het ertoe doet voor webshops
Een categoriepagina met 48 producten laadt zonder lazy loading 48 afbeeldingen, terwijl een bezoeker op mobiel er misschien vier ziet. Lazy loading scheelt dan veel data en geeft bandbreedte vrij voor wat wel in beeld is.
Maar het werkt twee kanten op. Lazy loading op de belangrijkste afbeelding bovenaan, zoals de hero of de hoofdfoto van een product, vertraagt je LCP. De browser wacht dan tot de layout bekend is voordat hij de afbeelding ophaalt. Dit is een van de meest voorkomende snelheidsfouten die we in audits tegenkomen.
Zo pas je het goed toe in Magento en Shopify
De regel: alles boven de vouw laadt direct (eager), alles daaronder lazy. Op een categoriepagina betekent dat de eerste rij producten eager en de rest lazy. Op een productpagina de hoofdfoto eager met fetchpriority="high", de thumbnails en gerelateerde producten lazy.
In Hyvä bepaal je dit per template, bijvoorbeeld op basis van de positie in de productlijst. In Luma loont het om te controleren of extensies of het thema niet ook de bovenste afbeeldingen lazy maken.
In Shopify kun je in Liquid de positie van een section gebruiken: section.index geeft aan hoeveelste section het is. Zo laat je de eerste sections eager laden en de rest lazy.
Voor iframes werkt het net zo. Een YouTube-video of kaart onderaan een productpagina laadt zonder loading="lazy" direct een flinke hoeveelheid scripts, ook als niemand er ooit naartoe scrolt.
Lazy loading en SEO
Googlebot ondersteunt native lazy loading en Intersection Observer. Wat niet werkt: content die pas laadt na een scroll-event of klik, want Googlebot scrolt en klikt niet. Oude JavaScript-plugins die de echte URL in data-src zetten en geen src hebben, maken afbeeldingen onvindbaar voor Google Afbeeldingen.
Geef lazy geladen afbeeldingen altijd width en height. Zonder gereserveerde ruimte verspringt de pagina als ze binnenkomen, wat je CLS verslechtert. En infinite scroll is ook lazy loading: zorg dat elke 'pagina' een eigen, gelinkte URL heeft, zodat Google de producten verderop ook vindt.
Shopify: eerste sections eager, de rest lazy
{%- if section.index > 2 -%}
{{ image | image_url: width: 800 | image_tag: loading: 'lazy' }}
{%- else -%}
{{ image | image_url: width: 800 | image_tag: fetchpriority: 'high' }}
{%- endif -%}Verder lezen
Veelgestelde vragen
Moet ik alle afbeeldingen lazy laden?+
Nee. Afbeeldingen die direct in beeld staan, en zeker het LCP-element, moeten direct laden. Lazy loading is voor alles onder de vouw.
Ziet Google lazy geladen afbeeldingen?+
Ja, met loading="lazy" of Intersection Observer. Niet als de afbeelding pas na een scroll-event of klik in de HTML komt.