Terug naar de basis: Afbeeldingen die later laden: zo doet u dat goed

Afbeeldingen zijn bijna altijd het zwaarste deel van een pagina. Een paar keuzes vooraf scheelt een seconde laadtijd.

We zagen dit afgelopen maand bij drie klanten, onder wie een in Apeldoorn.

Een afbeelding met afmetingen en uitgestelde laadtijd:

<img src="/wp-content/uploads/foto.jpg"
     width="1200" height="800"
     alt="Werkplaats met gereedschap"
     loading="lazy" decoding="async">

Nu het zomer is, kunt u hier zonder tijdsdruk over nadenken. Moderne browsers kunnen afbeeldingen zelf later laden. WordPress zet het attribuut loading standaard op lazy voor afbeeldingen in de inhoud.

loading=lazy voor alles onder de vouw
WebP waar mogelijk
Geen origineel groter dan 2500 pixels

De eerste grote afbeelding bovenaan de pagina laadt u juist meteen. Anders wacht de bezoeker onnodig op het belangrijkste beeld. Geef afbeeldingen altijd een breedte en hoogte mee. De pagina springt dan niet als ze binnenkomen.

Wilt u weten waar uw site tijd verliest? We meten het graag voor u uit.

Hierover schreven we eerder: Foto's verkleinen voordat u ze uploadt