Analyseer in 3 stappen hoe jij de performance van je webshop kunt verbeteren

Wil je een iets uitgebreidere uitleg? Bekijk dan de webinaropname over het optimaliseren van laadsnelheden

Smartphonebezoekers die willen kopen

'Via de smartphone oriënteren en via de desktop kopen' is een verzinsel. Veel smartphonebezoekers hebben ook een koopintentie, maar schaffen niet daadwerkelijk een product aan vanwege de slechte beleving. Zo zien we in onze e-commercebenchmark voor modewebwinkels dat er meer transacties zijn via de smartphone dan via de desktop, maar dat het conversiepercentage in de mobiele webshop lager is dan in de desktopwebshop.

Als uit je data-analyse blijkt dat je veel mobiele webshopbezoekers hebt, maar dat de conversie uitblijft, dan heb je een omzetlek. Een veelvoorkomende conversiekiller zijn de slechte prestaties van de webshop. Oftewel de laadtijden van je webshop.

Tip: lees in deze blog twaalf onderdelen die je op orde moet hebben voor een top gebruikerservaring in je webshop (waaronder dus de laadsnelheid)

Bij het optimaliseren van de snelheid van je mobiele webshop komt veel technisch werk om de hoek kijken. Maar wees gerust; de techniek is voor je web developer. Jij moet echter wel aangeven dat de snelheid beter moet. Hoe gerichter je jouw web developer kunt instrueren waar de problemen liggen die hij moet oplossen, hoe sneller jij het omzetlek dicht.

Tip: bekijk ook de opname van de webinar over het optimaliseren van de snelheid van je webshop

Stap 1: analyseer het verband tussen laadtijd en conversie

Je hebt waarschijnlijk tientallen ideeën over hoe je je webshop kunt verbeteren, maar je wilt natuurlijk beginnen met de verbeteringen die het meeste impact maken op je conversie. Daarom moet je eerst onderzoeken wat het verband is tussen het conversiepercentage en de laadtijd van jouw webshop.

Voor deze analyse is ervaring met Google Analytics essentieel. Je moet zelf aangepaste rapporten kunnen maken. Daarnaast moet je weten hoe je in Excel een draaitabel maakt.

De stappen die je moet doorlopen:

• Maak in Google Analytics een aangepast rapport met de dimensies: apparaatcategorie, dag van de maand en maand van het jaar. Zo krijg je per apparaat en per dag een beeld van de afgelopen periode.
• Voeg deze statistieken toe: de sessies, de gemiddelde laadtijd, het conversieratio, het bouncepercentage, het transactiepercentage en het aantal steekproeven sitesnelheid. In afbeelding 1 zie je een voorbeeld.

Afbeelding 1: stappen om een aangepast rapport in Google Analytics te maken

• Bekijk het resultaat van je rapport. Let op dat je Google Analytics de opdracht geeft om alle rijen te tonen op één pagina.
• Exporteer de data naar Excel.
• Voeg in het Excelbestand een extra kolom toe waarin je een afgeronde laadtijd toevoegt. Hierdoor kun je de laadtijden binnen een bepaalde range met elkaar bundelen.
• Maak van de gegevens een draaitabel. In de tabel plaats je apparaatcategorie in de filter, zodat je kunt filteren op enkel mobiele data. Plaats de KPI’s (transacties, bouncepercentage etc) bij de waardes.
• Bereken vervolgens de correlatie tussen laadtijd en conversieratio met de formule =CORREL(matrix 1, Matrix 2).

[PRO TIP: Je kunt ook hetzelfde doen om het verband op bouncepercentage te bekijken.]

Stap 2: bepaal de KPI’s voor laadtijdoptimalisatie

Als je een sterk verband hebt ontdekt, dan kun je aan de slag met het bepalen van de KPI’s die je wilt gebruiken voor laadtijdoptimalisatie.

Er zijn vier KPI’s die essentieel zijn:

• Start render: hoe sneller een verzoek van browser naar server wordt gestuurd, hoe sneller de bezoeker iets ziet verschijnen op het scherm.
• Speed index: De gemiddelde tijd dat het duurt voordat de website de zichtbare content van het gedeelte boven de vouw laat zien.
• Requests: hoe minder verzoeken een browser nodig heeft vanaf de server, hoe sneller de laadtijd.
• Page weight: hoe minder bytes een pagina bevat, hoe lichter de pagina waardoor het sneller laadt.

Per KPI ga je uit van de doelstellingen die Google heeft. Zo wil Google dat bezoekers in minder dan een seconde iets op hun scherm zien (‘start render’), dat de belangrijke content boven de vouw in minder dan drie seconden is te zien (‘speed index’), dat je maximaal 80 verzoeken doet aan een server ('requests') en dat de pagina maximaal 1MB is ('page weight').

Stap 3: analyseer hoe je webshop presteert per KPI

Kijk in Google Analytics op welke pagina de meeste bezoekers binnenkomen, en start met het optimaliseren van de gebruikerservaringen op deze pagina.

Op webpagetest.org meet je hoe je scoort op elke KPI. Let er wel op dat je Nederland als serverlocatie kiest, dat je een 3G-verbinding selecteert, dat je drie testen wil draaien (het laden van een pagina is een steekproef en zo verkrijg je een gemiddelde) én dat je de pagina laat testen voor nieuwe gebruikers (zie afbeelding 2). Als laatste moet je in het tabblad Chrome instellen dat het gaat om smartphonebezoekers.

Afbeelding 2: benodigde instellingen voor de tool op webpagetest.org

Het resultaat van de test kun je direct toepassen op je KPI’s; je ziet exact waar je slecht op scoort. Per KPI staat hieronder hoe je zorgt dat je wel zorgt voor goede resultaten.

Hoe optimaliseer je de start rendertijd?

Als het te lang duurt voordat er iets verschijnt op het scherm, dan zul je de server responsetijd moeten optimaliseren. Dit klinkt technisch en dat is het ook. Je hoeft ook niet te weten hoe je dit moet doen, maar je moet wel aan je web developer vragen of hij wil onderzoeken wat de mogelijkheden zijn om dit te verbeteren.

Hoe verbeter je de speed index?

Ook hier geldt: geef instructies aan je web developer. Je kunt wel nog verdiepende analyse doen. Gebruik hiervoor de browser Chrome, surf naar je webshop en toets F12 in op je toetsenbord. Chrome opent nu de developers-tool.

Kies in het scherm wat verschijnt ‘op netwerk’. Klik vervolgens op de video en ‘disable cache’, en filter op het netwerk ‘Fast 3G’ zodat je de mobiele verbinding weer nabootst (zie in de video bij afbeelding 3). Laad vervolgens de pagina opnieuw zodat je ziet hoe de pagina wordt opgebouwd en hoe de elementen op de pagina worden ingeladen. Het overzicht wat je krijgt, is de volgorde waarop elementen worden geladen op je pagina. Nu kun je zien of de pagina als eerste de zichtbare elementen laadt.

Zo wil je bijvoorbeeld dat CSS en HTML eerder worden ingeladen dan scripts. CSS en HTML zorgen immers voor zichtbare content en scripts niet. Of denk aan een chatfunctie die onnodig al heel snel ingeladen wordt. Deze is niet zichtbaar of direct bruikbaar voor de bezoekers, en hoeft dus ook niet heel snel ingeladen te worden. Hetzelfde geldt voor afbeeldingen die onder de vouw of in de footer getoond worden.

Hoe verlaag je het aantal verzoeken?

Ook hier kun je weer developer tools in Chrome gebruiken voor de verdieping van je analyse, want alle rijen die worden ingeladen in het developer-scherm zijn verzoeken. Je kunt in het overzicht in Chrome daardoor bekijken of er niet relevante verzoeken zijn. Is die Facebook Pixel bijvoorbeeld echt nodig? Of zijn er kleine requests die je kunt bundelen? Zijn er verzoeken die alleen relevant zijn voor de desktopvariant van je webshop? Voor implementatie van de oplossingen heb je een web developer nodig.

Vraag ook aan je web developer of je gebruik kunt maken van browser caching. Dit zorgt ervoor dat de browser bepaalde informatie opslaat zodat niet elke keer alle informatie opnieuw moet worden opgevraagd. Zo hoef je het logo dat op elke pagina aanwezig is, niet steeds opnieuw in te laden. Je wilt niet alles meegeven aan browser caching, want bijvoorbeeld productinformatie pas je regelmatig aan. Met deze aanpassing maak je je webshop vooral sneller voor terugkerende bezoekers.

Hoe verlaag je de page weight?

Ga voor deze KPI weer naar het overzicht met verzoeken in de browser Chrome naar developers tools. Klik tweemaal op size. Chrome sorteert dan de verzoeken op grootte, zodat je weet welke verzoeken je als eerste aan de slag moet.

Ik zie vaak dat afbeeldingen het zwaarst zijn. Hier kun je als marketeer of e-commercemanager zelf iets aan doen. Zorg dat de grootte van de afbeeldingen ongeveer even groot is als het scherm waarop ze worden getoond. Het liefst ga je uit van een bestandsgrootte van 53kb, zodat de afbeelding direct geladen wordt met een WiFi-verbinding. Probeer afbeeldingen altijd onder de 100 kb te houden. Optimaliseer je afbeelding bijvoorbeeld met compressor.io. Naast afbeeldingen moet je ook ervoor zorgen dat je zo min mogelijk HTML, CSS en Javascript gebruikt. Komt deze code toch terug, zorg er dan voor dat deze zo optimaal mogelijk geschreven is.

Er zijn ontzettend veel manieren waarop je zelf of met hulp van je web developer de snelheid van je webshop kan optimaliseren. Begin in ieder geval met de actiepunten die je webshop het meest traag maken. Wil je meer weten over het verkrijgen van een betere performance van je webshop? Ik heb er eerder een webinar over gegeven met daarin onder andere een case. Je kunt de opname hier terugkijken.