Magento 2 optimaliseren

Nu steeds meer ontwikkelpartijen zich actief bezig houden met de ontwikkeling van Magento 2 shops krijgen we steeds vaker vragen omtrent de snelheid van deze shops. In dit artikel geven wij jou een aantal handig tips om je webshop sneller te maken. Maak je gebruik van Magento 1? Dan verwijzen wij je graag door naar ons artikel Magento 1 optimaliseren.

Eén van de meest gehoorde opmerkingen: “Magento 2 zou toch sneller moeten zijn dan Magento 1?”
In de basis is deze opmerking zeker waar, de core code van Magento 2 is een stuk efficiënter geschreven. Wel is het zo dat het ontwikkel en deploy proces sterk veranderd is en als hierin zaken niet of onjuist worden uitgevoerd kan dit veel invloed hebben op de snelheid van de shop.

Magento 2 optimaliseren van een optimale performance

Eenmaal klaar met ontwikkeling is het tijd om alles klaar te zetten voor productie. Dit houdt o.a. in dat de statische content uitgerold moet worden, de code gecompileerd wordt en dat de Magento modus goed gezet moet worden; al deze stappen maken dat de shop optimaal en dus snel functioneert. Om het je zo gemakkelijk mogelijk te maken hebben we een workflow ontwikkeld die je kunt volgen. Zodoende weet je zeker dat je geen cruciale instellingen overslaat of onjuist instelt.

Stap 1. Workflow development naar productie

Activeren van cliënt-side performance features, deze verbeterd bezoekerservaring (snelheid)

a. Javascript bestanden samenvoegen
Ga in de backend naar Stores > Configuratie > Geavanceerd > Ontwikkelaar
Zet JavaScript-bestanden samenvoegen op Ja en klik op Config opslaan

b. Javascript bestanden bundelen
Ga in de backend naar Stores > Configuratie > Geavanceerd > Ontwikkelaar
Zet JavaScript Bundling inschakelen  op Ja en klik op Config opslaan.

c. Javascript bestanden verkleinen
Ga in de backend naar Stores > Configuratie > Geavanceerd > Ontwikkelaar
Zet JavaScript-bestanden verkleinen op Ja en klik op Config opslaan.

d. CSS bestanden samenvoegen
Ga in de backend naar Stores > Configuratie > Geavanceerd > Ontwikkelaar
Zet CSS-bestanden samenvoegen op Ja en klik op Config opslaan.

e. CSS bestanden verkleinen
Ga in de backend naar Stores → Configuratie → Geavanceerd → Ontwikkelaar
Zet CSS-bestanden verkleinen op Ja en klik op Config opslaan

Stap 2. Statische content

Met Magento 2 worden alle resources die gebruikt worden om je website te tonen geladen vanuit de pub/static folder, denk hierbij aan je template, vertalingen, CSS (stylesheet) en JS (javascript) bestanden. Om deze resources klaar te zetten voor productie moet het volgende commando via SSH. (Nog niet verbonden met SSH? Doe dat dan eerst. Het verbinden met SSH kan op drie manieren. Voor alle drie de manieren hebben wij een handleiding geschreven: SSH verbinden met Windows, SSH verbinden met Mac OS X of SSH verbinden met Linux.) op de server van jouw domeinnaam uitgevoerd worden in de public_html:

php bin/magento setup:static-content:deploy

Dit commando kan enkele minuten duren afhankelijk van de grootte van en hoeveelheid templates, hoeveelheid vertalingen etc. Mocht je meerdere talen ingesteld hebben dan zal je dit commando meerdere keren moeten uitvoeren. Standaard word alleen de en_US vertaling uitgerold. Door de vertaling achter het eerder gegeven commando te plaatsen word deze ook uitgerold. B.v. de Nederlandse vertaling:

php bin/magento setup:static-content:deploy nl_NL

Stap 3. Code compileren

Om te voorkomen dat de code gecompileerd wordt terwijl er een pagina word geladen, gaan we de code pre-compileren. Dit scheelt behoorlijk in laadtijd van pagina’s die niet in de cache geladen zijn. Om de code te compileren moet het volgende commando via SSH uitgevoerd worden in de public_html:

php bin/magento setup:di:compile

Stap 4. Instellen productie mode

Bij Magento 2 wordt er gebruikt gemaakt van modi (meervoud), deze bepalen welke functionaliteiten er aanstaan. Bij een verse installatie van Magento 2 staat deze in default modus. Echter zijn er ook twee andere mogelijkheden die wellicht veel beter bij jou passen.

> Default – De standaard modus waarin Magento 2 Geïnstalleerd wordt. Deze is niet geschikt voor productie en ook niet voor ontwikkeling. 
> Developer – Deze modus is alleen bedoelt voor ontwikkeling van de Magento 2 store. In deze modus staat automatische code compilatie bij het laden van een pagina geactiveerd naast geavanceerde debugging, constom X-Magento-* http-request en response headers. Door al deze functionaliteiten vertraagd de Magento 2 shop enorm, hier moet dus kritisch naar gekeken worden.
> Production – Deze modus is bedoelt wanneer de webshop daadwerkelijk in gebruikt genomen wordt. Foutmeldingen worden niet getoond, automatische code compilatie staat uit, geavanceerde debugging staat uit en de custom headers worden niet getoond. Dit is de snelste modus van Magento2 en deze gebruikt je dan ook als de site live gaat/is. 

Om de modus van je Magento 2 te zien gebruik je het volgende commando:

php bin/magento deploy:mode:show

Om te wisselen naar productie modus :

php bin/magento deploy:mode:set production

Stap 5. Herindexatie uitvoeren

Om nog één keer de volledige catalogus, prijs regels etc. goed te zetten herindexeren we de shop nogmaals. Dit kan via SSH (wat is SSH?)  middels het volgende commando:

php bin/magento indexer:reindex

Stap  6. Cache activeren

Zoals gebruikelijk bij Magento 1 is het inschakelen van de cache nog steeds erg belangrijk, nog vaak zien wij performance problemen gerelateerd aan cache systemen die uitgeschakeld staan. Dit levert grote snelheidsverliezen op.

Om deze in te schakelen gaat je in de backend naar: Systeem > Cache Management. 
Selecteer alle cache-typen en kies links boven voor inschakelen daarna op indienen.

Stap  7. Instellingen activeren

Om alle instellingen die we in de voorgaande stappen hebben uitgevoerd te activeren dienen we nog maal de cache te legen. Log in met SSH (Nog niet verbonden met SSH? Doe dat dan eerst. Het verbinden met SSH kan op drie manieren. Voor alle drie de manieren hebben wij een handleiding geschreven: SSH verbinden met Windows, SSH verbinden met Mac OS X of SSH verbinden met Linux.) op de server van jouw domeinnaam. Voer de volgende commando’s uit in de public_html folder.

php bin/magento cache:clean

php bin/magento cache:flush

Stap  8. Aanpassingen in .Htaccess

PHP memory limiet verhogen

De waarde die staat aangegeven bij php_value memory_limit bepaalt hoeveel geheugen de PHP-processen die worden gestart. Een standaard Magento installatie heeft een limiet van 756MB. Dit kan voor bepaalde taken niet genoeg zijn, bijvoorbeeld grote imports of exports. Onze hostingservers zijn hierop aangepast en hanteren een hoger memory limiet voor PHP-processen. Om onze serverinstellingen te gebruiken kun je een hashtag zetten voor deze regel in de .htaccess, neem de volgende regels exact over:

Voor PHP 5:

############################################
## adjust memory limit

# php_value memory_limit 756M
php_value max_execution_time 18000

Voor PHP 7:

############################################
## adjust memory limit

# php_value memory_limit 756M
php_value max_execution_time 18000

Verschillende snelheidswinsten kunnen worden behaald door gebruik te maken van deflate , dit is een methode om alle data van de server gecomprimeerd naar de bezoeker te versturen.

Let op: voor het bewerken hoeft er soms maar één teken te worden weggehaald of een regel te worden toegevoegd.

Output Compressie met Deflate

Met het activeren van de mod_deflate.c-module worden alle HTML, CSS en Javascript bestanden gecomprimeerd naar de browser verzonden. Dit verkleint alle bestanden die door de browser worden gedownload waardoor pagina’s sneller worden geladen. Onderstaand een beschrijving hoe je Deflate kan activeren. Zorg dat de regels exact overeenkomen zoals hier onder beschreven

######################################

## enable apache served files compression

## http://developer.yahoo.com/performance/rules.html#gzip

# Insert filter on all content

SetOutputFilter DEFLATE

# Insert filter on selected content types only

AddOutputFilterByType DEFLATE text/html text/plain text/xml

text/css text/javascript application/javascript

# Netscape 4.x has some problems…

BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems

BrowserMatch ^Mozilla/4.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine

BrowserMatch bMSIE !no-gzip !gzip-only-text/html

# Don’t compress images

SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary

# Make sure proxies don’t deliver the wrong content

#Header append Vary User-Agent env=!dont-vary

Het resultaat:

Expires Header

Browsers gebruiken standaarden voor het bewaren van cached componenten. Sommige bestanden worden kort bewaard en andere bestanden worden wat langer bewaard, zoals statische componenten. Wij willen graag dat elke pagina wordt bewaard, omdat dit resulteert in een hogere snelheid. Om dat te realiseren moeten we de Module mod_expires.c activeren. Onderstaand een beschrijving over hoe je dit activeert.

 Module mod_expires.c. activeren

Wij gaan een regel tekst toevoegen ExpiresActive On

############################################

## Add default Expires header

## http://developer.yahoo.com/performance/rules.html#expires

ExpiresActive On

ExpiresDefault “access plus 1 year”

Het resultaat:

Conclusie

De laatste stap die nu nog rest is het testen van de website en meten of de snelheid naar wens is, uiteraard kunnen de resultaten per shop sterk verschillen. De snelheid is met name afhankelijk van het gebruikte template en de extra third-party modules die geïnstalleerd zijn.

De hosting is ook een belangrijk onderdeel in de snelheid van de shop, daarom zijn al onze Magento 2 hostingpakketten geoptimaliseerd voor het gebruik van Magento 2.

Contact

Mocht je toch nog vragen hebben naar aanleiding van deze handleiding, neem dan contact met ons op. Je kunt ons bereiken via info@skyberate.nl of 0316-712000

in Magento 2
Heeft deze handleiding jouw vraag beantwoord?