Hoe werkt lazy loading?
Je zet het attribuut loading op een afbeelding of een iframe (een ingesloten stuk van een andere pagina, zoals een video of kaart):
<img src="zaal-tuin.jpg" loading="lazy" alt="Trouwzaal met uitzicht op de tuin" width="800" height="600">- lazy: de browser wacht met laden tot het element op een bepaalde afstand van het zichtbare deel van de pagina is.
- eager: de standaard. De browser laadt het element meteen, waar het ook op de pagina staat.
Geef afbeeldingen altijd een breedte en hoogte mee. Dan houdt de browser ruimte vrij en verspringt de pagina niet als de foto binnenkomt. Google meet dat verspringen met de meetwaarde CLS. Voor andere onderdelen dan afbeeldingen en iframes kun je de Intersection Observer API gebruiken. Daarmee ziet een script wanneer een element in beeld komt of uit beeld verdwijnt.
Wat zegt Google over lazy loading?
Google noemt lazy loading een gangbare manier om een pagina sneller en prettiger te maken. Fout toegepast kan het wel inhoud voor Google verbergen. Google Search scrolt en klikt namelijk niet op je pagina. Google geeft deze richtlijnen:
- Laad inhoud zodra die in beeld komt, niet pas als iemand scrolt of klikt.
- Gebruik geen lazy loading voor wat direct zichtbaar is bij het openen van de pagina. Dat geldt zeker voor de afbeelding die de LCP bepaalt.
- Werk je met oneindig scrollen? Geef elk deel een eigen, vaste URL, bijvoorbeeld met
?page=12, en link de delen op volgorde aan elkaar. - Test met de URL-inspectietool in Search Console. Staan de afbeeldings-URL’s in het src-attribuut van de gerenderde HTML, dan werkt het.
Voorbeeld: de fotogalerij van een trouwlocatie
Een trouwlocatie in Drenthe heeft een galerij met 80 foto’s. De pagina laadt traag op mobiel. Een webbouwer voegt daarom een script toe dat foto’s pas laadt bij een scrollbeweging. De URL-inspectietool toont daarna alleen de eerste foto’s in de gerenderde HTML. De rest ziet Google niet, want Google scrolt niet.
De locatie stapt over op loading="lazy" van de browser zelf. De drie foto’s bovenaan krijgen geen lazy loading, omdat ze direct in beeld staan. Nu laden de foto’s lager op de pagina pas als de bezoeker in de buurt scrolt. Google vindt alle 80 afbeeldingen in de gerenderde HTML.
Veelgestelde vragen over Lazy loading
Wat betekent lazy loading?
Lazy loading betekent letterlijk lui laden. De browser laadt afbeeldingen of video’s pas als je er bijna bent. Zo opent het eerste deel van de pagina sneller.
Is lazy loading slecht voor SEO?
Niet als je het goed doet. Laad inhoud zodra die in beeld komt, niet pas als iemand scrolt of klikt. Google scrolt niet. Gebruik het ook niet voor wat bovenaan de pagina staat.
Moet ik mijn LCP-afbeelding lazy laden?
Nee. De grootste afbeelding bovenaan wil je juist zo snel mogelijk laden. Lazy loading vertraagt die en maakt je LCP slechter.