Al je afbeeldingen laden tegelijk: zo werkt lazy loading
Zonder lazy loading laadt je browser alle afbeeldingen meteen, ook die helemaal onderaan je pagina die misschien nooit iemand ziet. Met lazy loading wacht de browser tot een afbeelding bijna in beeld komt.
In het kud-rapport Al je afbeeldingen laden tegelijk
Waarom het uitmaakt
Je pagina staat sneller, omdat de browser zijn aandacht kan geven aan wat bovenaan staat. Bezoekers die niet doorscrollen, downloaden die afbeeldingen ook niet, en dat scheelt data.
Het kost bijna niks: het is één attribuut, en alle moderne browsers ondersteunen het.
Zo los je het op
- Zet
loading="lazy"op afbeeldingen die buiten het eerste scherm staan. - Doe dat juist niet bij je hoofdafbeelding bovenaan; die moet zo snel mogelijk laden.
- Geef lazy afbeeldingen ook een width en height, zodat de pagina niet verspringt als ze binnenkomen.
- Voor iframes, zoals een YouTube-video of een kaart, werkt
loading="lazy"ook.
<img src="/img/project-3.webp" width="800" height="600"
loading="lazy" alt="Project aan de Dorpsstraat">Op jouw platform
- WordPress
- WordPress zet loading="lazy" sinds versie 5.5 automatisch op afbeeldingen in je content. Controleer wel of je bovenste afbeelding niet ook lazy is.
- Shopify
- De meeste moderne thema's doen dit al. Bij oudere thema's kan je developer het attribuut in de templates toevoegen.
Veelgestelde vragen
Is lazy loading slecht voor SEO?
Nee. Google ziet afbeeldingen met loading="lazy" gewoon. Alleen oude JavaScript-oplossingen die de echte bron verstoppen, kunnen een probleem zijn.
Moet ik alle afbeeldingen lazy laden?
Alle afbeeldingen behalve die in het eerste scherm. De bovenste afbeelding lazy laden maakt je pagina juist trager.