Als wij een trage WordPress-site onderzoeken, is het antwoord in ruwweg de helft van de gevallen hetzelfde: de afbeeldingen. Niet een verkeerde plugin, niet de hosting, maar foto’s van vier megabyte die op het scherm als een klein blokje worden getoond. Een bezoeker op een telefoon downloadt dan tientallen megabytes voor een pagina die dat helemaal niet nodig heeft.

Het goede nieuws is dat afbeeldingen optimaliseren voor WordPress het meest dankbare snelheidswerk is dat er bestaat. Het is te doen zonder aan code te komen, het risico is klein en de winst is direct zichtbaar. Hieronder een stappenplan in zeven stappen, met per stap wat u concreet doet en waar het misgaat.

Stap 1: kijk eerst wat er nu staat

Begin met meten, anders weet u straks niet wat het opleverde. Open uw drukstbezochte pagina in een privévenster, klik met de rechtermuisknop en kies Inspecteren, ga naar het tabblad Netwerk en vernieuw de pagina. Onderaan staat hoeveel er in totaal is opgehaald.

Sorteer die lijst op grootte. Alles boven de 300 kilobyte is een kandidaat; alles boven de 1 megabyte is een probleem. Noteer het totaal van de pagina. Als richtlijn hanteren wij: onder de 1,5 megabyte is prima voor een gewone pagina, boven de 3 megabyte is te zwaar.

Kijk daarnaast in de mediabibliotheek hoeveel bestanden er staan. Bij sites die jaren draaien komen wij regelmatig duizenden afbeeldingen tegen waarvan de helft nergens meer wordt gebruikt.

Stap 2: bepaal de juiste afmetingen

De meest gemaakte fout is uploaden zonder na te denken over de weergavemaat. Een foto hoeft niet groter te zijn dan de ruimte waarin hij getoond wordt, met een marge voor schermen met een hoge pixeldichtheid.

Praktische richtlijnen voor een gangbare site:

  • Schermvullende sfeerfoto bovenaan: 1920 pixels breed is ruim voldoende.
  • Afbeelding binnen de tekstkolom: 1200 pixels breed.
  • Foto in een kolom van drie: 800 pixels breed.
  • Productfoto in een overzicht: 600 pixels breed.
  • Teamfoto of miniatuur: 400 pixels breed.
  • Logo: tweemaal de weergavemaat, of als SVG als het een vectorlogo is.

Wilt u niet per foto nadenken, stel dan een maximumbreedte in bij het uploaden. Veel optimalisatieplugins kunnen elke geüploade afbeelding automatisch terugschalen naar bijvoorbeeld 2000 pixels. Dat vangt de camerabestanden op zonder dat iemand eraan hoeft te denken.

Stap 3: kies het juiste bestandstype

Er zijn drie formaten die er in de praktijk toe doen, plus een vierde die u beter vermijdt.

JPEG is geschikt voor foto’s: veel kleurverloop, geen transparantie nodig. PNG gebruikt u alleen als u transparantie nodig heeft of bij afbeeldingen met scherpe randen en weinig kleuren, zoals een logo of een schermafdruk. Een foto als PNG opslaan levert een bestand op dat vaak vijf keer zo groot is als nodig. SVG is ideaal voor logo’s en pictogrammen: het schaalt oneindig en weegt bijna niets. Sta uploaden ervan alleen toe aan beheerders, want een SVG kan code bevatten.

Vermijd BMP en TIFF; die horen niet op een website. En let op HEIC-bestanden van iPhones: die worden door browsers niet ondersteund en moeten omgezet worden.

Stap 4: comprimeer

Compressie haalt informatie weg die het oog toch niet ziet. Bij foto’s kunt u vaak zestig tot tachtig procent van de bestandsgrootte weghalen zonder zichtbaar verschil. De sleutel is de kwaliteitsinstelling: ergens tussen 75 en 85 procent is voor de meeste foto’s het punt waarop het bestand flink kleiner is en het verschil onzichtbaar blijft.

U kunt dit op twee manieren aanpakken. Vooraf, in een beeldbewerkingsprogramma of een online compressiedienst, voordat u uploadt. Of achteraf, met een plugin die alles in de mediabibliotheek in één keer verwerkt. Die tweede route is praktisch voor een bestaande site met duizenden bestanden.

Waar het misgaat: te agressief comprimeren. Bij productfoto’s van sieraden of stoffen ziet u bij 60 procent kwaliteit vlekkerige vlakken ontstaan. Controleer altijd een paar representatieve afbeeldingen op een groot scherm voordat u een hele bibliotheek verwerkt.

Stap 5: zet WebP in

WebP is een formaat dat bij vergelijkbare kwaliteit doorgaans dertig procent kleinere bestanden oplevert dan JPEG, en het wordt inmiddels door alle gangbare browsers ondersteund. Voor een site met veel beeld is dit de grootste stap na het schalen zelf.

De verstandige aanpak is om WebP te serveren met het origineel als terugvaloptie. Vrijwel elke optimalisatieplugin doet dat: hij maakt naast elke JPEG een WebP-versie en levert die uit aan browsers die het aankunnen. Uw originele bestanden blijven staan, dus u kunt altijd terug.

Doe dit niet handmatig door alles te vervangen. Dan breekt u de koppelingen in uw berichten en pagina’s, en heeft u geen terugweg meer. Hoe u dit in WordPress instelt, hebben wij stap voor stap beschreven in het artikel over WebP instellen in WordPress.

Stap 6: laad slim in plaats van alles tegelijk

Optimaliseren gaat niet alleen over kleinere bestanden, maar ook over het moment van laden. WordPress laadt afbeeldingen tegenwoordig standaard uitgesteld: wat onder de vouw staat, wordt pas opgehaald als de bezoeker in de buurt scrolt. Dat is precies goed.

Er is één belangrijke uitzondering. De grote afbeelding bovenaan, die de bezoeker als eerste ziet, moet juist niét uitgesteld worden. Wordt die vertraagd geladen, dan verslechtert de meting van uw grootste zichtbare element merkbaar. Zorg dat het eerste beeld op de pagina normaal laadt en de rest uitgesteld.

Zorg daarnaast dat elke afbeelding een hoogte en breedte meekrijgt in de HTML. Doet u dat niet, dan weet de browser niet hoeveel ruimte hij moet reserveren en verspringt de pagina tijdens het laden. Dat is irritant voor bezoekers en het telt mee in de beoordeling van uw pagina, zoals wij toelichten in het artikel over verspringende elementen.

Stap 7: houd het op orde

Optimalisatie is geen eenmalige actie. Zodra iemand anders content gaat plaatsen, komen de camerabestanden terug. Drie dingen helpen:

  1. Automatisch terugschalen bij upload instellen, zodat het niet van discipline afhangt.
  2. Een korte werkinstructie voor wie content plaatst: maximale afmetingen, welk formaat wanneer, en dat alt-teksten verplicht zijn.
  3. Periodiek opruimen van ongebruikte bestanden. Doe dat voorzichtig en altijd met een back-up, want detectie van “ongebruikt” is bij paginabouwers nooit honderd procent betrouwbaar.

Een voorbeeld van wat dit oplevert

Een meubelmaker in Friesland had een portfoliopagina met achttien projectfoto’s, direct van de fotograaf geüpload. De pagina woog 24 megabyte en deed op een telefoon ruim elf seconden. Na terugschalen naar 1200 pixels, compressie op 80 procent en WebP kwam de pagina op iets meer dan 2 megabyte. Laadtijd op dezelfde telefoon: onder de drie seconden.

Er is niets aan het thema veranderd, geen plugin verwijderd en niet verhuisd van hosting. Alleen de afbeeldingen. De foto’s zien er op een groot scherm nog steeds goed uit; het verschil is met het blote oog niet te zien.

Tot slot

Begin bij uw drukstbezochte pagina en pak alleen de vijf zwaarste bestanden aan. Meet daarna opnieuw. In de meeste gevallen heeft u in een uur het grootste deel van de winst binnen, en pas daarna wordt het interessant om naar caching, scripts en hosting te kijken.

Heeft u een grote bibliotheek en durft u een bulkbewerking niet aan zonder vangnet, dan is dat begrijpelijk: zo’n bewerking is onomkeerbaar als er iets misgaat. Wij voeren dit soort werk uit als onderdeel van een eenmalige snelheidsverbetering, altijd met een back-up vooraf en een meetrapport van voor en na, zodat u ziet wat het heeft opgeleverd.