Lazy loading: afbeeldingen pas laden als ze in beeld komen

« Back to Glossary Index

Lazy loading is een techniek waarbij afbeeldingen en iframes pas worden gedownload op het moment dat de bezoeker er bijna naartoe scrolt, in plaats van meteen bij het openen van de pagina. Alles wat onder de vouw staat, wacht dus met laden tot het nodig is.

Waarom het helpt

Een bezoeker die je homepage opent, ziet in het eerste scherm misschien twee afbeeldingen. Als de browser bij het laden meteen alle 30 afbeeldingen van de pagina ophaalt, concurreren die met de bestanden die hij wél direct nodig heeft. Het gevolg is een tragere pagina en een slechtere LCP, één van de Core Web Vitals waar Google op meet.

Concreet: een categoriepagina van een webshop met 48 productfoto’s waarvan er 6 in beeld staan. Met lazy loading haalt de browser er bij het openen 6 op in plaats van 48. Dat scheelt al snel enkele megabytes op de eerste weergave.

Hoe je het aanzet

Sinds een paar jaar kan het gewoon in HTML, zonder JavaScript: loading=”lazy” op je img- of iframe-tag. WordPress voegt dit sinds versie 5.5 standaard toe aan afbeeldingen in de content. Je hebt er dus zelden nog een plugin voor nodig.

De fout die bijna iedereen maakt

Lazy loading op de hero-afbeelding. Dat is precies de afbeelding die direct in beeld staat en die meestal je LCP-element is. Door hem lazy te maken, laat je de browser wachten met het bestand dat het zwaarst meetelt. Je snelheidsscore gaat er dan op achteruit in plaats van vooruit.

De regel is simpel: alles boven de vouw krijgt loading=”eager”, en bij de hero ook fetchpriority=”high”. Alles daaronder krijgt lazy.

Andere valkuilen

• Lazy loading via JavaScript waarbij de echte bron in een data-src staat. Werkt de scriptlaadvolgorde niet mee, dan ziet Google een lege afbeelding en gaat je afbeeldingszoekverkeer eraan.
• Geen width en height op de img-tag. De browser weet dan niet hoeveel ruimte hij moet reserveren, de pagina springt bij het scrollen en je CLS loopt op.
• Iframes vergeten. Een ingesloten YouTube-video of Google Maps kost al snel honderden kilobytes. Daar valt de meeste winst te halen.

Twijfel je of het op jouw site goed staat, dat komt uit een SEO-scan zo naar boven.

« Back to Glossary Index