Een trage webshop is niet meer van deze tijd. Uit vele onderzoeken is gebleken dat hoe trager de shop hoe lager de conversie. En ook zoekmachines maar met name Google straft dit steeds harder af. Kortom, alle reden om voor ultieme snelheidsprestaties te gaan. Zeker wanneer er veel maatwerk aan de webshop wordt toegevoegd en de onderhoud baarheid van de code hiermee eveneens in het geding komt kan zowel de frontend als de backend soms traag aanvoelen. Zowel de bezoeker, de beheerder en de developer zitten hier natuurlijk niet op te wachten en daarom hebben wij deze uitgebreide gids geschreven om de snelheid van je Magento 2 webshop flink te verbeteren.
Deze handleiding is bedoeld om je Magento 2 webshop razendsnel te krijgen en focust zich op de gehele applicatie. Met als doel niet alleen een snelle frontend, maar ook een snelle backend te krijgen. Wij zijn geboren vanuit een Magento ontwikkelbureau en hebben jarenlang shops gebouwd, onderhouden en doorontwikkeld. Onze belangrijkste kernwaarde is naast security altijd performance geweest.
Deze kennis stellen wij graag beschikbaar om jou een nog snellere Magento webshop te bezorgen.
Hulp nodig?
Deze gids is zo opgezet dat je veel zelf kunt doen en waar nodig eenvoudig hulp van een developer kunt inschakelen.
Magento snelheidsoptimalisaties die aan bod komen
Uiteindelijk behandelen we 14 optimalisatiepunten:
- 1. Update naar de laatste Magento 2 versie
- 2. Schakel Lazy Loading voor afbeeldingen in
- 3. Gebruik een Content Delivery Network (CDN)
- 4. Caching Options
- 5. Verwijder ongebruikte plugins
- 6. Kies razendsnelle webhosting
- 7. Maak gebruik van een snelle zoekfunctionaliteit
- 8. Maak gebruik van Varnish Cache
- 9. Update Indexes
- 10. Maak gebruik van GZIP Compression
- 11. Maak gebruik van HTTP/2
- 12. Gebruik nooit JS-combining
- 13. Draai je shop in production modus
- 14. Optimaliseer je CSS
Laten we beginnen 😃.
Test de snelheid van je website/webshop
Voordat je start is het goed om een nulmeting te doen. Alleen dan weet je immers of de optimalisaties die je doorvoert ook daadwerkelijk effect hebben. Sites om de snelheid van je website te meten zijn bijvoorbeeld:
Deze en meer tools leggen we uit in dit blogartikel over het testen van de snelheid van je website. Het is hierbij belangrijk om een locatie te selecteren die zo dicht mogelijk bij de locatie van je datacenter / hosting provider zit. Dit schetst het meest realistische beeld van je resultaten.
Een van de belangrijkste metrics hierbij is de Time To First Byte (TTFB). Dit betreft een meetinstrument waarmee de reactietijd van de webserver inzichtelijk wordt gemaakt. Feitelijk gezien zegt hij dus hoeveel tijd er nodig is om het eerste datapakket van de webserver terug te ontvangen. Hoe lager de tijd hoe beter dit is. Er zijn verschillende manieren om de TTFB verder te verlagen. Zo kun je hier onder andere met Magento geoptimaliseerde hosting winst mee behalen maar zijn er ook talloze opties om dit vanuit de applicatie aan te pakken. Hiervoor heb je een goede Magento developer nodig. Uiteraard adviseren wij je om op alle metrics zo goed mogelijk te scoren. Het is dan ook raadzaam hier tijd aan te besteden. Te beginnen door een goed beeld te vormen. Doe dit eventueel in een Google Spreadsheet zodat je een goed vergelijk kunt maken nadat je snelheid optimalisaties uit dit artikel hebt doorgevoerd.
1. Update naar de laatste Magento 2 versie
Wanneer je op een oudere versie van Magento 2 draait, kan het zijn dat je nog niet profiteert van de optimalisaties die Magento en/of de community hebben doorgevoerd in de laatst uitgebrachte updates. Er wordt veel aandacht besteed aan de snelheid van Magento. Hier zitten dan ook vaak performance optimalisaties in die zowel frontend als backend een directe snelheidswinst opleveren. Let wel op: ga niet zomaar updaten. Magento updates verlopen over het algemeen niet vlekkeloos en zijn niet met één druk op de knop doorgevoerd. Zorg dus minimaal altijd voor een backup en test het bijvoorbeeld eerst op een testomgeving.
Het is ook goed om te beschikken over een Magento developer die waar nodig kan ondersteunen om ontstane issues snel op te lossen. Hypernode kan hierbij helpen gezien we met vele gerenommeerde bureaus samenwerken. We brengen je graag in contact om ervoor te zorgen dat je een of meerdere goede developers in kunt schakelen. Goed om hierbij te weten is dat Hypernode een audit uitvoert en alleen professionele bureaus accepteert. Als een bureau niet aan de standaarden die Hypernode vereist, kan voldoen, zal het betreffende bureau geen officiële partner van Hypernode worden. Enkele zaken die in recente updates flink zijn verbeterd:
- Response tijd van de catalog, search en advanced search pages zijn significant verbeterd
- Product pagina gallery load optimalisatie
- Verbeterde paginaweergave door uitgesteld laden en parseren van JavaScript
Alle overige optimalisaties vind je terug op de website van Magento.
2. Schakel Lazy Loading voor afbeeldingen in
Afbeeldingen hebben over het algemeen een grote impact op de snelheid van je website. Teveel afbeeldingen in één keer tegelijk in laden op een pagina heeft niet alleen een enorme impact op de snelheid, maar dus ook op je page speed scores. Een best practice voor het niet tegelijk laden van al die afbeeldingen is: Lazy Loading.
Met lazy loading zorg je ervoor dat afbeeldingen pas worden geladen als deze ook daadwerkelijk in beeld komen. Dit betekent dat de browser niet probeert om de hele pagina in één keer te laden, maar in plaats daarvan prioriteit geeft aan het laden van zichtbare inhoud. Terwijl de gebruiker naar de onderkant van de pagina schuift, wordt nieuwe inhoud onderweg geladen. Eerst toont Lazy Loading een afbeelding met een lagere resolutie of een afbeelding met een tijdelijke aanduiding, waarna deze direct wordt overgezet naar de bronafbeelding van hoge kwaliteit. Voor het gebruik van Lazy Loading kan je hulp van een developer vragen of bijvoorbeeld gebruik maken van een (gratis) extensie die dit voor je afhandelt.
3. Gebruik een Content Delivery Network (CDN)
Een content delivery network (CDN) verwijst naar een geografisch verspreide groep servers die samenwerken om een snelle levering van online content te bieden. Een CDN zorgt voor de snelle overdracht van middelen die nodig zijn voor het laden van de content zoals HTML-pagina’s, javascript-bestanden, stylesheets, afbeeldingen en video’s. (Bron: cloudflare). Een correct geconfigureerde CDN kan websites ook helpen beschermen tegen een aantal veel voorkomende kwaadaardige aanvallen, zoals DDOS-aanvallen.
Het gebruiken van een CDN helpt dus bij het verbeteren van de laadsnelheid van pagina’s van je Magento shop, terwijl het ook je bandbreedte-verbruik vermindert. Een CDN heeft het meeste effect op performance als je ook daadwerkelijk bezoekers uit diverse landen op je website krijgt. Wij zien dat veel webshops gebruik maken van de CDN die Cloudflare aanbiedt. Neem dus zeker eens een kijkje op hun website!
4. Caching Opties
Bij een snelle webshop hoort natuurlijk goed ingestelde caching opties. Een manier om dit te optimaliseren is via Nginx configuraties. Zo kan ingesteld worden hoelang de cache van bepaalde bestandtypen bewaard mag worden. Bij Hypernode staat de expire time van veel statische bestanden standaard al optimaal ingesteld.
We plaatsen binnenkort een artikel betreffende geoptimaliseerde Nginx-configuraties als een afzonderlijke gids. Heb je nu al interesse in verdere optimalisaties? Neem dan contact met ons op.
5. Verwijder ongebruikte plugins
Wanneer je webshop al een tijdje bestaat of als je bijvoorbeeld niet de beschikking hebt over een goede developer, kan het zijn dat je je Magento webshop voorziet van de nodige Magento plugins. Het is natuurlijk prettig dat deze plugins er zijn en je voor veel extra functionaliteiten geen developer hoeft in te huren om je webshop functioneel te verbeteren. Er kleeft echter ook een nadeel aan het installeren van plugins. Ze hebben namelijk veelal een negatieve invloed op de performance van je webshop. Wat betreft plugins geldt wat ons betreft echt: less is more. Hoe meer functionaliteit een plugin biedt hoe groter de kans op issues m.b.t. performance. Zoek plugins welke echt doen wat je nodig hebt maar ook zeker niet meer dan dat. Onderzoek dus op regelmatige basis of je plugins nog actief gebruikt of dat ze misschien toch vervangen kunnen worden door custom code of een andere optimalisatie.
6. Kies razendsnelle Magento webhosting
Een wijze met geringe impact om de snelheid van je Magento webshop te verbeteren is door goede geoptimaliseerde Magento hosting te kiezen. Het aanbod hierin is groot, maar niet iedere partij biedt ook daadwerkelijk Magento geoptimaliseerde hosting aan. Er zijn vele verschillende oplossingen variërend van groot tot klein en het is hierbij van belang het juiste pakket te kiezen. Voor je Magento webwinkel is goede hosting nodig om je gebruikers een goede ervaring te bieden. Daarnaast is het ook van belang om verschillende backend processen sneller af te handelen. Let daarom op bij het selecteren van het juiste hosting pakket en kijk hierbij vooral naar de beschikbare resources. De belangrijkste resources zijn het geheugen, CPU en opslag capaciteit. Verder is het ook van belang dat je hosting selecteert waarbij je niet alleen een snelle verbinding maar ook hoge beveiligingsstandaarden en goede support in geval van downtime krijgt.
7. Maak gebruik van snelle zoekfunctionaliteit
Voor webshops is de zoekfunctionaliteit vaak één van de belangrijkste functionaliteiten in de strijd om een hoge conversie. Een snelle zoekfunctionaliteit is dan ook een must. Inmiddels heeft Magento het Nederlandse Elasticsearch de standaard voor zoekmachines binnen Magento gemaakt. Een mooie ontwikkeling die wij absoluut toejuichen!
Een andere zeer uitgebreide zoekfunctionaliteit die je kan inzetten is Tweakwise. Tweakwise Navigator is een tool voor e-commerce managers of webshop eigenaren die zelf de controle willen over het ranken, zoeken, navigeren en filteren in hun webwinkel. Tweakwise kan op de achtergrond van elke webshop functioneren en is ‘platform onafhankelijk’. Het mooie is, is dat je voor het beheren van Tweakwise geen technische kennis nodig hebt waardoor het instapniveau relatief laag is. Tweakwise is erg goed, maar relatief duur als je dit afzet tegen Elasticsearch. Doe vooraf dus goed onderzoek naar welke zoekfunctionaliteit je wilt gebruiken en vraag ons eventueel om inhoudelijk advies.
8. Maak gebruik van Varnish Cache
Caching is een veelgebruikte methode om websites en webshops sneller te laten functioneren. De vraag is dan ook niet of je gebruik moet maken van caching, maar welke caching methode je uiteindelijk gaat gebruiken.
Voor Magento raden wij onder andere aan om gebruik te maken van Varnish Caching. Varnish is een reverse proxy die er voor zorgt dat statische pagina’s gecached worden.
Op de servers van Hypernode bieden wij de mogelijkheid om Varnish Cache in te schakelen zonder dat hiervoor een externe instantie hoeft te worden ingericht. Dit bespaart kosten en verlaagd latency. Daarnaast biedt Hypernode ook volledige flexibiliteit qua configuratie. Wil je bijvoorbeeld 6 GB voor Varnish reserveren met een Dedicated hosting omgeving dan is dat bijna altijd mogelijk zonder een upgrade.
9. Update Indexes
Bij Magento 2 staat standaard ingesteld dat het re-indexen van producten en categorieën automatisch gedaan wordt bij het updaten van een product of categorie. Het probleem van het re-indexen is dat het de omgeving een stuk trager maakt op het moment van re-indexen. In plaats van Magento de re-indexering te laten uitvoeren bij een update, kan je dit beter handmatig doen op een tijdstip die je zelf uitkiest. Je doet dit via het menu system en vervolgens ga je naar index management.
Het updaten volgens schema is voor de performance een goede optie. Dit in tegenstelling tot het updaten van de re-index on save bij iedere productupdate. Kies dus in dit geval voor ‘Update By Schedule’.
Je hebt nu zelf controle over wanneer je de Magento index een update geeft. Het is verstandig om dit proces wel te automatiseren via bijvoorbeeld een cron job. Maar nu kies je zelf het tijdstip en de dag, en dus logischerwijs op een moment dat je weinig bezoek hebt in je webwinkel.
10. Maak gebruik van Brotli Compression
Hoe groter de webpagina is, hoe langer het duurt om deze in te laden. Een van de manieren om de grootte van je webpagina te verlichten is het inschakelen van Brotli en Gzip compressie. Met compressie algoritme worden webpagina’s gecomprimeerd voordat ze naar de browser worden gestuurd. Dit vermindert de overdrachtstijd drastisch omdat de bestanden veel kleiner zijn. De reden dat compressie zo goed werkt is omdat CSS-bestanden en HTML-bestanden veel herhaalde tekst gebruiken en veel witruimte hebben. Omdat Brotli veelgebruikte tekenreeksen comprimeert, kan dit het formaat van pagina’s en stylesheets tot wel 70% verminderen. Brotli en Gzip moet op de webserver zijn ingeschakeld, wat relatief eenvoudig is. Uiteraard regelen wij dit bij Hypernode standaard voor al onze klanten. Mocht je niet bij Hypernode klant zijn, vraag dan je hostingprovider wat de mogelijkheden zijn. Omdat Brotli nog niet door iedere browser gebruikt wordt, moet je in ieder geval voorlopig zorgen dat je Brotli en Gzip wel in combinatie met elkaar gebruikt.
11. Maak minimaal gebruik van HTTP/2
Hoewel HTTP/2 inmiddels al vrij standaard is, komt het voor dat oudere websites nog niet draaien op dit nieuwe protocol. Als HTTP/2 door je hoster is ingeschakeld en je shop heeft tevens een SSL verbinding, dan is deze shop automatisch een stuk sneller. Hiermee bereik je snelheidswinsten van tot wel 15% ten opzichte van het oude HTTP protocol. HTTP/2 moet worden gedekt door alle servers en netwerken. Twijfel je of dit voor jouw webshop is ingeschakeld? Vraag dan je hoster om meer informatie. Klanten van Hypernode profiteren natuurlijk standaard van het HTTP/2 protocol in combinatie met een optioneel gratis SSL certificaat.
12. Gebruik nooit JS-combining
In Magento 2 heb je de mogelijkheid om JS-bundling aan te zetten. Dit is een speciale functie van Magento om JavaScript bestanden te groeperen en zo het aantal HTTP aanvragen te verminderen. Dit is een handige feature als je nog draait op HTTP-versie 1, maar als je al draait (en wij adviseren dit sowieso te doen) op HTTP/2 dan voegt deze feature niets toe. Een andere reden dat je deze functie beter niet in moet schakelen, is het feit dat je dus alle JS bestanden tot één bestand samenvoegt wat resulteert in één groot JS-bestand. En één groot JS bestand inladen heeft impact op de performance van je shop. Ga dus niet voor JS bundling maar zorg dat je gebruik maakt van HTTP/2 met Brotli en bijvoorbeeld een CDN zoals we hierboven al beschreven.
Je kunt controleren of JS-bundeling is uitgeschakeld door naar het backend-menu te gaan Winkels> Configuratie> Geavanceerd> Ontwikkelaar:
13. Draai je shop in production modus
Je kan je Magento webshop in 3 verschillende modussen draaien:
Standaard (default) modus
Dit is de modus die standaard is ingesteld als je Magento hebt geïnstalleerd. Deze kan je het beste gebruiken als je je Magento shop wilt configureren en testen voordat je deze online zet voor je bezoekers.
Developer modus
Wanneer je uitgebreide logging wilt, op zoek gaat naar bugs en meer diepgaande configuraties in je Magento store wilt doorvoeren
Productie modus
Deze modus gebruik je voor geoptimaliseerde prestaties. Deze wil je standaard gebruiken en aan je bezoekers uitserveren. Deze biedt namelijk de beste gebruikerservaring voor je bezoekers. De eerste twee, de standaard modus en developer modus, zijn vrij traag. Zorg er dus voor dat je webshop is ingesteld in de productie modus. Dit lijkt overduidelijk, maar in de praktijk zien we dat veel (kleinere) Magento webshops hier nog steeds mee stoeien. Magento in productie modus zetten doe je door het volgende commando in te voeren:
php bin/magento deploy:mode:set production
14. Optimaliseer je CSS
Wanneer je CSS optimaliseert zorg je voor kleine performance optimalisaties. Deze instellingen kun je doorvoeren in je backend van Magento. Vergeet voordat je dit doet, niet Magento in Developer Modus te zetten (en vergeet hem niet terug in productie te zetten als je klaar bent 😉). Voer het volgende commando via SSH uit om Magento in developer modus te zetten:
php bin/magento deploy:mode:set developer
Als de shop in developer modus staat, ga je naar Stores -> Configuration -> Advanced -> Developer en scroll je naar je CSS-instellingen: Beide dropdown opties zet je op ja/yes en zo zorg je ervoor dat de CSS-bestanden verkleind en samengevoegd worden. Sla de instellingen op, en switch weer terug naar productie modus.
Test je Magento webshop opnieuw
Wanneer je alle, of enkele van bovenstaande aanbevelingen hebt doorgevoerd, is het natuurlijk interessant om te zien welk effect deze hebben gehad op de performance van je Magento shop. Laat je webshop dus weer testen door de tools die we aan het begin van dit artikel met je deelden en je zult zijn dat je aanzienlijke winst hebt geboekt. Veel dingen kun je dus zelf uitvoeren. Je kunt nog gedetailleerder aan de slag gaan door je code te optimaliseren. Hier heb je echt wel een developer voor nodig die weet wat hij doet. Omdat wij van mening zijn dat iedere Magento shop een performance moet hebben die door het dak gaat, bieden wij qua webhosting de ideale oplossing. Bespaar hier absoluut niet op, want een goede partner als webhoster levert misschien wel de meeste snelheid op.
Mocht je verder nog vragen hebben over dit artikel, neem dan gerust contact met ons op!
Hi! Mijn naam is Dion, Account Manager at Hypernode
Wil je meer weten over Hypernode's Managed E-commerce Hosting? Plan je online meeting.
plan een een-op-een meeting tel:+31648362102
