Tien tips voor een snellere Magento webshop

De snelste manier om online meer geld te verdienen? Zorgen dat je online shop één seconde sneller geladen wordt. Naast het feit dat de conversie toeneemt heeft een snellere shop ook een lagere bounce rate, een hogere orderwaarde en bezoekers blijven langer hangen op de pagina. Onderstaande afbeelding uit een presentatie van Kristian Sköld, tijdens Digital Marketing Live, geeft het effect van een gemiddelde laadtijd die 1 seconde sneller is goed weer.

Daarnaast neemt Google de laadtijden van een website ook mee in zijn kwaliteitsbeoordeling. Met andere woorden, een snellere shop komt hoger in Google (zowel in paid als in organische zoekresultaten). Maar hoe zorg je nou dat je shop een seconde sneller laadt? In het kader van onze themaweken snelheid wilden we hier graag dieper op in gaan. Daarom hebben we ons uitgebreide netwerk van Magento specialisten, die er dagelijks mee werken, benaderd en gevraagd naar hun ultieme Magento sneheidstip. Dit artikel geeft de samenvatting van waardevolle gebruikerservaringen van deze experts.

Tip 1: Kies een goede webserver

Moeilijkheidsgraad** | Impact**

Via LinkedIn kreeg ik deze tip, en werkend voor een webhoster kan ik alleen maar beamen dat een goede webserver absoluut een verschil kan maken. ‘One thing to consider is the Magento environment, e.g. tuning the php, the web server (favor nginx over Apache), and MySQL.’ Nginx is relatief nieuw en is ten opzichte van Apache minder complex. Nginx is innovatiever en minder zwaar en heeft daardoor ook minder RAM geheugen nodig. Nginx wordt wereldwijd ook steeds meer gebruikt, zie netcraft.com.

Een webhostingpakket met slimme technologie, toegespitst op je CMS en ruime specs zal je site zeker sneller maken. Maar als je site niet goed in elkaar zit, dan zal ook snelle hosting je site niet snel maken. Het omgekeerde is wel waar: bij een langzame webhoster is een site wel altijd langzaam.

Tip 2: Optimaliseer afbeeldingen

Moeilijkheidsgraad* | Impact***

Als je bedenkt dat gemiddeld 75 procent van een website uit afbeeldingen bestaat, waarvan ook nog eens veel afbeeldingen rechtstreeks vanuit Photoshop geplaatst worden en erg zwaar zijn, is er op dat vlak veel snelheidswinst te behalen. Er zijn verschillende tools en extensies die je hierbij kunnen helpen zoals ReSmsuh.it, OptiPNG en Imagemagick. In enkele gevallen biedt je webhoster ook een image optimizer aan.

Subtip 1: Daniel Hukkelhoven van MadebyMouses maakt veel gebruik van CSS Image Sprites. ‘Door gebruik te maken van CSS Image Sprites, kan je verschillende losse afbeeldingen samenvoegen tot één grote afbeelding. Dit is minder zwaar waardoor de pagina sneller geladen wordt.’

Subtip 2: Nog een tip van Daniel Hukkelhoven is om zoveel mogelijk dezelfde formaten van een afbeelding te gebruiken. ‘Vaak zie je dat er meerdere dezelfde afbeeldingen zijn van één product, maar dan net een paar pixels groter of kleiner. Hierdoor worden er meerdere thumbnails van hetzelfde product gegenereerd. Door over de gehele webshop zo veel mogelijk dezelfde formaten te gebruiken beperk je het aantal varianten. Dit bevordert de laadtijden en zorgt ervoor dat ook de cache map met afbeelding een stuk kleiner is.’

Tip 3: Combineer Javascript en CSS

Moeilijkheidsgraad* | Impact**

Deze tip hebben we meerdere malen voorbij zien komen. Via de backend van Magento kan je Javascript en CSS bestanden combineren. Hierdoor worden er minder bestanden ingeladen waardoor de laadtijd van een pagina verkort wordt. Er zijn goedwerkende plugins die dit eenvoudig voor je kunnen oplossen zoals Fooman Speedster en FishPig Opti.

Tip 4: Gebruik van externe modules

Moeilijkheidsgraad** | Impact*/**/***

Er zijn ook veel tips binnengekomen over het gebruik van externe modules. Martijn Stromphorst van 42functions geeft aan dat het gebruik van externe modules een flinke tijdsbesparing kan opleveren, ‘je hoeft immers niet zelf deze functionaliteiten te ontwikkelen. Het nadeel van deze modules is echter dat ze vaak op het gebied van performance van lage kwaliteit zijn.’ Om redelijk eenvoudig inzichtelijk te krijgen welke modules de veroorzaker zijn van een slechte performance kan je de Magento AOE Profiler module of natuurlijk New Relic gebruiken.

Subtip 1: Gebruik niet teveel externe modules. Nils Schuil van Wezz e-Commerce: ‘Hoe meer modules je gebruikt, hoe groter de kans is dat de webshop langzamer gaat laden. Dit komt omdat elke extra module vaak zorgt voor extra belasting op de database en processor van de webserver. Wees dus zeer selectief in het installeren van Magento modules.”

Subtip 2: ‘Het klinkt misschien logisch maar bij veel Magento shops staan nog oude modules ingeschakeld die niet meer gebruikt worden. Deze kunnen onnodig de performance van de webshop beïnvloeden en kan je het beste uitschakelen door in de map /app/etc/modules het .xml bestand op te zoeken en deze te verplaatsen naar een tijdelijke map. Als dit na het legen van de cache geen problemen geeft kan je de module eventueel volledig verwijderen.‘ Aldus Daniel Hukkelhoven

Tip 5: Schakel Flat Catalog in

Moeilijkheidsgraad* | Impact**

Als je veel producten aanbiedt op je webshop is het handig om de Flat Product en Flat Categorie Catalog in te schakelen. Mike de Landgraaf van MDL online zegt hierover het volgende: ‘Normaliter slaat Magento product data op in veel verschillende database tabellen. Door de Flat Product en -Categorie Catalog in te schakelen wordt deze info bij elkaar verzameld in één tabel en kan deze sneller worden uitgelezen.

Dit kun je gemakkelijk zelf doen in de admin panel van Magento. Er is in het verleden wat onduidelijkheid geweest over vanaf welk aantal SKU’s het inschakelen van Flat Product Catalog zinvol is. In de blog performance toename door flat catalog in magento kun je hier meer over lezen (deze blog is 3 jaar geleden geschreven maar de inhoud is nog altijd actueel).

Tip 6: Wis logbestanden

Moeilijkheidsgraad* | Impact*

Magento houdt veel informatie bij door deze te ‘loggen’ in de database. Deze logs kunnen onder andere handig zijn bij het opsporen van problemen. Het is echter ook goed te beseffen dat logs niet automatisch verwijderd worden na bepaalde tijd, waardoor de database overvol kan raken. Mike de Landgraaf zegt daarover het volgende: ‘Te grote logs zorgen voor veel vertraging in het systeem en dit is gemakkelijk op te lossen door regelmatig de logbestanden te wissen, zowel in de database als in de /var/log map.’ Je kunt de logs op verschillende manieren legen.

Tip 7: Optimaliseer het Critical rendering path (above the fold)

Moeilijkheidsgraad*** | Impact***

Een van de redenen waarom het vaak zo lang duurt om een pagina te laden is omdat de gehele pagina, zowel het gedeelte boven de paginavouw als het gedeelte daaronder, in één keer ingeladen wordt.

Magento specialist Ray Bogman van SupportDesk: ‘Door de content boven de paginavouw (above the fold) op te bouwen in verschillende blokjes, en deze blokjes één voor één in te laden kan je de tijd die een bezoeker naar een blanco scherm moet staren minimaliseren. Dit in stapjes laten laden van de website heet Critical Rendering Path. Als dit geoptimaliseerd is kan de tijd om pagina’s te laten laden aanzienlijk verkort worden.’

Onderstaande afbeelding van developers.google.com geeft een duidelijke illustratie van wat het effect hiervan voor de bezoeker van de webshop is.

Het optimaliseren van het Critical Rendering Path is echter een complex proces waarbij er keuzes gemaakt moeten worden m.b.t. welke content de meeste relevantie heeft en welke data de marketingwaarde verhogen. Een interessant blog daarover lees je op het developers blog van Google.

Tip 8: Gebruik Varnish Cache

Moeilijkheidsgraad*** | Impact***

Een tip die je als Magento gebruiker bijna niet onbekend voor kan komen. Het gebruik van de cachingtechniek Varnish, de grootste versneller voor websites. Veel van de gevraagde Magento experts benoemen deze dan ook. Varnish staat nog voor de webserver gepositioneerd. Eerder opgevraagde content wordt zo rechtstreeks uit het geheugen geserveerd, waardoor de webserver er vaak niet eens aan te pas komt.

Het kan je dus zeker flinke snelheidswinst opleveren. Een groot nadeel voor Magento is echter dat je veel te maken hebt met dynamische content: een winkelwagentje, gepersonaliseerde informatie achter een inlog. Deze informatie kan Varnish niet cachen. Het uitsluiten van dit soort content kan vrij ingewikkeld en arbeidsintensief zijn, en hoe minder je cachet hoe minder de snelheidswinst. Deze moeilijkheid zorgt ervoor dat HHVM langzaamaan populairder wordt dan Varnish. Magento expert Jeroen Vermeulen schreef een zeer interessant artikel over: Bye bye Varnish, hello HHVM.

Tip 9: Werk met HHVM / HipHop

Moeilijkheidsgraad** | Impact***

Arnold Westerhof van Webwijs geeft de tip waarmee je gigantische snelheidswinst kan bereiken: HHVM, ook wel HipHop genoemd. HHVM is een gloednieuwe techniek, ontwikkeld door Facebook.

Aangezien Facebook vol met PHP scripts zit was het noodzakelijk om deze sneller te kunnen uitvoeren. De kracht van HHVM is dat het de PHP code in efficiëntere blokken machinecode vertaalt. Hierdoor kan de processor die het uiteindelijk moet uitvoeren sneller pagina’s genereren en staan deze ook weer sneller klaar voor een nieuwe bezoeker. Dubbele winst dus.

Op dit moment is de developerscommunity nog volop bezig om HipHop verder te ontwikkelen. Het werkt goed met Magento, maar dat geldt nog niet voor alle extensies en modules. De verwachting is wel dat HHVM steeds meer verweven wordt in de Magento wereld.

Tip 10: Maak gebruik van een Content Delivery Network (CDN)

Moeilijkheidsgraad* | Impact*/**/***

Een CDN (Content Delivery Network) is een systeem waarbij meerdere servers met dezelfde content op diverse locaties wereldwijd geplaatst zijn. Wanneer een bezoeker content van de site wil ophalen, wordt dit opgehaald van de server die het dichtst bij de locatie van de gebruiker staat. Dit kan een flinke snelheidswinst opleveren als je site veel internationale bezoekers trekt. Als je site vooral bezoekers uit Nederland trekt heeft het gebruik van een CDN weinig toegevoegde waarde.

Arnold Westerhof raadt de bekende CDN leverancier Cloudflare aan. “Cloudflare heeft nog handige functionaliteiten zoals Rocket Loader die de Javascript-bestanden asynchroon inlaadt. Daarbij scheelt het bandbreedte en is de website beter beveiligd tegen DDOS aanvallen.”

Tot zover de tips die we hebben gekregen van de Magento experts. Het zijn zeker geen absolute waarheden, maar ervaringen uit de praktijk. Daarnaast zijn er natuurlijk nog veel meer opties om je Magento shop te versnellen, dit is een greep uit de mogelijkheden. Dus heb je aanvullingen op deze tips, of heb je zelf nog handige tips die hier niet benoemd worden? Kom maar op!

*) Dit artikel is tevens gepubliceerd op het blog van Byte.nl.