Vraag nú je snelheidsoptimalisatie aan voor de zomer!
Vraag nú je snelheidsoptimalisatie aan voor de zomer!
Ik krijg een site binnen voor een analyse, open PageSpeed Insights, en kan de uitslag eigenlijk al voorspellen voor ik op de knop klik. De eerste drie aanbevelingen gaan bijna altijd over afbeeldingen. Niet bij die ene klant, bij bijna iedereen.
Foto’s rechtstreeks van de camera geüpload. Vier megabyte per stuk. WordPress heeft ze vrolijk ingevoegd zonder iets aan het gewicht te doen. Ik snap heel goed hoe dat gebeurt. Je bent met design bezig, met content, met de site live krijgen. Afbeeldingscompressie is het laatste waar je aan denkt.
Maar dit is ook het makkelijkst te fixen van alle snelheidsproblemen. Geen server-toegang nodig, geen technische diepgang, één plugin en een paar instellingen. En daarna werkt het vanzelf voor elke nieuwe upload.
In dit artikel lees je hoe je afbeeldingen optimaliseert op WordPress, welke tools ik gebruik en hoe je het zo instelt dat je er daarna geen omkijken meer naar hebt.
Een foto die je op Instagram deelt is anders dan een foto op een website. Dat klinkt logisch, maar het gedrag dat daarmee samenhangt, het uploaden van originele camerabestanden op een WordPress-site, is zo normaal dat ik het bijna niet meer opmerk. Totdat ik PageSpeed open.
Een afbeelding van 4 MB die op de homepage op 800 pixels breed staat is alsof je een vrachtwagen huurt om een broodtrommel te vervoeren. De browser downloadt 4 MB, tekent hem vervolgens klein en gaat dan door naar de volgende afbeelding. En de volgende. En de volgende.
Op een gemiddelde WordPress-site staan tientallen van die afbeeldingen. Op de homepage, in blogartikelen, op dienstenpagina’s. Eén afbeelding die je comprimeert merk je nauwelijks. Dertig niet-geoptimaliseerde afbeeldingen maken je site traag. Dat is het verschil.
Comprimeren klinkt technischer dan het is. Het betekent simpelweg: het bestand kleiner maken zonder dat je dat ziet in het eindresultaat. Het plaatje ziet er hetzelfde uit, maar de browser heeft er minder werk aan.
Er zijn drie plugins die dit goed doen voor WordPress.
Imagify is mijn persoonlijke voorkeur. Ik gebruik het al jaren op alle sites die ik beheer. Hoge compressie, goede kwaliteit, en een bulkoptimalisatie die alle bestaande afbeeldingen in één keer aanpakt.
Smush is een populaire keuze met een gratis versie. Prima voor standaard WordPress-sites. De betaalde versie voegt WebP-conversie toe.
ShortPixel werkt op basis van credits en is handig als je meerdere sites beheert met wisselende aantallen uploads.
Stel de plugin in zodat nieuwe uploads automatisch worden geoptimaliseerd. Draai daarna de bulkoptimalisatie over de bestaande afbeeldingen. Zo los je het historische probleem in één keer op en is alles wat daarna wordt geüpload ook meteen goed.
Heb je weleens een afbeelding als WebP-bestand gezien? Waarschijnlijk niet. En dat is precies de bedoeling.
WebP is een afbeeldingsformaat dat Google heeft ontwikkeld voor het web. Het is gemiddeld 25 tot 35 procent kleiner dan JPEG of PNG bij vergelijkbare kwaliteit. Niet zichtbaar voor het blote oog, wel merkbaar voor de laadtijd.
Alle moderne browsers ondersteunen WebP. WordPress ondersteunt het standaard vanaf versie 5.8. De meeste optimalisatieplugins converteren automatisch naar WebP als je dat inschakelt. De plugin serveert dan WebP aan browsers die het ondersteunen en valt terug op JPEG voor oudere browsers. Volledig automatisch.
Op een blog met twintig afbeeldingen per artikel win je met WebP-conversie al snel honderden kilobyte per pagina. Dat is het soort winst waar je blij van wordt, want het kost je niets extra terwijl de site wel sneller wordt. Leuk, hè.
Normaal laadt een browser alle afbeeldingen op een pagina tegelijk, ook de afbeeldingen helemaal onderaan terwijl de bezoeker nog bovenaan is. Dat is voor de bezoeker volledig onnodig en voor de laadtijd een probleem.
Lazy loading lost dat op. Afbeeldingen laden pas op het moment dat ze in beeld komen. Bezoeker scrollt naar beneden, afbeelding laadt. Simpel, en het scheelt aanzienlijk in de initiële laadtijd.
WordPress heeft lazy loading ingebouwd voor afbeeldingen. Cachingplugins zoals WP Rocket breiden dat uit naar scripts en iframes.
Let op, en dit is een fout die ik zelf ook heb gemaakt: de eerste afbeeldingen boven de vouw, de afbeeldingen die zichtbaar zijn zonder scrollen, mogen niet lazy loaded zijn. Die moeten zo snel mogelijk laden. Stel je plugin goed in, of voeg fetchpriority="high" toe aan het img-element van de hero-afbeelding. Dat vertelt de browser: dit eerst.
Comprimeren en WebP lossen het gewichtsprobleem op. Maar er is nog één ding dat mensen missen.
Een afbeelding die op de site maximaal 1200 pixels breed wordt weergegeven, hoeft niet 4000 pixels breed te zijn. Toch wordt die 4000-pixels-versie geüpload, laat de site hem verkleinen via CSS, en downloadt de browser de volledige versie voor hij hem kleiner tekent. Zonde van de bandbreedte, ook na compressie.
Weet je niet wat de maximale breedte is op jouw site? Open de browser-inspector (F12 in Chrome), klik op de afbeelding en kijk onder “Computed” naar de weergavebreedte. Voor de meeste WordPress-sites is 1200 tot 1600 pixels breed genoeg voor grote secties.
Dit is het mooiste aan afbeeldingsoptimalisatie: je doet het één keer goed en daarna werkt het vanzelf. Geen terugkerende taak, geen ding meer op je maandelijkse checklist.
Plugin installeren, WebP inschakelen, lazy loading aan, bulkoptimalisatie draaien. Iedere nieuwe afbeelding die je klant daarna uploadt wordt automatisch geoptimaliseerd, zonder dat jij of je klant er iets voor hoeft te doen.
De winst op een gemiddelde WordPress-site is aanzienlijk. Laadtijden die met één tot twee seconden dalen zijn geen uitzondering. Dat is niet alleen een betere score in Google, het zijn ook meer bezoekers die de pagina afmaken.
Klein beginnen is nog steeds beginnen. Installeer de plugin vandaag, draai de bulkoptimalisatie en kijk daarna wat het doet met de score in PageSpeed Insights. Je zult zien dat het werkt.
Benieuwd wat er nog meer speelt op jouw WordPress-site? De Website Quick Scan geeft je in een paar minuten een eerste beeld, gratis, inclusief de drie plekken met de meeste winst.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
