Meer conversies? Start met web performance.

Met conversie-optimalisatie zetten we onze pijlers vaak nog op content, design en marketing. Wat vaak ondergesneeuwd wordt? De performance van je webshop. En dit is juist het fundament van een succesvolle conversie-optimalisatie strategie. Web performance gaat hand in hand met de snelheid van je shop. Je hebt 8 seconden om de aandacht van bezoekers te vangen en koopintenties aan te wakkeren. Dus hoe optimaliseer je de performance van je webshop voor meer conversies?

Deze blogserie richt zich op het vergroten van conversies, door performance te boosten, usability centraal te zetten, met krachtige content en het effect van voorgaande te testen. 

Deel 1: Meer conversies? Start met web performance
Deel 2: Loop jij conversies mis? Gebruik deze usability tips
Deel 3: Hoe je met content gedrag beïnvloedt voor meer conversies
Deel 4: Meer conversies met evenveel bezoekers door A/B tests en multivariate analyses

De kracht van web performance.

Web performance refereert naar de snelheid waarmee pagina’s worden weergegeven in de browser van je gebruikers, maar ook de mate van responsiviteit en interactie. Waarom is web performance belangrijk? Jouw bezoekers hebben gemiddeld een spanningsboog van 8 seconden en deze wordt alsmaar korter (in 2000 was de aandachtspanne nog 12 seconde). Acht seconden dus. Zoveel tijd heb je om bezoekers te overtuigen.

Met alleen content die aanspreekt en een gebruiksvriendelijk design red je het niet. In ieder geval niet wanneer je web performance onder presteert. Onderzoek wijst uit dat de laadtijd van je webshop je bouncerate enorm beïnvloedt. Met een page load time van 5 seconden stijgt het bouncerate gemiddeld met 38%. Dit betekent dat ongeveer 1/3 van de bezoekers wegklikt na het zien van de pagina waar ze in eerste instantie op landen. Kijkend naar de 8 seconden van hiervoor komt dit niet als verrassing, maar het is wel verbluffend hoog.

Maar de performance van je website beïnvloedt niet alleen sterk je bouncerate, het beïnvloedt ook de usability van je webshop, de kwaliteit van sessies, je kwaliteitsscores in SEA en je posities in SEO. En deze beïnvloeden om beurt natuurlijk je conversiepercentage! Een hoge web performance is dus de start van een succesvolle conversie-optimalisatie strategie.

De invloed van development op performance.

De snelheid van je webshop wordt voor het overgrote deel bepaald door development. Een taaie (onmogelijke) klus om te verbeteren wanneer je geen kennis van programmeren hebt. Maar aangeven waar winst te behalen is, dat kun je wel! 

Via de Google PageSpeed Insights tool (of nog beter: Google Lighthouse) vind je manieren om je website te verbeteren. Of eigenlijk, de manieren waar development zich over kan buigen. Wat veel mensen niet weten: Google’s PageSpeed tool is een tool voor developers, die scant van waar je wel of juist niet gebruik van maakt. Een soort checklist dus en daar wordt een score aan gehangen. Een lage score betekent ruimte voor verbetering, en vice versa. De daadwerkelijke snelheid van je website meet Google’s tool niet. Wil je weten hoe snel je écht bent? Gebruik dan tools zoals Pingdom of GTmetrix. 

Waar liggen kansen qua development:

• CSS critical: CSS zorgt voor de styling van je pagina, zonder CSS komt de bezoeker op een kale, witte pagina. De performance van je website is voor een groot deel afhankelijk van je CSS. Wij raden aan om gebruik te maken van ‘critical CSS’, waarbij alleen de minimale styling ingeladen wordt. Bezoekers zien dat er ‘iets’ gebeurt en dit vergroot de perceived performance, want de pagina voelt dan aan als ‘snel’. 
   
• Lazy en progressive loading: Daarnaast kun je voorrang geven aan alle content boven de fold. Zo worden afbeeldingen en/of video’s onder de fold later ingeladen door middel van lazy loading. Of maak gebruik van: progressive loading. Met progressive loading wordt een afbeelding eerst in pixels weergegeven en vervolgens steeds scherper, naarmate er meer bytes worden ingeladen (alleen beschikbaar JPG-format).
   
• Browsercaching: Een andere belangrijke performance indicator: browsercaching. Deze wordt vooral belangrijk bij herhaalbezoekers. Met browser caching stel je een verloopdatum in voor de content en styling van je website, waardoor content niet opnieuw geladen hoeft te worden bij een herhaalbezoek. Het aantal verzoeken richting de server neemt af en je snelheid neemt toe!
   
• Mobile performance: Het aantal aankopen via mobiel wordt alsmaar hoger. We leven in een mobile-first tijdperk. Des te belangrijker wordt het om jouw web performance voor mobiel te optimaliseren. Met responsive afbeeldingen verhogen developers de laadtijd van je website, omdat afbeeldingen zo perfect aansluiten bij het device waarop de website bekeken wordt. Content wordt sneller ingeladen en dit geeft een boost aan je performance! Klein nadeel: de opslag van je webshop wordt groter omdat een afbeelding – op de achtergrond – wordt aangemaakt voor ieder device. Het is een afweging die je (samen met development) maakt. 
   
• Bestandsruimte minimaliseren: Bouwen is nou eenmaal leuker dan schoonmaken. Of opruimen. Datzelfde geldt voor je webshop. Maar je webshop een grote schoonmaakbeurt geven, draagt wel bij aan een betere performance. Oude (niet-gebruikte) data kan weg. Heb je plugins of extensies van andere partijen? Weeg de (performance) kosten op tegen (conversie) baten. 

Developers kunnen een bezem door je webshop halen, maar jij kunt ook een handje mee helpen. Heb je afbeeldingen die je nergens gebruikt maar die nog wel op de server staan? Verwijder ze dan. Datzelfde geldt voor pagina’s die je offline hebt gezet: weg ermee.

Performance verbeteren: jouw inbreng.

Developers buigen zich over backend en frontend om de performance te perfectioneren, maar jouw bijdrage als webshopeigenaar heeft ook effect. Waar jij je in vast kan bijten? Het optimaliseren van afbeeldingen op je website. Dit zijn de richtlijnen:

1. Allereerst, afbeeldingen (en video’s) in het juiste formaat en bestandstype plaatsen. Let op: een afbeelding met een transparante achtergrond, sla je op in PNG-format. Een afbeelding met achtergrond sla je altijd op als JPG. JPG is namelijk een stuk kleiner dan PNG afbeeldingen (scheelt soms de helft!). Op dit moment raadt Google steeds vaker aan om JPG-2000-format aan te houden om op snelheid te komen.
    
2. De bestandsgrootte minimaliseren. Dit doe je door tools, zoals Tinypng of Optimizilla, waarmee je soms wel 90% je bestandsgrootte verkleint. Hoe lager de bestandsgrootte, hoe sneller je website. Daar mag je vanuit gaan. Een grove richtlijn is 100kb per afbeelding, maar dit is natuurlijk enorm afhankelijk van het formaat van je afbeelding.
    
3. Slideshows en GIF’jes? Liever niet. Vaak zijn video’s kleiner. Of maak gebruik van animaties op basis van code.