Afbeeldingen zijn bijna altijd het zwaarste deel van een pagina. Een paar keuzes vooraf scheelt een seconde laadtijd.
Vorige week belde iemand uit Deventer ons over precies dit onderwerp.
Moderne browsers kunnen afbeeldingen zelf later laden. WordPress zet het attribuut loading standaard op lazy voor afbeeldingen in de inhoud.
- Breedte en hoogte in het HTML-attribuut
- loading=lazy voor alles onder de vouw
- Eerste afbeelding juist niet
- WebP waar mogelijk
- Geen origineel groter dan 2500 pixels
- Alt-teksten invullen
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">De eerste grote afbeelding bovenaan de pagina laadt u juist meteen. Anders wacht de bezoeker onnodig op het belangrijkste beeld. Upload geen foto van 6000 pixels breed als de site hem op 1200 pixels toont. WordPress maakt kleinere versies, maar het origineel blijft op de server staan en soms wordt het toch geladen.
JPEG is nog steeds goed voor foto’s, WebP is meestal een stuk kleiner. Voor logo’s en iconen kiest u SVG of PNG.
Wilt u weten waar uw site tijd verliest? We meten het graag voor u uit. Wat wij hierin voor u kunnen doen, leest u op de pagina diensten.
Hierover schreven we eerder: Laadtijd meten: waar kijkt u naar?