Waarom vertragen niet-geoptimaliseerde afbeeldingen je site?

De klassieker. Een foto komt rechtstreeks uit de camera of van een stockbank, wordt geüpload zoals hij is, en op het scherm teruggeschaald naar een fractie van zijn formaat. De bezoeker downloadt wel het hele bestand.

Drie dingen lossen dit op. Schaal de afbeelding terug naar de grootte waarop hij daadwerkelijk wordt getoond. Lever hem in WebP of AVIF in plaats van JPEG of PNG. En gebruik srcset, zodat een telefoon een kleinere versie krijgt dan een desktop.

Let daarbij op de afbeelding bovenaan je pagina. Die moet juist niet worden uitgesteld met lazy loading, want hij staat meteen in beeld. Optimalisatieplugins zetten lazy loading standaard op alle afbeeldingen aan, inclusief die eerste, en dat maakt je score slechter in plaats van beter.