Waarom de snelheid van je webshop omzet is

Iedereen weet dat een trage webshop vervelend is. Minder mensen beseffen dat snelheid geen technisch detail is, maar een directe factor in je omzet. Elke seconde die een productpagina langer laadt is een moment waarop een bezoeker kan besluiten om terug te gaan naar Google, naar een concurrent of naar Instagram. Ik doe regelmatig snelheidsrondes voor webshops en bedrijfssites, en in dit artikel leg ik uit wat laadtijd doet, waar de vertraging meestal vandaan komt, wat ik eraan doe en hoe je het zelf kunt meten.

Wat laadtijd doet met bezoekers en vindbaarheid

Twee dingen gebeuren er bij een trage shop, en ze versterken elkaar.

Bezoekers haken af

Een bezoeker die op een advertentie of zoekresultaat klikt heeft een korte aandachtsspanne. Als de pagina wit blijft, of als de knop “In winkelwagen” pas na een tijdje reageert, voelt dat als onbetrouwbaar. Op mobiel, waar de meeste webshopbezoekers zitten en de verbinding vaak minder stabiel is, telt dat dubbel. Trage shops verliezen bezoekers vóórdat ze een product hebben gezien, en verliezen kopers tijdens de checkout wanneer elke stap hapert.

Zoekmachines wegen snelheid mee

Google gebruikt de ervaring van bezoekers als rankingfactor en heeft daar een meetlat voor: de Core Web Vitals. Dat zijn drie meetwaarden die je zelf kunt controleren:

• LCP (Largest Contentful Paint): hoe snel het grootste zichtbare element (meestal de productfoto of hero-afbeelding) in beeld is.
• INP (Interaction to Next Paint): hoe snel de pagina reageert als iemand klikt, tikt of typt. Dit vervangt sinds een tijd de oudere FID-metriek.
• CLS (Cumulative Layout Shift): hoeveel de pagina verspringt tijdens het laden. Denk aan een knop die naar beneden schuift op het moment dat je wilt tikken.

Een shop die op deze drie punten goed scoort heeft een streepje voor bij het ranken, en belangrijker: hij voelt gewoon prettig. Dat is uiteindelijk waar het om gaat. Snelheid en SEO zijn geen losse onderwerpen.

De grootste boosdoeners

Bij vrijwel elke snelheidsronde kom ik dezelfde oorzaken tegen. In volgorde van hoe vaak ik ze zie:

Te veel apps en scripts

Dit is nummer één, zeker bij Shopify- en WooCommerce-shops. Elke app voor reviews, pop-ups, chat, upsells, wishlist, countdown-timers of cookiebanners laadt zijn eigen JavaScript. Afzonderlijk valt het mee, samen vormen ze een berg code die op elke pagina wordt uitgevoerd, ook op pagina’s waar de app niets doet. Apps die je ooit hebt getest en weer hebt verwijderd laten bovendien vaak restjes code achter in het thema.

Zware beelden

Productfoto’s rechtstreeks uit de camera of van de fotograaf, meerdere megabytes groot, in JPG of PNG, op volledige resolutie. Op een categoriepagina met twintig producten telt dat snel op tot tientallen megabytes. Beelden zijn vaak de grootste oorzaak van een slechte LCP.

Thema-overdaad

Veel thema’s zijn gebouwd om alles te kunnen: sliders, video-headers, mega-menu’s, animaties, twaalf soorten productweergaven. Al die functionaliteit wordt geladen, ook als je maar een fractie gebruikt. Een thema dat op de demo prachtig oogt kan in de praktijk een zware motor zijn.

Trackingpixels en tagmanagers

Google Analytics, Meta-pixel, TikTok-pixel, Pinterest-tag, Hotjar, een affiliate-script, en dat alles via Google Tag Manager. Elke pixel is een extra verzoek naar een externe server. Zeker als ze synchroon laden, blokkeren ze de rest van de pagina.

Fonts

Webfonts zijn mooi, maar elk lettertype in elke dikte is een apart bestand dat gedownload moet worden voordat de tekst goed zichtbaar is. Vijf gewichten van twee fonts, geladen van een externe dienst, kosten merkbaar tijd en veroorzaken vaak ook een verspringende lay-out (CLS) als de tekst eerst in een fallback-font verschijnt.

Hosting en caching (vooral bij WooCommerce)

Bij gehoste platformen als Shopify is dit geregeld. Bij WooCommerce en andere WordPress-sites is goedkope gedeelde hosting zonder goede caching een veelvoorkomende oorzaak van een trage eerste byte. Daar helpt geen beeldoptimalisatie tegen; de server zelf is dan de bottleneck.

Wat ik doe bij een snelheidsronde

Een snelheidsronde is geen kwestie van één plugin installeren. Het is een gestructureerd proces, en de volgorde is belangrijk.

1. Meten en vastleggen

Ik begin altijd met een nulmeting: PageSpeed Insights op de homepage, een categoriepagina, een productpagina en de winkelwagen, op mobiel én desktop. Ik leg de Core Web Vitals vast en bekijk de waterval van alle verzoeken die de pagina doet. Zonder nulmeting weet je achteraf niet wat de verbetering was, en weet je niet waar je moet beginnen.

2. Apps en scripts saneren

Samen met de eigenaar loop ik de lijst van apps en scripts door. Per app de vraag: wat doet hij, gebruik je hem nog, en levert hij genoeg op om de vertraging waard te zijn? Vaak gaat een derde eruit. Daarna verwijder ik achtergebleven code van apps die al lang weg zijn. Dit is meestal de stap met het grootste effect.

3. Beelden naar WebP of AVIF

Alle beelden worden omgezet naar moderne formaten (WebP, en waar ondersteund AVIF), geschaald naar de maat waarin ze daadwerkelijk getoond worden en met responsive varianten voor mobiel en desktop. Op Shopify gebeurt een deel hiervan automatisch via het platform, mits het thema er goed gebruik van maakt. Op WordPress regel ik dit in de bouw of via een goed geconfigureerde optimalisatie-laag.

4. Lazy loading

Beelden en video’s die niet direct in beeld zijn worden pas geladen als de bezoeker ernaartoe scrolt. Het grootste beeld bovenaan juist niet: dat krijgt voorrang, zodat de LCP goed wordt.

5. Kritieke CSS

De stijlregels die nodig zijn voor het zichtbare deel van de pagina worden direct meegeleverd, de rest wordt daarna geladen. Zo verschijnt de pagina sneller zonder lelijke tussenstappen.

6. Scripts uitstellen

Scripts die niet nodig zijn voor de eerste weergave (tracking, chat, reviews onderaan de pagina) worden uitgesteld tot na het laden of tot de bezoeker daadwerkelijk interactie heeft. De pagina staat dan al, de extra’s komen daarna.

7. Fonts opschonen

Minder gewichten, lokaal gehost in plaats van via een externe dienst, en met een laadstrategie waardoor tekst meteen zichtbaar is.

8. Opnieuw meten

Dezelfde pagina’s, dezelfde tool, naast de nulmeting. Pas dan is de ronde klaar.

Dit werk doe ik voor webshops op Shopify, Lightspeed en WooCommerce, en voor WordPress-sites in het algemeen.

Zo meet je het zelf

Je hoeft niet op mij te wachten om te weten waar je staat.

PageSpeed Insights (pagespeed.web.dev) is de gratis tool van Google. Voer een URL in en je krijgt de Core Web Vitals, een score en een lijst met aanbevelingen. Let vooral op het tabblad mobiel, en kijk naar de “veldgegevens” als die beschikbaar zijn: dat zijn metingen van echte bezoekers, en die zeggen meer dan een labtest.

Test niet alleen je homepage. De productpagina en de checkout zijn waar de omzet valt, en die zijn vaak zwaarder dan de voorpagina.

Wil je een snellere eerste indruk zonder in rapporten te duiken? Mijn gratis website-scan checkt je site op snelheid en een aantal andere technische punten en vat samen waar de grootste winst zit.

Waarom statisch gebouwde websites zo snel zijn

Voor webshops ben je gebonden aan een platform, maar voor bedrijfssites, landingspagina’s en portfolio’s heb je een keuze. Ik bouw die bij voorkeur statisch, met Astro.

Statisch betekent: de pagina’s worden vooraf gebouwd tot kant-en-klare HTML-bestanden. Als een bezoeker een pagina opvraagt, hoeft er geen database te worden bevraagd en geen code te worden uitgevoerd op de server. Het bestand staat klaar en wordt direct geleverd, vaak vanaf een server dicht bij de bezoeker.

Astro voegt daar iets aan toe: het stuurt standaard geen JavaScript naar de browser. Alleen onderdelen die echt interactief moeten zijn (een formulier, een filter) krijgen script, de rest is pure HTML en CSS. Het gevolg is dat zo’n site vrijwel niets te optimaliseren heeft: er is geen zware motor, geen pluginlaag, geen database. De Core Web Vitals zijn standaard groen, en ze blijven groen, omdat er geen updates zijn die de boel langzamer maken.

Voor een bedrijf met een productwebshop is dit vaak een goede combinatie: de shop op Shopify, de informatieve bedrijfssite of landingspagina’s statisch, aan elkaar gekoppeld. Meer daarover op de pagina over websites en in mijn werk.

Veelgestelde vragen

Hoe snel moet een webshop laden?

Er is geen magisch getal, maar Google’s Core Web Vitals geven een duidelijke meetlat: een goede LCP, een lage INP en een stabiele lay-out (CLS). PageSpeed Insights laat per metriek zien of je in het groen zit. Belangrijker dan de exacte score is dat de productpagina en de checkout op mobiel direct bruikbaar aanvoelen.

Maakt een snelheidsplugin mijn shop al sneller?

Soms een beetje, maar vaak niet structureel. Een caching- of optimalisatieplugin verbergt het probleem (te veel scripts, te zware beelden, een log thema) in plaats van het op te lossen, en voegt zelf ook weer code toe. Echte winst komt uit saneren: minder apps, lichtere beelden en een thema dat alleen laadt wat je gebruikt.

Is Shopify sneller dan WooCommerce?

Uit de doos meestal wel, omdat de hosting en het CDN van Shopify goed zijn ingericht. Een WooCommerce-shop op goede hosting met een licht thema kan echter net zo snel zijn. Op beide platformen zijn te veel apps en zware beelden de grootste vertragers, en die los je op dezelfde manier op.

Benieuwd hoeveel sneller jouw shop kan? Doe eerst de gratis website-scan, en als je de uitkomst wilt bespreken plan je via de contactpagina een kennismaking. Dan kijk ik met je mee waar de grootste winst zit.