Een goede performance van je webwinkel zorgt voor meer conversie. Ook al worden internetverbindingen steeds sneller, zowel thuis als onderweg, je klanten zijn ook ongeduldig en verwachten een site die snel laadt. Bovendien beschouwt Google de snelheid van je webshop als een belangrijke factor in de ranking. In dit blog leg ik uit hoe je de snelheid van je shop kunt meten en welke maatregelen er zijn om je webshop sneller te maken.
We zijn ongeduldiger
In de beginjaren van het internet waren we niet anders gewend dan dat het laden van een website of het binnenhalen van je mail gewoon even duurde. We hadden nog trage (inbel-) modems het binnenhalen en versturen van al die kilobytes ging nu eenmaal vaak met een slakkengangetje. Dat is nu wel anders. Thuis hebben we een razendsnelle kabel- of glasvezelverbinding en onderweg beschikken de meeste smartphones inmiddels over een rappe 4G of 5G verbinding.
En toch is de snelheid van je webwinkel nu gek genoeg misschien wel belangrijker dan toen. Want we verwachten tegenwoordig ook dat websites gewoon direct laden en moeiteloos op ons scherm verschijnen. Uit meerdere onderzoeken (The Psychology of Web Performance, Website Response Times, Google Research Blog) blijkt dat er een heel directe relatie is tussen laadtijden enerzijds en klanttevredenheid, percentage afhakers en loyaliteit anderzijds. En de lat komt steeds hoger te liggen. Internet is zo’n wezenlijk onderdeel van ons leven geworden dat we meteen frustratie ervaren wanneer een site of app even niet zo snel laadt. En helaas kan ook vandaag de dag nog de snelheid van de verbinding, vooral op mobiele netwerken, om allerlei redenen een stuk langzamer zijn dan gewenst.
Snelheid is een ranking factor
Voor wie het nog niet wist: Google beschouwt de laadtijd van je site al jaren als één van de rankingsfactoren. Dat wil zeggen dat snelle sites hoger in de zoekresultaten terechtkomen dan langzame. De snelheid van je webshop is dus niet alleen belangrijk voor de ervaring die je klanten hebben, maar ook voor je vindbaarheid.
Presteert jouw webshop snel genoeg?
Als eigenaar van een webwinkel is het goed om je bewust te zijn van de snelheidservaring die je bezoekers hebben. Om te beginnen kun je zelf eens een aantal eenvoudige tests doen:
- Hoe snel laadt de homepage?
- Hoe snel laden belangrijke pagina’s zoals het artikeloverzicht, de artikeldetailpagina of het winkelmandje?
- Wat is het verschil in laadtijden tussen je pc of laptop en je mobiel op een mobiel netwerk (dus op 3G of 4G)?
Laden je pagina’s binnen één of twee seconden? Dan zit je goed; twee seconden wordt over het algemeen gezien als bovengrens voor een goede gebruikerservaring. Hoewel sneller natuurlijk altijd beter is! Maar zit je daar vaak boven? Dat is het aannemelijk dat een bepaald percentage van je klanten vroegtijdig afhaakt.
Performance test tools
Wanneer je een meer uitgebreide snelheidstest wilt doen, kun je aan de slag met online tools. Die meten exact hoe snel alle verschillende onderdelen van een pagina laden en geven vervolgens ook aanbevelingen om zaken te verbeteren. Veelal zijn de aanbevelingen technisch van aard en vooral bedoeld voor je webdeveloper, maar het is zeker interessant om hier zelf als webshopeigenaar ook eens naar te kijken.
Google PageSpeed Insights
[[img_1 rgt 320 pop]]Google’s eigen tool om laadtijden te testen is PageSpeed Insights. De resultaten worden weergegeven middels een puntensysteem waarbij je alles boven de 75 punten als prima kunt beschouwen en alles boven de 90 als fantastisch. De tool geeft een waardering voor zowel desktop als voor mobiel, wat erg handig is. De resultaten van PageSpeed Insights behoeven vaak wel enige interpretatie: Zo is levert ironisch gezien het gebruik van Google’s eigen Google Analytics en Google Fonts al meteen enkele strafpunten op, terwijl een serieuze webshop daar vaak toch niet zonder kan. Een leuk detail is dat de tool ook aangeeft wat je allemaal ‘al goed doet’. Altijd leuk om te vernemen :-)
Gtmetrix
Net als bij PageSpeed Insights hoef je bij Gtmetrix.com enkel je domeinnaam in te voeren om een redelijk uitgebreid rapport te verkrijgen. Interessant is dat deze tool naast een rapportcijfer (via het Amerikaanse systeem van A tot F) ook aangeeft dat je webshop bijvoorbeeld sneller is dan 80% van alle andere websites.
WebPagetest
Net als de andere twee tools leveert WebPagetest.org een mooi rapport met aanbevelingen en reeds gevonden optimalisaties. WebPagetest geeft echter ook de mogelijkheid om te testen in andere browsers en via andere servers in andere landen.
Snelheid testen via je Chrome Browser
[[img_2 rgt 320 pop]]Via je Chrome browser is het ook mogelijk om een inzicht te krijgen van de snelheid van je webshop. Ga in Chrome naar de webpagina die je wilt testen, ga naar het menu (klik op de puntjes (…) rechtsboven), ga naar 'Meer hulpprogramma’s' en kies vervolgens voor 'Hulpprogramma’s voor ontwikkelaars'. Klik nu op de tab 'Network'. Ververs vervolgens de pagina door op F5 te klikken. Je krijgt nu een watervaldiagram te zien van alle elementen die op de pagina geladen moeten worden en hoe lang dat duurt in milliseconden.
Wat is de invloed van je browser cache?
Hoe snel een pagina laadt hangt er ook vanaf of je de pagina al eens eerder bezocht hebt. Je browser bewaart namelijk een heleboel informatie van websites die je al eens eerder hebt bezocht. Denk aan plaatjes, maar ook bijvoorbeeld fonts en stylesheets. Die bestanden worden door je browser lokaal opgeslagen in de cache: Een verzamelbak met allemaal bestanden die je browser niet telkens opnieuw hoeft te downloaden, wanneer je een webpagina vaker bezoekt. Het kan flink schelen hoe snel een site laadt met of zonder gebruik van de cache.
Tip: je kunt je browser dwingen een pagina te laden zonder gebruik te maken van de cache door op Ctrl + F5 te klikken.
Wat doet Expotis om webshops zo snel mogelijk te maken?
Een heleboel! Voor Expotis is performance een fundamenteel onderdeel van het ontwerp en de ontwikkeling van iedere webshop. Wat we onder andere doen:
- Een snelle server
Onze webwinkels draaien op een eigen VPS server. Expotis webshops hebben daarom geen last van de performance problemen die je kunt hebben bij shared hosting. Bovendien wordt onze server beheerd door een professionele partij en wordt de performance voortdurend gemonitord. - Lightweight zonder externe afhankelijkheden
Het Expotis CMS en de achterliggende code waarop onze webwinkels draaien is volledig zelf ontwikkeld. Zonder gebruik te maken van externe templates, libraries of andere externe software. Hierdoor zijn we onafhankelijk gebleven van andere partijen en hebben we het systeem heel ‘lightweight’ kunnen houden. Alleen die code die van belang is voor uw webshop wordt geladen, zonder overbodige toeters en bellen. Dit in tegenstelling tot zware en complexe systemen zoals Magento, dat weliswaar zeer uitgebreid is, maar daardoor ook erg log is geworden en een flink beslag legt op de capaciteit van de server. - Nette en opgeruimde HTML, CSS en Javascript code
Elke Expotis webshop wordt door ons met zorg ontwikkeld met een zoveel mogelijk beperkte hoeveelheid HTML, CSS en Javascript code. Bovendien wordt de CSS en Javascript waar mogelijk ook nog eens gecomprimeerd en/of a-synchroon geladen, met extra snelheidswinst als resultaat. - Geoptimaliseerde cache control
We besteden aandacht aan de juiste cache-instellingen voor de verschillende onderdelen van uw webwinkel zodat de browser precies weet wanneer en hoe vaak bepaalde onderdelen opnieuw geladen moeten worden. - Geen third party extensies en externe libraries
Het is lange tijd zeer gebruikelijk geweest voor webdevelopers om diverse grote externe libraries van code te laden (zoals JQuery) om bijvoorbeeld mooie animaties of sliders mogelijk te maken. Bij Expotis zijn we hier helemaal vanaf gestapt. Mooie animaties maken we helemaal zelf, gewoon in CSS3 en HTML5. - Geoptimaliseerde afbeeldingen
Alle afbeeldingen, logo's en icoontjes worden zoveel mogelijk geoptimaliseerd qua bestandsgrootte. Waar mogelijk combineren we afbeeldingen tot zogenaamde sprites (een techniek waarbij meerdere afbeeldingen gecombineerd worden tot één afbeelding). Wanneer u zelf afbeeldingen uploadt middels het CMS worden deze achter de schermen direct gecomprimeerd en teruggebracht tot de ideale afmetingen.
Wat kun je zelf doen om je webshop sneller te maken?
Afbeeldingen zijn over het algemeen de meest bepalende factor in de laadtijd van je webwinkel. Natuurlijk zijn afbeeldingen ontzettend belangrijk en een webshop zonder mooie grote afbeeldingen van je artikelen is ondenkbaar. Maar je kunt wel rekening houden met het volgende:
- Beperk het aantal afbeeldingen
Door bijvoorbeeld op de homepage het aantal afbeeldingen in je slideshow beperkt te houden. Meer is niet altijd beter. Bedenk dat vooral grote afbeeldingen, zoals in een slideshow, ook een flink grotere bestandsgrootte hebben en daarom verantwoordelijk zijn voor aanzienlijk deel van de totale laadtijd van je homepage. Maar ook op alle andere pagina’s van je site is het een goed idee om te kijken of er geen overkill is van het aantal afbeeldingen - Zorg voor het juiste bestandsformaat en de juiste compressie
Voor foto’s geldt vrijwel altijd dat het beter is om ze op te slaan als een JPG dan als een PNG. Dit komt omdat via het JPG formaat foto's met flinke compressie opgeslagen kunnen worden. Zie ook mijn blog Hoe zorg je voor perfecte productfoto’s met meer informatie hierover. Korte gezegd: sla je artikelfoto's op als JPG met een kwaliteitsinstelling ergens tussen de 70 en 80. Dit levert een flinke afname in de bestandsgrootte op terwijl de kwaliteit nog altijd heel redelijk is.
Voor iconen of logo’s (met meer egale vlakken en een beperkt aantal kleuren) is opslaan als GIF of als PNG juist weer verstandiger. Dit komt omdat je bij GIF, maar ook bij PNG wanneer je daarvoor kiest, de bestandsgrootte flink kunt beperken door te werken met minder kleuren. En anders dan bij JPG heeft een GIF of PNG bestand geen last van JPG-artefacten: lelijke rafelige of ‘smerige’ randen rondom scherpe lijnen of vlakken die bij JPG compressie kunnen ontstaan. Die artefacten zijn minder zichtbaar en dus minder een probleem bij een foto, maar zijn vaak wel storend bij logo’s of icoontjes met scherpe lijnen en egale vlakken. Kies in die gevallen dus voor PNG of GIF, maar beperk het aantal kleuren: hoe minder kleuren noodzakelijk zijn, hoe kleiner de uiteindelijke bestandsgrootte. - Beperk het aantal Third Party add-ons en widgets
Al die leuke toevoegingen voor je site zoals social media buttons van AddThis, pixels van Facebook, widgets met klantbeoordelingen van de FeedbackCompany, chatvensters van LiveChat en tracking scripts van Hotjar kunnen natuurlijk op zichzelf allemaal heel handig zijn. Maar ze zorgen er ook voor dat je site langzamer laadt, zeker wanneer je er meerdere tegelijk gebruikt. Het is goed om je hier bewust van te zijn. Overleg eens met je webbouwer welke add-ons echt van belang zijn en welke misschien beter uitgeschakeld of verwijderd kunnen worden.
Tip: via de online tool Optimizilla.com kun je heel handig JPG en PNG bestanden optimaliseren en flink verkleinen in bestandsgrootte.
Tot slot: elke webshop is altijd een compromis
Na al het voorgaande zal het belang van een snelle webshop duidelijk zijn. Maar snelheid gaat natuurlijk niet voor alles. Het is vrij eenvoudig om de allersnelste webwinkel ter wereld te ontwikkelen. Dat is er eentje zonder afbeeldingen, zonder mooie lettertypen, zonder design en verder alleen platte tekst in 'Times new roman'... Tsja, dat is natuurlijk ook weer niet wat de klant zal waarderen. Elke webshop is dus een compromis tussen diverse aspecten waarbij performance er één van is, maar design, styling, functionaliteit allemaal minstens net zo belangrijk zijn. Wij blijven ons inzetten om dat ideale compromis te bereiken!
