Verbeter in vier stappen de performance van je Magento 2 shop

Het aantal online verkopen neemt dit jaar, mede veroorzaakt door het coronavirus, explosief toe. Aangezien steeds meer bedrijven e-commerce omarmen, is het online productaanbod groter dan ooit. Om je online te kunnen onderscheiden van het groeiende aantal concurrenten, is het meer dan ooit van belang dat je shop optimaal presteert.

In dit gastblog vertelt onze Hypernode Certified partner Gerrits e-commerce over de vier stappen die zij hebben gedefinieerd om de maximale performance uit je Magento 2 webshop te halen. Deze optimalisaties lopen in complexiteit uiteen van eenvoudige aanpassingen om snel verbeteringen te zien tot technische wijzigingen die het maximale uit iedere Magento 2 shop halen.

Wat is performance?

Performance is een veelvoorkomend begrip dat meerdere betekenissen kan hebben, daarom is het belangrijk deze eerst te definiëren. We maken onderscheid tussen twee soorten performance: PageSpeed performance en gevoelsmatige performance. Hoewel deze twee veel overlap hebben, is het belangrijk het onderscheid te kennen.

• PageSpeed performance is de score die Google toekent aan een pagina van je webshop en bepaalt voor een gedeelte de pagerank die aan een webshop wordt toebedeeld (gemeten in een tool als Google PageSpeed Insights). Bij twee vergelijkbare webshops zal Google de shop met de hoogste score voorrang geven. Google herziet deze metingen regelmatig dus het is belangrijk om je score goed in de gaten te houden.
• Gevoelsmatige performance is de snelheid die een klant ervaart tijdens een bezoek aan een webshop. Google gebruikt haar meting van gevoelsmatige performance als één van de metrieken om de PageSpeed score te bepalen. Bedenk je wel: Google is niet perfect. Een gevoelsmatig snelle webshop kan in verhouding een slechte Google PageSpeed score hebben.

[split /]

De invloed van budget op de performance van je shop

Het is theoretisch mogelijk om elke pagina direct te laten laden en een PageSpeed score van 100 te halen, maar dan zal je een behoorlijke investering moeten doen. Hoe meer geld je investeert in developmenttijd en de benodigde features, hoe hoger je PageSpeed score zal zijn.
Het is belangrijk om de juiste balans te vinden tussen de gemeten performance in Google PageSpeed, de analyse van de gevoelsmatige performance en het op basis van je budget optimaliseren van je shop.

Een interessant voorbeeld van de balans tussen deze aspecten is Coolblue. Deze online gigant heeft op haar productpagina’s een Google PageSpeed score van “slechts” 34 op mobiel en 65 op desktop. Een bewuste keuze die waarschijnlijk niet voortkomt uit een gebrek aan kennis of budget maar door gevoelsmatige performance en features te prioriteren boven het aspect van performance.

Stap 1: kies de juiste hostingpartner

De eerste stap van de Magento 2 snelheid verbeteren is het vinden van de juiste hosting als fundament voor een snelle webshop. Hypernode biedt ons niet alleen een hostingomgeving die out-of-the-box is ingericht om een Magento 2 shop zo goed mogelijk te laten draaien, maar ook de tools en support die wij nodig hebben om de perfecte balans in performance te vinden voor al onze webshops.

De enige keus die wij op projectniveau nog moeten maken heeft betrekking op het meest geschikte hostingpakket. Zelfs daar hoeven we ons zelden zorgen over te maken omdat Hypernode het gemakkelijk maakt om op ieder moment een pakket up- of down te graden. De combinatie van tools op de Hypernode en Magereport Premium, biedt ons de handvatten om eenvoudig te bepalen of een situatie daar ook daadwerkelijk om vraagt. Wanneer we zien dat er sprake was van piekdrukte, kunnen we na een paar dagen de desbetreffende shop weer downgraden en onze klanten betalen slechts wat zij hebben gebruikt.

Belangrijk: om alle stappen in deze gastblog goed te kunnen volgen, is het van belang om een hostingomgeving te hebben met minimaal Redis, Varnish en Blackfire. Een afbeeldingenoptimalisator is een pré. Hypernode biedt deze tool standaard op haar platform aan.

Stap 2: analyseer en optimaliseer je Magento installatie

Een standaard “kale” Magento 2 installatie laadt honderden Javascript bestanden, een handje vol CSS-bestanden en vaak tientallen afbeeldingen in. Het kost tijd om al die bestanden te downloaden, te initialiseren en weer te geven. Elke extra plugin, module of maatwerk toevoeging vergroot dit en dat alles is van invloed op de performance.

In de meeste gevallen kunnen een aantal simpele tweaks in Magento 2 tot grote verbeteringen leiden.

In deze stap van het optimalisatieproces komt Google PageSpeed (en haar zusterproject Google Lighthouse) aan bod. Deze tools helpen ons namelijk om op te sporen welke afbeeldingen groter zijn dan nodig en welke Javascripts onterecht worden ingeladen. Daarnaast geven zij inzicht in de impact van de aangebrachte wijzigingen op de performance. Breng je veranderingen aan? Zorg dan voor een aantal voor- en nametingen om een goed beeld te krijgen van de verbeteringen.

Zorg dat Magento en bijbehorende modules up-to-date zijn

Elke nieuwe versie van Magento betekent in de meeste gevallen een verbetering in performance. De grootte van deze verbetering verschilt per update en hoewel dit blog zich focust op de performance van de webshop aan de voorkant, worden ook aan de achterkant zaken als de admin omgeving en bijbehorende processen verbeterd en versneld. Wanneer de back-end van je installatie snel is, zal er meer ruimte op de server beschikbaar zijn voor je bezoekers.

Schakel onnodige modules uit

In iedere Magento installatie zitten standaard modules en features van Magento of derde partijen die niet persé noodzakelijk zijn. Wanneer je deze functies niet of nauwelijks gebruikt, kun je kijken of het uitschakelen ervan leidt tot een verbeterde performance. Mis je de functionaliteit van de module of feature niet? Schakel deze dan standaard uit.

Configureer Magento 2 volgens best practices

Magento’s documentatie bevat een hele sectie over best practices voor optimale performance. De meeste zaken in deze documentatie zullen in de volgende paragrafen ter sprake komen. Echter, we kunnen je Magento configuratie wel alvast optimaal volgens deze documentatie van Magento configureren. Er zijn wat ons betreft wel wat op- en aanmerkingen op deze documentatie:

• Een valkuil is de paragraaf over ‘Client side optimization settings’. Deze instellingen kunnen namelijk alleen aangepast worden via de developer mode of via de command line. Het activeren van de instellingen (zoals beschreven in de tabel) levert wat ons betreft een slechtere performance.
• Het activeren van Javascript Bundling in een standaard Magento installatie heeft niet onze voorkeur. De implementatie van bundling zoals bedacht door Magento zelf is op zijn best een fallback en realistisch gezien niet heel goed. Voor de opties merge CSS, merge JS, en Minify HTML raden wij aan om te experimenteren. Afhankelijk van je hosting en je shop kan dit een goed of juist slecht effect hebben op de overall performance.
• Wij raden aan om de Minify CSS en Minify JS instellingen te activeren. Omdat de webshop moet worden gemeten in Production modus, adviseren wij om deze modus pas te activeren nadat deze instellingen zijn aangepast. Zorg er altijd voor dat je de performance van je shop voor en na de wijzigingen vergelijkt.

Optimaliseer de afbeeldingen in je shop

Afbeeldingen maken een webpagina aantrekkelijk maar kunnen tegelijkertijd ook de grootste vertragende factor zijn. De bestandsgrootte van afbeeldingen is vaak veel groter dan nodig. Een goede afbeelding-optimalisatietool kan afbeeldingen tot wel 80% kleiner maken zonder zichtbaar verschil in kwaliteit. Dit betekent automatisch dat de bezoeker 80% minder data hoeft te downloaden waardoor het laden een stuk sneller zal gaan. Daarnaast heeft het optimaliseren van afbeeldingen als bijkomend voordeel dat de schijfruimte op de server minder benut wordt, waardoor je misschien shop in het uiterste geval op een kleiner hostingpakket kan draaien.

Natuurlijk is deze 80% een best case scenario; de daadwerkelijke besparing hangt van een groot aantal factoren af zoals het soort afbeeldingen dat gebruikt wordt (sommige afbeeldingen kunnen makkelijker gecomprimeerd worden dan andere) en de mate van compressie die er op de afbeeldingen zit.

Het verkleinen van afbeeldingen kan handmatig door gebruik van afbeeldingen met een kleine bestandsgrootte, maar je kunt er ook tools voor gebruiken, zoals de hypernode-image-optimizer. Daarnaast zou je ook voor een ander formaat kunnen kiezen. Veruit de meeste afbeeldingen die op dit moment op het web worden gebruikt zijn JPEG of PNG-afbeeldingen. Google heeft sinds 2010 haar eigen WebP, welke beelden met deze compressies gemiddeld 42% kleiner opslaat. Belangrijk detail: Internet Explorer ondersteunt WebP niet en het is nog niet mogelijk om WebP zonder extra modulen up te loaden in Magento 2. Onze verwachting is dat support voor WebP afbeeldingen gaat groeien.

Stap 3: maak gebruik van caching

Het cachen van een webpagina is het tijdelijk opslaan van een pagina, zodat bij een volgend paginabezoek de pagina direct ingeladen wordt. Magento 2 kent een aantal niveaus en varianten van caching. Wij adviseren om de meeste caching functies te activeren, maar hier is in sommige gevallen wat extra configuratie voor nodig.

Gelukkig heeft Hypernode uitgebreide handleidingen voor het configureren van Redis (sla de stap om Redis te configureren als Full Page Cache over, hier gebruiken wij Varnish voor) en het configureren van Varnish. Hoewel deze tools tot grote performance winst kunnen leiden, zitten er wel een aantal haken en ogen aan:

• Datalekken: Varnish en Redis slaan de resultaten van requests op en tonen deze aan de volgende bezoeker die dezelfde request doet. Wanneer een thema of plug-in slecht gebouwd is, kan het zou zijn dan een bezoeker de verkeerde data voorgeschoteld krijgt.
• Gemiste cache: om dergelijke datalekken te voorkomen kan een thema of plugin aangeven dat bepaalde blokken nooit gecached mogen worden. Gevaar hierbij is dat een verkeerde configuratie ervoor kan zorgen dat alle, of een groot gedeelte van, de pagina’s simpelweg helemaal niet gecached worden. Dat kan de performance voordelen van caching tenietdoen.
• Te weinig ruimte: alle data die gecached wordt, wordt in het geheugen van de server bewaard. Wanneer er weinig server geheugen beschikbaar is en veel data wordt gecached, zal de server vollopen en uit noodzaak geleegd moet worden.
• De eerste request: een webpagina wordt niet oneindig gecached. Je kunt bijvoorbeeld de cache van een pagina zelf legen wanneer je wijzigingen hebt aangebracht. Wanneer een pagina niet gecached is, zal de eerstvolgende bezoeker van de desbetreffende pagina dezelfde ervaring hebben als wanneer er geen cache geactiveerd is. Dit alles is te ondervangen door gebruik te maken van een cache warmer. Dit is een tool dat alle, of een subset van de, pagina’s op je website bezoekt en ervoor zorgt dat deze in de cache aanwezig zijn zonder dat een bezoeker deze eerst bezocht heeft.

Stap 4: aanpassingen in de code

Wanneer de voorgaande optimalisaties niet de gehoopte performanceverbeteringen hebben opgeleverd, is er de mogelijkheid om aanpassingen in de code te doen. Hier is echter wel vaak een specialist voor nodig. Onze ervaring is dat de meeste performanceverbeteringen wat betreft code in één van de volgende categorieën vallen:

Slecht presterende plugins en maatwerk

Plugins en maatwerk worden zelden ontwikkeld met oog voor de performance van je Magento 2 shop. Maar deze functionaliteiten kunnen wel een meerwaarde bieden. Daarom is het belangrijk om te kijken of je de performance van maatwerk kunt versnellen en of er misschien een beter werkend alternatief is.

Grote plugins

Veel plugins worden volgepropt met features en opties om er maar zeker van te zijn dat zo veel mogelijk mensen de plugin aanschaffen. Toch zien wij vaak dat ze in de praktijk maar voor slechts enkele zaken worden toegepast terwijl de plugin in zijn geheel voor iedere bezoeker moet worden ingeladen. Het is belangrijk om te kijken naar alternatieven met compact maatwerk die dezelfde functionaliteiten bevatten zonder grote impact op de performance.

Geoptimaliseerd thema

Het thema in Magento is de bron van de performance. Een webshop kan goede hosting, weinig overbodige plugins en een goede caching hebben: als het thema slecht in elkaar zit, zal de performance nooit goed zijn. Andersom geldt hetzelfde, een goed thema kan de performance impact van een slecht systeem minimaliseren.

Bij Gerrits e-commerce hebben wij daarom gekozen voor het ontwikkelen van een eigen basis-thema. Een eenvoudig thema wat dient als startpunt voor al onze projecten. Dit thema is vanuit de basis ontwikkeld op basis van performance en het is makkelijk uit te breiden. Samen met de sterke fundering die onze hostingpartner Hypernode ons biedt, kunnen wij daarmee maatwerk webshops met een sterke performance leveren.

Kom je er zelf niet helemaal uit?

Natuurlijk kun je als beheerder van een Magento 2 shop zelf veel doen om de performance te verbeteren, maar soms loop je (net als je shop) tegen limieten aan. Benieuwd of er zaken qua hosting of shop inhoudelijk verbeterd kunnen worden? Neem dan contact met ons of onze partner Gerrits e-commerce op. Wij helpen je graag!