Magento 2 Snelheid Verbeteren: de ultieme gids (2019)

|
| Facebook Twitter LinkedIn
Magento 2 snelheid verbeteren

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 de ultieme performance prestaties te gaan.

Zeker wanneer er veel maatwerk aan de webshop wordt toegevoegd en de onderhoudbaarheid 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 shop 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:

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. Hipex 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 Hipex een audit uitvoert en alleen professionele bureaus accepteert. Indien een bureau niet aan de standaarden welke Hipex vereist, kan voldoen, zal het betreffende bureau geen officiële partner van Hipex worden.

partners hipex

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.

lazy loading
Bron: Giphy.com

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 Hipex staat de expire time van veel statische bestanden standaard al optimaal ingesteld.

Onderstaand een lijst van extensies met bijhorend de ingestelde expire time:

Magento 2 snelheid caching

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 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 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-winkel 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.

Waar je nog meer op moet letten bij het kiezen van Magento hosting, leggen we uit in dit artikel.

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.
Zelf raden wij niet aan om de standaard zoekfunctionaliteit van Magento of op de database (MySQL) gebaseerde alternatieven, te gebruiken gezien er in de markt betere alternatieven voorhanden zijn.

Een bekend alternatief is bijvoorbeeld het van Nederlandse bodem komende ElasticSearch.

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 Elastic Search. 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.

Varnish Cache

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 Hipex 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 Hipex ook volledige flexibiliteit qua configuratie. Wil je bijvoorbeeld 6 GB voor Varnish reserveren met een Dedicated of Cluster 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.

Magento 2 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 Hipex standaard voor al onze klanten.

Mocht je niet bij Hipex 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 Hipex 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:

JS bundling Magento 2

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 immers de beste gebruikerservaring voor je bezoekers.

De eerste twee, de standaard modus en developer modus, zijn vrij traag. Zorg er dus voor dat je Shop is ingesteld in de productie modus. Dit lijkt evident, 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 kan 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 shop 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 kan 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.

Laat je gegevens achter en wij nemen zo snel mogelijk contact op

Check je shop met onze gratis performance scan

Gelijk zien welke verbeterpunten je shop heeft? Doe onze gratis performance scan en wij checken jouw shop op meer dan 250 belangrijke punten.





Interesse? Laat het ons weten!

Hipex HQ Herenstraat 49A, 3911 JB Rhenen

info@hipex.io 085-888 77 54