Sitesnelheid-optimalisatie voor Ecommerce

Google meet de pagina-ervaring via drie Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP) en Cumulative Layout Shift (CLS). Elke metric vangt een ander aspect van hoe gebruikers je winkel ervaren, en alle drie voeden ze Google's ranking-algoritme.

LCP meet hoe lang het duurt voordat het grootste zichtbare element wordt gerenderd, meestal een hero-afbeelding of productfoto. Google verwacht een LCP onder 2,5 seconden. Voor ecommerce is de voornaamste boosdoener niet-geoptimaliseerde productafbeeldingen. Een enkele hero-afbeelding van 3 MB op een categoriepagina kan de LCP voorbij 4 seconden duwen op mobiele verbindingen.

INP verving First Input Delay in maart 2024 en meet responsiviteit gedurende de hele paginasessie, niet alleen de eerste interactie. Elke tik, klik en toetsenbordinvoer telt. Ecommerce-sites hebben hier moeite mee vanwege het zware JavaScript van analytics-tools, chatwidgets en aanbevelingsengines. Elk script van derden concurreert om de main thread, waardoor gebruikersinteracties worden vertraagd.

CLS volgt onverwachte lay-outverschuivingen tijdens het laden van de pagina. Op productpagina's gebeurt dit vaak wanneer afbeeldingen laden zonder gedefinieerde afmetingen, wanneer prijsbadges na de initiële render worden ingevoegd, of wanneer lazy-loaded reviews de content naar beneden duwen. Google vereist een CLS onder 0,1 voor een voldoende score.

Afbeeldingen maken 50 % tot 70 % uit van het totale paginagewicht op de meeste ecommerce-sites. Een categoriepagina met 40 producten met niet-geoptimaliseerde afbeeldingen kan gemakkelijk 15 MB overschrijden. Alleen al de juiste beeldoptimalisatie kan de laadtijd halveren.

Converteer alle productafbeeldingen naar WebP- of AVIF-formaat. WebP levert 25 % tot 35 % kleinere bestanden dan JPEG bij gelijkwaardige kwaliteit, en AVIF duwt de besparing naar 50 %. Alle grote browsers ondersteunen nu WebP, en AVIF-ondersteuning dekt meer dan 90 % van de gebruikers. Lever AVIF met WebP-fallback via het HTML picture-element.

Schaal afbeeldingen naar hun weergaveformaat. Een productminiatuur die wordt weergegeven op 300x300 pixels heeft geen bronbestand van 2000x2000 nodig. Genereer meerdere formaten tijdens de build of via de beeldtransformatie-API van je CDN. Lever 1x-afbeeldingen aan standaard displays en 2x aan Retina-schermen met srcset-attributen.

Implementeer lazy loading voor afbeeldingen onder de vouw. De eerste rij producten op een categoriepagina moet onmiddellijk laden (eager loading), terwijl alles eronder loading="lazy" moet gebruiken. Dit vermindert het initiële paginagewicht dramatisch. Een meubelwinkel die we optimaliseerden ging van 80 afbeeldingen bij het initiële laden naar 12, waardoor de LCP daalde van 4,8 seconden naar 1,9 seconden.

De gemiddelde ecommerce-winkel laadt 20 tot 35 scripts van derden: analytics, heatmaps, chatwidgets, reviewplatforms, aanbevelingsengines, retargeting-pixels en betalingsproviders. Elk script blokkeert de main thread, vertraagt interactiviteit en verhoogt het paginagewicht. Het auditen en beheren van deze scripts is een van de meest impactvolle snelheidsverbeteringen die je kunt doorvoeren.

Begin met het catalogiseren van elk script dat in je winkel wordt geladen. Open Chrome DevTools, ga naar het tabblad Netwerk, filter op JS en herlaad de pagina. Sorteer op grootte en laadtijd. Je zult vrijwel zeker scripts vinden die niet meer nodig zijn, gedupliceerde trackers of tools die voor een test zijn geïnstalleerd en nooit zijn verwijderd.

Stel niet-kritische scripts uit met het defer- of async-attribuut. Analytics- en marketingpixels hoeven niet te laden vóór het renderen van de pagina. Verplaats ze onder de vouw of laad ze na het DOMContentLoaded-event. Voor chatwidgets, vertraag de initialisatie tot de gebruiker scrollt of na een timeout van 5 seconden.

Overweeg het gebruik van een tag manager zoals Google Tag Manager met op triggers gebaseerd laden. In plaats van elk script bij het laden van de pagina te activeren, configureer triggers zodat retargeting-pixels alleen op productpagina's vuren, chatwidgets laden na 10 seconden inactiviteit en reviewwidgets alleen laden wanneer de reviewsectie in de viewport scrollt. Deze aanpak verminderde de main-thread-blokkering met 40 % bij een woonwinkel die we optimaliseerden.

Time to First Byte (TTFB) meet hoe lang je server nodig heeft om te reageren met de eerste byte HTML. Google beveelt een TTFB onder 800 milliseconden aan, maar de beste ecommerce-sites bereiken minder dan 200 milliseconden. Een trage TTFB vertraagt alles wat volgt: rendering, het laden van resources en interactiviteit.

Gedeelde hostingplannen kunnen geen consistente TTFB leveren voor winkels met meer dan een paar honderd producten. De database-queries die nodig zijn om categoriepagina's te bouwen met filteren, sorteren en voorraadcontroles vereisen dedicated resources. Upgrade naar een VPS, dedicated server of een beheerd ecommerce-platform dat infrastructuurschaling afhandelt.

Implementeer full-page caching voor categorie- en productpagina's. De meeste productpagina's veranderen zelden, en het serveren van een gecachte HTML-response elimineert database-queries volledig. Varnish, Redis of de ingebouwde cachelaag van je platform kunnen de TTFB van 1,5 seconden terugbrengen tot minder dan 100 milliseconden voor gecachte pagina's.

Gebruik een CDN met edge caching om statische assets en gecachte pagina's te serveren vanaf locaties dicht bij je klanten. Een CDN vermindert de latentie met 50 % tot 80 % voor geografisch verre bezoekers. Voor internationale winkels is dit essentieel. Een Britse klant die een in de VS gehoste winkel bezoekt zonder CDN voegt 150 tot 250 milliseconden latentie toe bij elk verzoek.

Het kritieke renderpad is de reeks stappen die de browser neemt om HTML, CSS en JavaScript om te zetten in gerenderde pixels. Dit pad optimaliseren betekent ervoor zorgen dat de browser zo snel mogelijk betekenisvolle content kan tonen, zelfs terwijl extra resources nog worden geladen.

Plaats je kritieke CSS direct inline in de HTML-head. Kritieke CSS is de minimale set stijlen die nodig is om de content boven de vouw te renderen. Tools zoals Critical of Penthouse kunnen dit automatisch extraheren. Door 10 tot 15 KB aan kritieke CSS inline te plaatsen, kan de browser de initiële weergave renderen zonder te wachten op het downloaden van externe stylesheets.

Preload belangrijke resources die de browser laat in het parseerproces ontdekt. Webfonts, hero-afbeeldingen en kritieke JavaScript-bundles moeten rel="preload"-linktags in de HTML-head gebruiken. Zonder preloading ontdekt de browser deze resources pas na het parsen van CSS- of JavaScript-bestanden, wat honderden milliseconden vertraging toevoegt.

Elimineer render-blokkerende resources door niet-kritieke CSS en JavaScript uit te stellen. Laad je volledige stylesheet asynchroon met de media="print"-truc met een onload-handler die het omschakelt naar media="all". Dit stelt de browser in staat de pagina te renderen met inline kritieke CSS terwijl het volledige stylesheet op de achtergrond wordt gedownload.

Voor Shopify-winkels injecteren de Liquid-templates en app-blokken van het thema vaak render-blokkerende scripts en stijlen. Controleer je theme.liquid-bestand en verplaats niet-essentiële app-scripts naar uitgesteld laden. Elke render-blokkerende resource voegt 100 tot 300 milliseconden toe aan de initiële render.