Pagespeed-gids voor eigenaren van e-commerceshops: diagnose en metrieken

De laadtijd (pagespeed) of snelheid van je webshop heeft directe invloed op het conversiepercentage. Bezoekers verlaten vaak meteen slecht geoptimaliseerde shops. websites met goede snelheid optimalisatie daarentegen, verbeteren hun omzet merkbaar.

Pagespeed in e-commerce: het belangrijkste in het kort

• Het belang van pagespeed: Een vertraging van 1 seconde kan het conversiepercentage al tot 7% verminderen. Snelle webshops (minder dan 1 seconde laadtijd) converteren tot drie keer beter dan pagina’s zonder pagespeed optimalisatie.

• Core Web Vitals: Google meet de gebruikerservaring met behulp van metrics zoals LCP (laadsnelheid van de hoofdcontent), CLS (visuele stabiliteit) en INP (reactiesnelheid bij klikken). Dit zijn officiële rankingfactoren.

• Het verbeteren van de pagespeed: de optimalisatie van afbeeldingen (WebP-formaat, responsieve afmetingen) en het verminderen van scripts van derden (tracking, plug-ins).

• Technische basis: een krachtige caching (bijv. Redis of Varnish) en up-to-date servertechnologieën (PHP 8.2+, HTTP/3) vormen de basis waarop alle verdere optimalisaties zijn gebaseerd.

• Shopware: Shopware 6 automatiseert veel processen zoals WebP-creatie, thumbnailbeheer en de volledige paginacaching automatisch.

Waarom is snelheid zo belangrijk voor webshops?

Pagespeed is erg belangrijk in e-commerce omdat het de kloof overbrugt tussen technische prestaties en psychologisch koopgedrag. Een snellere laadtijd leidt tot hogere conversiepercentages, lagere bounce rates en betere rankings in de zoekresultaten van Google.

• Directe invloed op het conversiepercentage: er is een directe samenhang tussen laadtijd en je omzet. Webshops die in minder dan 1 seconde laden, hebben een conversiepercentage die drie keer hoger is dan shops die 5 seconden duren.

• Google-rankings en Core Web Vitals: Google heeft pagespeed tot een officiële rankingfactor gemaakt onder de term Core Web Vitals. Dit betekent dat een trage shop slechter scoort in de zoekresultaten, zelfs als de content of producten uitstekend zijn.

• Verhoog de efficiëntie van je advertentie-uitgaven (ROI): wanneer je betaalde advertenties plaatst (bijvoorbeeld Google Ads of socialemedia-advertenties), betaal je voor elke klik. Als een gebruiker op je advertentie klikt maar de pagina niet snel genoeg laadt, verlaten ze je website voordat ze je aanbod hebben gezien.

• Winkelen op een smartphone: 66 procent van de online-omzet zijn afkomstig van smartphones en tablets. Daarom is directe pagespeed-optimalisatie voor deze apparaten bijzonder belangrijk.

Welke metrics maken deel uit van pagespeed in e-commerce?

Om de snelheid van je website te evalueren, gebruikt Google Core Web Vitals, een set metrics die de daadwerkelijke gebruikerservaring weerspiegelen. Deze bestaan uit Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), Interaction to Next Paint (INP) en Time to First Byte (TTFB).

Largest Contentful Paint (LCP) (gevoelsnelheid)

De LCP meet de tijd die nodig is voordat het grootste zichtbare element op de pagina (meestal de Hero-afbeelding op de startpagina of de productafbeelding op de productdetailpagina) volledig geladen is.

• Streefwaarde: minder dan 2,5 seconden.

• Relevantie voor e-commerce: als de productafbeelding niet direct verschijnt, twijfelt de klant aan de betrouwbaarheid of functionaliteit van de shop.

Cumulative Layout Shift (CLS) (visuele stabiliteit)

Knoppen en andere elementen die kort voor de klik of aanraking weer verschuiven, zodat de klikpoging mislukt, zijn een grote ergernis voor gebruikers. Hoe lager de CLS-waarde, hoe sneller alle elementen stabiel blijven op hun plaats.

• Streefwaarde: onder 0,1.

• Relevantie van e-commerce: een hoge CLS-score leidt tot misklikken. In het ergste geval stoppen klanten met de aankoop omdat ze zich gemanipuleerd of gefrustreerd voelen door de onstabiele gebruikersinterface.

Interaction to Next Paint (INP) (reactiesnelheid)

De INP verving in maart 2024 de oude FID (First Input Delay) metriek. Het meet hoe snel de shop reageert op interacties, bijvoorbeeld wanneer een klant op ‘Toevoegen aan winkelwagen’ klikt.

• Streefwaarde: minder dan 200 milliseconden.

• Relevantie van e-commerce: een vertraagde reactie na een klik voelt voor de gebruiker ’traag’ aan. Tijdens het afrekenen leidt dit er vaak toe dat klanten meerdere keren klikken of het proces helemaal verlaten omdat ze niet zeker weten of hun invoer is geregistreerd.

Time to First Byte (TTFB) (serverreactie)

De TTFB meet de tijd tussen het verzoek van de browser en de eerste byte die van de server wordt ontvangen.

• Streefwaarde: minder dan 800 milliseconden (vaak moeilijker te bereiken voor e-commerce door dynamische winkelwagens).

• Relevantie van e-commerce: een slechte TTFB wijst op trage hosting of een overbelaste database. Als de basis niet goed is, kunnen frontend-optimalisaties nauwelijks laadtijd besparen.

Wat zijn de grootste Pagespeed-killers in e-commerce?

Voor jou als retailer is het belangrijk om te achterhalen wat de prestaties van je shop vertraagt. Vaak zijn het echter niet de kernfuncties van het shopsysteem, maar elementen die later worden toegevoegd, zoals afbeeldingsbestanden, scripts of plug-ins, die te groot zijn.

• Niet-geoptimaliseerde beeldmedia: hoogwaardige productafbeeldingen zijn erg belangrijk voor de verkoop, maar PNG- of JPEG-formaten maken de paginagrootte onnodig groot. Webformaten zoals WebP of AVIF bieden een bestandsgroottevermindering van 30 tot 50% met dezelfde kwaliteit.

• Scripts van derden (code van derden): Tracking-pixels, chatwidgets, reviewplatforms en socialemedia-integraties laden je eigen JavaScript-code. Elk van deze scripts blokkeert de weergave van de pagina. In veel shops zijn deze externe verzoeken goed voor meer dan 50% van de totale laadtijd, omdat de browser moet wachten tot de externe servers reageren.

• Plug-ins: elke extra app of plug-in laadt zijn eigen stylesheets en scripts. Plug-ins die complexe databaseverzoeken uitvoeren zonder de resultaten tijdelijk op te slaan (caching) wanneer de pagina wordt geopend, zijn problematisch.

• Caching: zonder caching moet de server bij elke klik de hele pagina opnieuw ‘berekenen’, dat wil zeggen databases doorzoeken, prijzen ophalen en de lay-out samenstellen. Een effectieve volledige paginacaching levert in plaats daarvan al een afgewerkte kopie van de pagina op, wat de reactietijd aanzienlijk verkort.

• CSS en JavaScript: veel shopthema's laden functies voor de hele website, zelfs als ze alleen op één subpagina nodig zijn. De browser moet deze ‘dode code’ nog steeds downloaden en verwerken, wat de laadtijd merkbaar verlengt, vooral op smartphones.

Hoe verbeter ik de snelheid van mijn webshop?

Om de laadtijd van je webshop te verkorten, moet je de bestandsgroottes verkleinen, het aantal serververzoeken minimaliseren en een effectieve cachingstrategie gebruiken. Dit wordt bereikt door afbeeldingen te comprimeren, onnodige plug-ins te deactiveren en moderne protocollen zoals HTTP/2 te gebruiken.

Stap 1: Inventarisatie

Voordat je technische wijzigingen aanbrengt, heb je een voor-en-na-vergelijking nodig. Dit is de enige manier om te zien welke metriek welk effect had.

• Procedure: gebruik Google PageSpeed Insights. Voer je URL in en voer de analyse uit voor mobiel en desktop.

• Tip: Maak een screenshot van de resultaten of schrijf de waarden voor LCP (Largest Contentful Paint) en de totaalscore op. Documenteer elke wijziging in een eenvoudige lijst (bijv. ‘3/15 - Image Compression Enabled’) om het succes van de wijzigingen te zien.

Stap 2: Het optimaliseren van de visuele media

Afbeeldingen kunnen meer dan 60% van het totale datavolume van een pagina uitmaken. Hier ligt de grootste winst in snelheid voor je website.

• Metriek: gebruik hedendaagse formaten zoals WebP in plaats van klassieke JPEG's. Deze bieden aanzienlijk kleinere bestandsgroottes met identieke kwaliteit.

• Implementatie: je kunt een paar afbeeldingen handmatig converteren. Er zijn gratis onlinetools die direct in de browser werken.

• Tip: Systemen zoals Shopware zetten de afbeeldingen automatisch om in zuinige bestandsformaten.

Stap 3: Inventariseer je uitbreidingen (plug-ins en scripts)

Elke actieve plug-in laadt zijn eigen code die het laden van de pagina vertraagt. Uitbreidingen die niet meer actief worden gebruikt, stapelen zich vaak in de loop der jaren op.

• Procedure: neem je plug-inlijst in het beheer van boven naar beneden door. Vraag je bij elke invoer jezelf af: ‘Welke functie vervult deze plug-in momenteel voor mijn omzet?’

• Controleer: deactiveer plug-ins waar je niet zeker van bent in een testomgeving (staging) en meet de pagespeed opnieuw. Vaak blokkeren marketingpixels (bijvoorbeeld oude trackingcodes) of ongebruikte designeffecten de weergave van de pagina. Verwijder ongebruikte plug-ins volledig in plaats van ze gewoon te deactiveren.

Stap 4: De technische basis

Sommige hendels om de Pagespeed te verbeteren liggen diepgeworteld in de serverstructuur.

• Procedure: overleg met je gespecialiseerd personeel. Dit is ofwel je interne IT-beheerder (als je je eigen server hebt) of de ondersteuning van je hostingaanbieder.

• Belangrijk: Neem geen contact op met de aanbieder voordat je stappen 1 tot 3 (afbeeldingen en plug-ins) hebt voltooid. Anders verwijst support je alleen naar je eigen niet-geoptimaliseerde content.

• Vraag specifiek naar de PHP-versie en of er caching aan de serverkant zoals Redis of Varnish actief is voor jouw shop. In het geval van cloudoplossingen (SaaS) zijn deze instellingen vaak al geoptimaliseerd, maar het is toch de moeite waard om de documentatie van de aanbieder te bekijken.

Automatische Pagespeed-optimalisatie in Shopware

In Shopware zijn veel optimalisatiestappen al native verankerd in de software. Het shopsysteem biedt geautomatiseerde mechanismen om de belasting op de server te minimaliseren en de levering van content in de browser van de klant te versnellen.

• WebP-generatie: Shopware kan automatisch geüploade bronafbeeldingen omzetten naar WebP-formaat. Dit vermindert de hoeveelheid data die je moet overzetten aanzienlijk zonder dat je elke afbeelding handmatig hoeft te bewerken.

• Thumbnailsets: Shopware genereert automatisch verschillende groottes (thumbnails) voor elke productafbeelding. Voor gebruikers wordt de afbeeldingsgrootte geladen die overeenkomt met de schermresolutie van hun apparaat.

• Geïntegreerde HTTP-cache: het systeem cachet de voltooide gerenderde pagina's. Wanneer een nieuwe aanroep wordt uitgevoerd, hoeft de server de database niet te vragen of PHP-code uit te voeren, maar levert hij het voltooide HTML-bestand.

• Intelligent legen: Shopware detecteert automatisch wanneer een productprijs of voorraad verandert en leegt alleen de cache voor de getroffen pagina's. Dit zorgt ervoor dat de shop snel blijft zonder verouderde informatie te tonen.

• Shopware bundelt en optimaliseert onafhankelijk de bestanden die nodig zijn voor het design (CSS en JavaScript).

Maak kennis met Shopware!

Een snelle webshop leidt tot een hoger conversiepercentage. Gebruik de automatische pagespeed-optimalisatie in Shopware en bied je klanten een razendsnelle shopervaring. Ontdek nu je mogelijkheden in Shopware!

Pagespeed in e-commerce – veelgestelde vragen en antwoorden