Trage productpagina’s kosten omzet en zorgen voor een slechtere positie in Google. Bij WooCommerce-webshops zijn productafbeeldingen vrijwel altijd de grootste boosdoener. Door afbeeldingen in het juiste formaat te uploaden, slim te comprimeren, lazy loading toe te passen en te zorgen voor een snelle server met NVMe-opslag, laadt je shop merkbaar sneller en blijven bezoekers langer op je pagina’s.
Waarom productafbeeldingen vaak het probleem zijn
Een gemiddelde productpagina in WooCommerce toont meerdere afbeeldingen: hoofdfoto, galerij, variatieafbeeldingen en gerelateerde producten. Als elke foto rechtstreeks vanaf een camera of leverancier wordt geüpload zonder bewerking, is het bestand vaak veel groter dan nodig voor weergave op het scherm. De browser moet dan onnodig veel data downloaden en verkleinen, wat direct ten koste gaat van de laadtijd en daarmee van je gebruikerservaring en vindbaarheid.
Daarnaast gebruiken veel thema’s en plugins automatisch meerdere formaten per afbeelding (thumbnail, medium, large). Zonder optimalisatie worden al deze varianten ook in volle kwaliteit opgeslagen, wat de opslagruimte en back-uptijd laat oplopen.
De juiste afbeeldingsformaten kiezen
Begin bij de bron: upload afbeeldingen nooit groter dan nodig. Voor de meeste productfoto’s is een breedte van 1200 tot 1600 pixels ruim voldoende, ook als klanten kunnen inzoomen. Gebruik waar mogelijk moderne formaten zoals WebP of AVIF in plaats van JPEG of PNG; deze bieden vergelijkbare kwaliteit bij een kleiner bestand. WooCommerce en de meeste moderne thema’s ondersteunen deze formaten inmiddels standaard.
Let ook op consistentie: gebruik voor alle productfoto’s dezelfde verhouding en afmeting. Dit voorkomt dat de pagina tijdens het laden verspringt en zorgt voor een rustiger, professioneler ogende shop.
Comprimeren en lazy loading instellen
Compressie verkleint het bestand verder zonder zichtbaar kwaliteitsverlies. Er zijn hiervoor plugins beschikbaar die dit automatisch doen bij elke upload, zodat je dit niet handmatig per product hoeft te doen. Controleer wel regelmatig of de compressie-instelling niet te agressief staat, zeker bij productfoto’s waar details zoals stofstructuur of kleur belangrijk zijn.
Lazy loading zorgt ervoor dat afbeeldingen pas laden op het moment dat een bezoeker ernaar scrolt, in plaats van alles tegelijk bij het openen van de pagina. Moderne browsers ondersteunen dit via het loading="lazy" attribuut, en veel thema’s en pluginsschakelen dit standaard in. Houd er rekening mee dat de hoofdafbeelding boven de vouw juist niet lazy geladen moet worden, zodat de eerste indruk direct scherp in beeld komt.
Controleer huidige bestandsgroottes
Bekijk in je mediabibliotheek welke productafbeeldingen onnodig groot zijn qua bestandsgrootte en afmeting.
Verklein en converteer bronbestanden
Pas de afmeting aan naar maximaal de weergavegrootte en sla op als WebP waar mogelijk.
Activeer compressie bij upload
Stel een compressietool in zodat nieuwe uploads automatisch geoptimaliseerd worden.
Schakel lazy loading in
Zorg dat afbeeldingen onder de vouw pas laden bij scrollen, behalve de hoofdfoto.
Test de laadtijd opnieuw
Meet de productpagina na de aanpassingen en vergelijk met de situatie ervoor.
Serverkant: hosting die beeld snel aflevert
Optimalisatie aan de voorkant heeft alleen volledig effect als de server de bestanden ook snel kan aanleveren. NVMe-opslag en een LiteSpeed-server verwerken grote hoeveelheden kleine bestandsverzoeken, zoals alle productfoto’s op een categoriepagina, merkbaar vlotter dan traditionele configuraties. LiteSpeed Cache werkt bovendien goed samen met WooCommerce en kan afbeeldingen automatisch cachen voor terugkerende bezoekers.
Beheer je de webshop via Plesk, dan vind je de mediabibliotheek en bestandsbeheer overzichtelijk terug, en kun je eenvoudig dagelijkse back-ups controleren voordat je grote wijzigingen in je productafbeeldingen doorvoert. Wie momenteel merkt dat de huidige webhosting de snelheid van een beeldintensieve shop niet aankan, kan overwegen om over te stappen; dat proces is bij Tandata vaak eenvoudiger dan verwacht, zie overstappen naar Tandata. Voor vragen over instellingen staat ook de kennisbank klaar met praktische uitleg.
Veelgestelde vragen
Welk afbeeldingsformaat is het beste voor WooCommerce?
WebP geeft doorgaans de beste balans tussen bestandsgrootte en kwaliteit. Zorg wel dat je thema en browsers van je doelgroep dit formaat ondersteunen; de meeste moderne browsers doen dit standaard.
Moet ik elke productafbeelding handmatig comprimeren?
Niet per se. Met een compressieplugin die automatisch draait bij elke upload, hoef je dit niet meer handmatig te doen voor nieuwe producten.
Werkt lazy loading goed samen met WooCommerce-galerijen?
Ja, mits de hoofdafbeelding die direct zichtbaar is bij het openen van de pagina niet lazy geladen wordt. Alleen afbeeldingen onder de vouw, zoals galerijfoto’s verderop, profiteren van lazy loading.
Heeft serverkeuze echt invloed op de laadtijd van afbeeldingen?
Ja. Opslag- en verwerkingssnelheid van de server bepalen hoe snel bestanden worden aangeleverd, zeker bij pagina’s met meerdere productfoto’s tegelijk.
Gaat compressie ten koste van de kwaliteit van productfoto’s?
Bij lichte tot gematigde compressie is het verschil meestal niet zichtbaar voor het oog. Controleer bij belangrijke productfoto’s altijd het resultaat na compressie voordat je publiceert.
Conclusie
Snelle productpagina’s in WooCommerce ontstaan door een combinatie van juiste afbeeldingsformaten, compressie, lazy loading en een server die dit allemaal vlot kan verwerken. Begin bij de bron, automatiseer waar mogelijk en zorg dat de hosting geen bottleneck vormt.