Skip to main content
SparkCore

PageSpeed Insights verbeteren met media-optimalisatie

Veel “Serve images in next-gen formats” en “Properly size images” lossen we op in de plugin-laag.

Meetbaar resultaat

Vergelijk voor/na in Lighthouse en in onze live demo.

Welke PageSpeed-waarschuwingen gaan over afbeeldingen

PageSpeed Insights en Lighthouse melden een aantal terugkerende punten die specifiek over afbeeldingen gaan. "Serve images in next-gen formats" betekent dat een afbeelding in een ouder formaat als JPEG of PNG staat terwijl WebP of AVIF kleiner zou zijn. "Properly size images" wijst op afbeeldingen die groter worden aangeleverd dan ze op het scherm worden getoond. "Efficiently encode images" gaat over de compressie-instelling van het bestand zelf. En "Defer offscreen images" of een late Largest Contentful Paint duidt erop dat afbeeldingen buiten beeld de eerste weergave vertragen, of dat juist je belangrijkste afbeelding te laat verschijnt.

Stappenplan: van waarschuwing naar groene score

Open het rapport en noteer de image-audits die falen

Voer een meting uit in PageSpeed Insights en schrijf op welke afbeeldingsgerelateerde audits worden genoemd. Dat bepaalt waar je het eerst op focust.

Converteer naar next-gen formaten waar dat wordt gevraagd

Zet afbeeldingen om naar WebP of AVIF op de plekken waar de audit "next-gen formats" aangeeft, met een fallback voor oudere browsers.

Serveer afbeeldingen op de juiste weergavegrootte

Een afbeelding van 2000 pixels breed die op 400 pixels wordt getoond, kost onnodig veel data. Zorg dat de daadwerkelijke bestandsgrootte bij de weergavegrootte past.

Laat offscreen afbeeldingen lazy loaden, met uitzondering van je LCP-afbeelding

Afbeeldingen die pas zichtbaar worden na scrollen kun je uitstellen. Je belangrijkste, direct zichtbare afbeelding (meestal de Largest Contentful Paint) juist niet, anders vertraag je die eerste weergave.

Herhaal de meting en vergelijk

Draai het rapport opnieuw en vergelijk de scores en laadtijden met de vorige meting, bij voorkeur een paar keer, omdat metingen kunnen schommelen.

Formaten en hun effect op de PageSpeed-audits

Welke aanpak welke audit raakt:
AanpakTypische besparingHelpt vooral bij
AVIFVaak de grootste besparing; in onze tests tot 94% kleiner dan het origineel."Serve images in next-gen formats" en "Efficiently encode images".
WebPRuime besparing met brede ondersteuning; meestal 25 tot 50 procent kleiner dan JPEG."Serve images in next-gen formats" als brede fallback.
Juiste afmeting serverenVerschilt sterk per situatie; vaak de snelste winst bij een oversized hero-afbeelding."Properly size images".
Lazy loading (niet-LCP)Geen besparing in bytes, wel in initiële laadtijd."Defer offscreen images".

Veelgemaakte valkuilen bij het jagen op een groene score

  • Je LCP-afbeelding óók lazy loaden, waardoor juist de eerste weergave trager wordt in plaats van sneller.
  • Alleen de hero-afbeelding optimaliseren en de rest van de pagina vergeten.
  • Een losse optimalisatietool gebruiken die niet samenwerkt met je cache-plugin, waardoor bezoekers alsnog de oude bestanden zien.
  • Alleen naar het cijfer kijken zonder de werkelijke laadtijd en gebruikerservaring te checken.
  • Geen aparte mobiele meting doen; PageSpeed Insights toont desktop en mobiel los van elkaar, en mobiel scoort vaak lager.

Veelgestelde vragen

Nee. Afbeeldingen zijn één van de factoren die PageSpeed meet; serverresponstijd, JavaScript, fonts en externe scripts tellen ook mee. Optimalisatie van afbeeldingen lost specifiek de image-audits op, niet per definitie alle andere punten.

Lighthouse is de onderliggende auditing-engine; PageSpeed Insights is een online tool die Lighthouse gebruikt en daarnaast ook echte veldgegevens van Chrome-gebruikers kan tonen.

Ja, comprimeren mag, maar zorg dat die afbeelding niet lazy loadt. Een kleinere, direct geladen LCP-afbeelding is meestal de snelste winst voor die specifieke meting.

Dat is meestal een cache-kwestie: je hostingcache, een cache-plugin of een CDN toont nog een eerder opgeslagen versie. Een cache-purge na een bulk-run lost dit meestal op.

Ja, de onderliggende bestanden worden voor alle apparaten kleiner. Mobiel scoort vaak lager dan desktop, simpelweg omdat de meting een tragere verbinding simuleert.

Na grote wijzigingen aan content, thema of plugins is een nieuwe meting verstandig. Losse metingen kunnen bovendien onderling wat schommelen, dus een enkele meting is niet altijd representatief.