De laadtijd van jouw webwinkel verbeteren

Written by Jelmer van der Linden on 12 maart 2015

Bij WebwinkelKeur ontvangen we regelmatig vragen omtrent zoekmachine optimalisatie (SEO). Vandaar dat we de komende weken elke week een tip gaan geven om jouw webwinkel beter te laten scoren in Google. Vorige week hebben we het over de snelheid van jouw webwinkel gehad. De snelheid van jouw webwinkel is tegenwoordig niet alleen belangrijk voor jouw bezoekers, ook Google neemt het mee als één van de factoren die de ranking van jouw webwinkel bepaalt. In dit blog gaan we in op het verbeteren van de snelheid van jouw webwinkel. Hierin behandelen we de verschillende basis parameters die hierop van invloed zijn. De basis Alhoewel de tijden van het inbellen op het internet lang vervlogen zijn, is en blijft de laadtijd van de website een belangrijke succesfactor. Juist door de opkomst van de verschillende apparaten (gadgets) waarmee mensen tegenwoordig op het internet browsen is de laadtijd - ondanks het steeds sneller wordende web - ongewijzigd belangrijk gebleven. Met tablets en smartphones kunnen mensen namelijk gemakkelijk gebruik maken van openbare netwerken - die van nature langzamer zijn omdat meer mensen hier gelijktijdig gebruik van maken (bijvoorbeeld op festivals en op het terras). Als webwinkel wilt u dan ook niet dat u consumenten kwijt raakt enkel omdat uw website langzaam laadt. Snelheid hangt in de basis af van 2 factoren. Namelijk van de snelheid van je server en de omvang van je website. Natuurlijk is dit een erg versimpeld verhaal, maar dit maakt wel duidelijk hoe je snelheid kunt optimaliseren. Het optimaliseren van je server is een complex verhaal, vandaar dat we in deze blog primair ingaan op de omvang van je webwinkel. Hierbij is het van belang om kort toe te lichten hoe het opvragen van een website werkt. Wanneer je webwinkelkeur.nl in je browser intypt, dan wordt er een verzoek verzonden naar de server van webwinkelkeur.nl, daarin wordt allereerst het index bestand opgevraagd. Dit index bestand verwijst weer naar allerlei andere bestanden zoals afbeeldingen, scripts, etc. Pas na het laden van de index kunnen deze andere bestanden ook opgevraagd worden. Om je webwinkel volledig te optimaliseren zijn er erg veel mogelijkheden, in deze blog gaan we echter in op de basis van optimalisatie. Afbeeldingen comprimeren Afbeeldingen zijn vaak grote bestanden en nemen een groot deel van de laadtijd van een webwinkel in. Het optimaliseren van afbeeldingen speelt een belangrijke factor in het verbeteren van de snelheid van de website, hierbij maak je afbeeldingen kleiner met een beperkt verlies van de kwaliteit. Alhoewel visueel beeld erg belangrijk is voor de mens - 70% van de mensheid is namelijk visueel ingesteld - hoeven afbeeldingen niet op dezelfde kwaliteit als bijvoorbeeld drukwerk op het web geplaatst te worden. Als we dit wel zouden doen dan zou een gemiddelde moderne website - die gebruik maakt van grote visuals, product foto's, etcetera - zelfs op de snelste verbinding nog sloom laden. Op het web telt dat hoe lager de bestandsgrootte van deze afbeeldingen zijn - hoe sneller de website geladen wordt. Het mooie hiervan is dat dit ook op het web kan zonder dat de kwaliteit (althans; de kwaliteit voor het oog) van de afbeeldingen aangetast wordt. Tenminste; tot bepaalde mate . De twee voornaamste afbeeldingsformaten voor het web zijn de JPG (voornamelijk gebruikt voor foto's) en de PNG (voornamelijk gebruikt voor logo's, iconen en afbeeldingen met een transparante achtergrond). Hier zijn enkele tips voor het optimaliseren van afbeeldingen voor het web:

Wanneer u een afbeelding op uw website plaatst die de ruimte inneemt van bijvoorbeeld 200x200 pixels, plaats dan ook een afbeelding van 200x200 pixels. Een veel voorkomende fout is dat er een afbeelding van 400x400 wordt geplaatst op de website die middels het CSS (content style sheet, code om de website te stylen) geschaald wordt naar 200x200 pixels. Dit neemt onnodig extra ruimte en laadtijd in beslag.
Wanneer u een afbeelding gevonden heeft die u slechts voor een gedeelte (bijvoorbeeld een vrouw in een jurk met een grote achtergrond terwijl het om de jurk in kwestie gaat) voor het een of het ander wilt gebruiken maak dan gebruik van een programma die een uitsnede hiervan maakt (in vaktaal; 'het croppen van een afbeelding'). U kunt dit bijvoorbeeld online doen met een tool zoals https://www.picresize.com/ .
Wanneer een afbeelding niet hoeft te worden bewerkt en alleen maar hoeft de worden gecomprimeerd raden we de comprimeertools van websiteplanet (voor JPG en PNG) en tinypng (voor WEBP, JPG en PNG) aan.
Wanneer u gebruik maakt van bepaalde software met de functie 'save for web' - maak hier dan gebruik van. Deze optimaliseert de grootte van de afbeelding voor u.

Aantal bestanden beperken Naast het kleiner maken van bestanden, is het ook zaak om het aantal bestanden dat geladen wordt te beperken. Hiermee is erg veel snelheid te winnen, omdat het niet alleen de omvang van de website verkleint, maar er ook minder connecties nodig zijn om de bestanden binnen te halen. Voor elk bestand moet de browser namelijk een verzoek naar de webwinkel versturen en dat kost tijd.

Plaats geen onnodige inhoud/afbeeldingen. Bekijk dus of het bijvoorbeeld nodig is om op je homepagina of categorie pagina 100 producten te tonen, of dat 20 producten ook voldoende zijn.
Beperk het aantal externe bestanden. Elementen als bijvoorbeeld een Facebook like knop, statistieken teller of Twitter box zijn wellicht leuk, maar maak altijd een afweging of deze ook van meerwaarde zijn. Ontvangt een product vrijwel nooit een like? Dan kun je beter de Facebook knop verwijderen. Bekijk je nooit bepaalde statistieken? Waarom deze dan meten? Het is goed om je bewust te zijn dat deze elementen wel de laadtijd van je webwinkel verhogen.
Voeg bestanden samen. Vorige week bekeken we al hoe je de snelheid van jouw webwinkel kan meten . Hierin kun je ook zien welke bestanden er allemaal geladen worden. Zie je veel .js of .css bestanden? Dan kun je deze vaak samenvoegen tot 1 groter bestand. Zo kun je via jscompress.com verschillende javascript bestanden uploaden en samenvoegen. Hiervoor is wel enige technische kennis nodig, beschik je daar niet over? Dan is het wellicht interessant om eenmalig iemand je CSS en JS bestanden te laten optimaliseren.

Ca(t)ching the ~~fish~~ website Bij het laden van een website worden op veel pagina's dezelfde bestanden gebruikt. Denk daarbij bijvoorbeeld aan het logo van uw webwinkel of een (extern) javascript bestand. Het is niet nodig om deze bestanden telkens opnieuw op te halen, ze zullen immers niet elke minuut veranderen. Liever sla je de resultaten tijdelijk op en ververs je deze periodiek. Dit noemt men de cache van de browser. De cache slaat de resultaten van het eerste bezoek naar de website op naar statische bestanden die hierna niet meer telkens geladen hoeven te worden. Na het eerste bezoek aan de website hoeven dus veel bestanden niet opnieuw geladen te worden. Het resultaat hiervan is voor de bezoeker hetzelfde, echter laden de pagina's van de website veel sneller. [caption id="attachment_1232" align="alignnone" width="600"]

Oude data versus nieuwe data (cache)[/caption] Caching is niet geschikt voor alle bestanden, zo zijn er onderdelen van je website die voortdurend wijzigen. Denk bijvoorbeeld aan een nieuwspagina. Op je server is te configureren of bestanden gewaagde worden en hoe vaak deze ververst moeten worden. In de meeste gevallen is het veilig om afbeeldingen en javascript minimaal 24 uur te cachen. In samenspraak met een webbeheerder kun je kijken welke bestanden geschikt zijn om te cachen en kun je je website eenmalig zo configureren dat dit optimaal geregeld is. Beschik je bijvoorbeeld over een website die elke minuut nieuwe content heeft (bijvoorbeeld een nu.nl ) dan is het onwenselijk om de voorpagina te cachen. Voor externe bestanden als het logo en script kan dit echter wel heel goed. Tip:

In veel webwinkelsoftware/systemen is het zelfs mogelijk om - middels een vinkje - na het plaatsen van nieuwe content de cache van bezoekers bij een nieuw bezoek aan de website te refreshen. De bezoekers beschikken dan vervolgens over de nieuwe content op de website welke na het binnen halen hiervan weer gecached wordt.

Volgende keer Dit keer zijn we ingegaan op het verbeteren van de snelheid van de website. Volgende week gaan we in op SSL. [Edit 22-02-2023]