Lazy loading uitgelegd
Wat is lazy loading?
Lazy loading betekent dat een afbeelding, video of iframe pas wordt geladen wanneer die bijna in beeld komt. Zo hoeft de browser bij het openen van de pagina niet alles tegelijk op te halen. Het idee is simpel: laad pas wat de bezoeker op dat moment nodig heeft.
In moderne browsers zet je lazy loading aan met het attribuut loading="lazy" op een img- of iframe-element. Dat is een ingebouwde functie, dus je hebt geen extra script nodig om het te gebruiken.
Hoe werkt het en wat levert het op?
De browser kijkt hoe ver een afbeelding van het zichtbare deel van het scherm af staat. Komt die dichtbij, dan start hij het downloaden. Staat de afbeelding onderaan een lange pagina, dan wordt die pas geladen als de bezoeker naar beneden scrolt. Dat scheelt bandbreedte en vermindert het aantal verzoeken bij het eerste laden.
Hetzelfde geldt voor embeds zoals een kaart of een video, die vaak zwaar zijn omdat ze hun eigen scripts en bestanden meebrengen. Met lazy loading laden ze pas als ze in beeld komen, zodat de start van de pagina vlotter blijft. Meer over die externe partijen lees je bij externe scripts en snelheid.
Wanneer gebruik je het wel?
Lazy loading past goed bij afbeeldingen die onder het zichtbare deel van de pagina staan, de zogeheten onder de vouw. Denk aan een galerij met tientallen foto’s, een blog met plaatjes in de tekst of een lange productlijst. Ook iframes die lager staan, zoals een video of kaart, zijn goede kandidaten.
Hoe lang een pagina ook is, de winst zit in de data die de bezoeker nooit ziet. Hoe meer beeldmateriaal onder de vouw staat, hoe groter het effect. Voor het kleiner maken van de afbeeldingen zelf lees je afbeeldingen optimaliseren.
Wanneer gebruik je het niet?
Pas lazy loading niet toe op de afbeelding die direct zichtbaar is bij het openen van de pagina. Dat is vaak de grote hoofdafbeelding bovenaan. Die is meestal de LCP-afbeelding, en als je die uitstelt, wordt je pagina juist later klaar. Ook een logo of een afbeelding die altijd meteen zichtbaar is, heeft er niets aan.
Gebruik lazy loading dus niet voor alles. Bekijk per afbeelding of die boven of onder de vouw staat, en laat het bovenste deel van de pagina direct laden. Zo voorkom je dat je pagina juist langzamer begint.
Veelgestelde vragen
Moet ik lazy loading op alle afbeeldingen zetten?
Nee. Zet het niet op de afbeelding die direct in beeld staat, zoals de hoofdafbeelding bovenaan. Voor de rest van de pagina is het meestal een goed idee. Controleer na het toepassen of de pagina nog snel start, zodat je ziet of je geen belangrijke afbeelding per ongeluk hebt uitgesteld.
Heeft lazy loading invloed op SEO?
Meestal niet, zolang je het ingebouwde attribuut gebruikt. Zoekmachines kunnen met die standaard goed overweg. Het belangrijkste is dat afbeeldingen die voor de pagina essentieel zijn, bereikbaar blijven en niet pas verschijnen na een eigen scriptactie van de bezoeker.