Webshops
Door Michel Tel in Webshops

Zelf de Snelheid van je Webshop Verhogen? Verklein afbeeldingen…

Google heeft aangegeven dat de snelheid van pagina’s een rankingfactor is geworden. In een eerder artikel heb ik al uitgelegd, hoe je de snelheid van je webshop meet met Google Site Speed. Door een toename van het aantal bezoekers dat via een mobiel een webshop bezoekt, is ook de aandacht voor de laadsnelheid van webshops gegroeid. De snelheid van de pagina’s hangt nauw samen met de beleving van bezoekers. Worden de pagina’s van je webshop snel geladen, dan is de kans groot dat je blije bezoekers hebt. Bezoekers die vaker terugkomen en je producten kopen.

Je kunt zelf en eenvoudig de snelheid van je pagina’s stap voor stap verbeteren. Begin als eerste bij het optimaliseren van afbeeldingen.

Bij de snelheid van een pagina wordt met name gekeken naar het aantal HTTP-requests. De browser laadt één voor één de afbeeldingen binnen je webshop. De pagina’s van je webshop laden sneller, wanneer er minder HTTP-requests zijn. Kortom, minder afbeeldingen.

Maak gebruik van CSS sprites

Je kunt het aantal requests van de browser verminderen door achtergrondafbeeldingen samen te voegen in één afbeelding. Maak hierbij gebruik van zogenaamde CSS Sprites. De afbeeldingen hoeven niet meer afzonderlijk te worden geladen, maar worden geladen binnen één afbeelding.

Wil je zelf aan de slag en CSS Sprites gaan maken voor je webshop? De tool SpriteMe kan je helpen om CSS Sprites te maken. De tool verzamelt alle achtergrondafbeeldingen en voegt deze samen in één afbeelding. Vervolgens kunnen je deze sprite gaan positioneren binnen de CSS van je webshop met behulp van bijvoorbeeld Sprite Cow.

Hieronder zie je een  CSS Sprite die ik als voorbeeld heb gemaakt voor de webshop van Bol.com:

Css sprite afbeelding

Je voegt alleen statische (achtergrond)afbeeldingen samen in een Sprite. De productafbeeldingen voeg je niet samen in een Sprite, omdat dit vaak heel veel afbeeldingen zijn, de afbeeldingen afzonderlijk beheerbaar zijn en bijvoorbeeld per seizoen veranderen. Om de snelheid van je webshop te verhogen is het belangrijk om ook de productafbeeldingen van je webshop te optimaliseren voor snelheid.

Productafbeeldingen verkleinen

Zorg er altijd voor dat je de productafbeeldingen zo klein mogelijk opslaat (een min. aantal kb’s) met behoudt van de kwaliteit en opgeslagen op het juiste formaat. Verklein de afbeeldingen niet binnen de WYSIWYG-editor van de eCommerce-software of in het CSS-bestand, maar maak de afbeeldingen binnen Photoshop gelijk op het juiste formaat. De gratis tool van Yahoo! (Smush.it) kan je vervolgens helpen om makkelijk het aantal kb’s van productafbeeldingen te verlagen.

Pagination voor het tonen van producten

Als je een productoverzichtspagina hebt met bijvoorbeeld enkele honderden productfoto’s dan kun je deze producten verdelen over verschillende pagina’s door gebruik te maken van pagination.

Het grote nadeel van pagination is dat een bezoeker niet gelijk ziet hoeveel producten er worden aangeboden en de bezoeker moet meerdere keren klikken om alle producten te bekijken. Dit kan een nadelig effect hebben op de klantenbeleving van bezoekers binnen je webshop. Als je geen gebruik maakt van no-follow links of canonical tags dan heb je met pagination ook een grote kans op duplicated content. Dit wordt vaal vergeten door webshopeigenaren.

Kies je niet voor pagination, maar plaats je alle producten op één pagina onder elkaar dan heb je grote kans dat je pagina langzaam laadt. Dit wil je ook niet, want zoals je waarschijnlijk weet, hebben langzaam ladende pagina’s een negatieve invloed op de positie van pagina’s in Google. Google kijkt namelijk hoe lang het duurt, voordat de gehele pagina geladen is en beoordeelt de pagina op basis van o.a. de snelheid.

Wil je toch alle producten op één pagina? Kies dan voor Lazy loading. Alle afbeeldingen onder de vouw (fold) worden pas geladen, wanneer een bezoeker naar beneden scrolt.

Lazy loading van afbeeldingen

Lazy loading helpt je bij het sneller maken van je webshop en het blijer maken van bezoekers. Het is een techniek die nog niet veel wordt toegepast binnen webshops. Lazy loading zorgt er voor dat pagina’s sneller geladen worden, zonder dat alle content eerst geladen wordt. Sommige nieuwe browsers maken standaard al gebruik van deze techniek.

Door gebruik te maken van Lazy loading worden productafbeeldingen pas ingeladen, wanneer ze écht nodig zijn en de bezoeker ze ook daadwerkelijk kan zien. Dit gebeurt vaak als je webshop lange pagina’s heeft met veel productafbeeldingen en de bezoeker naar beneden scrolt.

Zalando Lazy Loading

De webshop van Zalando maakt bijvoorbeeld gebruik van Lazy loading. De pagina’s laden snel en als je naar beneden scrolt, worden de afbeeldingen ingeladen. Lazy loading werkt helaas nog niet goed voor Magento webshops, omdat er gebruik wordt gemaakt van jQuery om de afbeeldingen dynamisch in te laden. Hopelijk wordt Lazy loading binnen korte tijd ook beschikbaar voor Magento.

Wil je weten hoe snel de pagina’s van jouw webshops laden? Maak dan gebruik van de gratis online tool van GTMetrix. Deze tool laat zien, hoe snel je pagina’s geladen worden, in welke volgorde en waar verbeterpunten liggen. Heel erg handig!

Een van de grote nadelen van Lazy loading is dat de content die later geladen niet wordt geïndexeerd door Google. Gebruik Lazy loading dus alleen voor productafbeeldingen en niet voor bijvoorbeeld teksten op de pagina’s van je webshop. Deze teksten worden niet door Google gezien, waardoor je voor bepaalde pagina’s een hoge positie in Google wel kunt vergeten.

Een ander nadeel is dat pagina’s met Lazy loading niet goed getoond worden met Google Instant Preview.

Zie hieronder een voorbeeld van Google Instant Preview van een pagina van Zalando.nl, waarbij duidelijk te zien is dat alle afbeeldingen nog niet geladen zijn, voordat Google een screenshot heeft gemaakt.

Google Instant Preview

Conclusie

In dit artikel heb ik je enkele belangrijk tips gegeven om de pagespeed van je webshop te verhogen, waarmee je gelijk aan de slag kan. Als je deze tips toepast, heb je de eerste stap gemaakt om je webshop te versnellen. Denk, voordat je afbeeldingen plaatst binnen je webshop, goed na op welke manier(en) je de afbeeldingen kunt optimaliseren en op welke manier je de laadsnelheid van afbeeldingen kunt verbeteren.

Gebruik de volgende gratis tools om de snelheid van je webshop te meten en verbeteren:

– Maak zelf CSS Sprites met SpriteMe
– CSS Sprites op plaatsen binnen je CSS-bestand met Sprite Cow.
– Afbeeldingen verkleinen (aantal kb’s) met Smush.It
– Meet de laadsnelheid van pagina’s met GTmetrix.

Succes met het verbeteren van je webshop! Wil je weten hoe via Google Site Speed de snelheid van je webshop meet, lees dan het artikel ‘Google Site Speed Testing: hoe snel is je webshop?