Magento 2 webshop snelheid optimalisatie: hoe en waarom?

Published by Matthias Geysen 2019-05-28

Magento 2 performance

Voor een online webshop is het altijd belangrijk om je klanten een gebruiksvriendelijke en snelle ervaring aan te bieden. Één van de belangrijkste aspecten is snelheid. Bezoekers gaan zich ergeren als pagina's een aantal seconden nodig hebben om te laden. Hierdoor gaan ze sneller afhaken en verlies je dus potentiële klanten. Ook zoekmachines zoals bv. Google spelen hier een belangrijke rol. Naast optimalisatie van jouw content, kijken ze ook naar snelheid. Hoe sneller jouw website, hoe hoger je in de zoekresultaten verschijnt. Bekijk de huidige scores van jouw webshop op Google PageSpeed Insights.

Ondanks dat Magento 2 één van de krachtigste platformen is, is het is ook één van de zwaarste. De juiste configuraties en hardware zijn dan ook van groot belang. Hieronder vind je een aantal tips hoe je jouw Magento 2 webshop kan optimaliseren.

 

1. Code optimalisatie

Een snellere webshop begint bij het optimaliseren van code. Als er broncode niet juist wordt geïmplementeerd of overbodig is, dan duurt het langer voor de server om de webpagina klaar te zetten voor de gebruiker. Hier spreken we van TTFB (Time to first byte). Dit is hoe lang het duurt vooraleer de browser de eerste byte van data ontvangt.

 

Extensies

Magento 2 is opgebouwd aan de hand van een modulair systeem. Dit zorgt ervoor dat je allerlei extensies kan gebruiken die extra functionaliteit aanbieden. Echter zorgt dit ook voor een enorme valkuil. De extensies moeten compatibel zijn met elkaar en moeten de coding standards van Magento 2 opvolgen.

Als dit niet het geval is, kunnen er problemen ontstaan met kritieke gevolgen zoals data-lekken of pagina's die niet gecached worden.

 

Kijk zeker uit voor de volgende zaken:

  • Grote loops: Loops door een grote set data kunnen veel tijd in beslag nemen. Probeer deze te vermijden door de dataset te verkleinen en nested loops te vermijden.
  • ObjectManagers: Magento verbiedt het gebruik van ObjectManagers op een paar uitzonderingen na. Ze dienen niet om andere classes te constructen, daarvoor dient Dependency Injection (DI). Dit is één van de meest gemaakte fouten en duidt op een lage kwaliteit.
  • One-man-army classes: Classes met teveel functionaliteit is niet optimaal. Splits grote functionaliteit op en beperk elke class tot hun eigen core functionaliteit.

 

Caching

Caching heeft een grote invloed op de laadtijden van jou pagina's. Dit zorgt ervoor dat pagina's niet telkens gecompileerd moeten worden en dus sneller laden. Pagina’s met klant specifieke informatie, zoals de checkout, mogen niet gecached worden.

Vaak wordt er gebruik gemaakt van de cacheable attribuut in de layout xml bestanden van Magento om aan te duiden of deze blok wel al dan niet gecached mag worden. Echter wanneer er één blok op een pagina wordt teruggevonden met een cacheable="false" attribuut zal de volledige pagina niet gecached worden. Dit moet dan ook vermeden worden.

Je kan dit controleren door naar de pagina in jouw browser te kijken of deze een no-cache header heeft wanneer je geen Varnish gebruikt. Indien je Varnish gebruikt kan je dit analyseren op server niveau aan de hand van de HIT/MISS response met tools zoals bijvoorbeeld varnishlog .

Indien er toch nood is aan non-cached elementen op een gecachte pagina raden wij aan om deze te gaan ophalen met behulp van AJAX. U kan hiervoor een controller voorzien waar u parameters aan mee kan geven en ervoor zorgen dat deze controller niet gecached is.

 

AJAX

Via AJAX kan je data versturen en ophalen van de server zonder de pagina te herladen. Gebruiksvriendelijkheid is hier een voordeel van, maar dit geeft ook een nadeel voor SEO ranking. Teksten die nog niet geladen zijn, kunnen ook niet herkend worden door zoekmachines. Echter is dit een perfecte oplossing voor klant specifieke elementen.

Maar zoals Ben Parker ooit zei: "With great power, comes great responsibility". Te veel aanvragen tegelijkertijd kan resulteren in langere laadtijden. Probeer daarom het te beperken tot een aantal aanvragen per pagina of het aantal te groeperen.

 

Keep calm and code

 

2. Configuratie

Het admin-paneel van Magento 2 biedt al een aantal opties die de prestatie van jouw webshop kunnen verhogen.

 

Varnish

Magento raadt ten strengste aan om gebruik te maken van Varnish in plaats van de ingebouwde caching applicatie. Varnish is veel sneller en is ontworpen om HTTP verkeer te accelereren. Varnish is een server sided applicatie dat geïnstalleerd moet worden.

Je kan dit makkelijk instellen via Stores → Configuration → Advanced → System → Full Page Cache in het admin-paneel. Eens Varnish is geselecteerd, verschijnen er extra configuraties. Deze dienen om Varnish zo optimaal mogelijk te configureren afhankelijk van uw hosting en server configuraties.

Om Varnish te installeren op uw server raden we je aan om contact op te nemen met jouw hosting. Deze zal Varnish installeren op uw server en eventueel de juiste configuraties voorzien. Magento voorziet een optie om een standaard Varnish configuratie te downloaden.

 

Varnish configuration

 

Full page caching

Onder System → Cache Management kan je allerlei cache types terugvinden. Hier kan er worden bepaald welke delen er wel of niet gecached moeten worden.

Alle cache types moeten ingeschakeld zijn voor een optimale caching.

 

Cache management

 

Flat tables

De database werkt met een Entity-Attribute-Value model (EAV voor de vrienden) die er voor zorgt dat data wordt verspreid over verschillende tabellen.

Dit heeft als voordeel dat de database dynamisch is opgebouwd. Een nadeel is echter dat het ophalen van deze data een lange tijd kan duren.

Daarom wordt er gebruik gemaakt van de zogenaamde 'flat tables'. Dit zijn simpele, gegenereerde database tabellen die alle benodigde data bevatten. Deze data wordt voorzien dankzij indexers.

 

Index management

 

Indexers zijn processen die er voor zorgen dat alle bij elkaar horende data in dezelfde flat table wordt gestoken. Deze worden op een bepaalde acties (on save of on schedule) uitgevoerd.

Zorg dat flat tables voor de categorieën en producten ingeschakeld zijn via Stores → Configuration → Catalog → Catalog→ Storefront.

Indien u gebruikt maakt van de “on schedule” moet u ook zeker crontab juist instellen op uw server.

 

Verklein statische content

Het verkleinen van statische content kan een drastische boost geven aan jouw snelheid. Hoe minder statische content er moet aangeleverd worden, hoe sneller de pagina gebruiksklaar is. Hier moet wel een duidelijk balans gevonden worden. 5 grote bestanden kunnen een even lange laadtijd hebben als 100 kleine bestanden. De juiste configuraties hangen af van webshop tot webshop.

 

Magento biedt JavaScript Bundeling aan, een optie die alle javascript-bestanden bij elkaar bundelt zodat de browser minder pakketten hoeft aan te vragen. Wij raden aan om Advanced JavaScript bundeling te gebruiken.


Let op: deze instellingen kan je enkel bekijken als jouw webshop in 'developer' modus staat en kan verschillen voor jouw webshop.

 

CSS

  • Ga naar Stores → Configuration → Advanced → Developer→ CSS Settings
  • Zet Merge CSS Files op Yes
  • Zet Minify CSS Files op Yes

 

Javacscript

  • Ga naar Stores → Configuration → Advanced → Developer→ Javascript Settings
  • Zet Merge JavaScript Files op No
  • Zet Enable JavaScript Bundeling op No
  • Zet Minify JavaScript Files op Yes

 

Reduce static content

 

3. Optimaliseren van afbeeldingen

Zorg ervoor dat afbeeldingen in het juiste formaat en dimensies worden geüpload.Grote afbeeldingen waar een kleiner formaat  al voldoet moeten geoptimaliseerd worden. Bijvoorbeeld : 4K (4096px op 2160px) afbeeldingen die nooit groter worden getoont als 1920px op 500px grootte.

 

Yep, daar kunnen wel een paar kilo(byte)tjes af.

 

Denk daarom goed na over het belang van de foto's. Productafbeeldingen kunnen de klant overtuigen en moeten er dus goed uitzien.

Een afbeelding op een privacybeleid pagina daarentegen... Wel, wie gaat er nog naar een privacybeleid pagina kijken?

Ook het formaat kan helpen om jouw afbeeldingen zo optimaal mogelijk op te slaan. Probeer zoveel mogelijk afbeeldingen op te slaan als JPG/JPEG.  Verkeerde formaten kunnen alsnog resulteren in hoge laadtijden. JPEG2000 is één van de nieuwste formaten, maar heeft een slechte browserondersteuning.

 

Lazy loading

Nog een bekende methode om het laden van jouw pagina's te verbeteren is via lazy loading. Deze techniek zorgt er voor dat de afbeeldingen pas geladen worden zodra ze in beeld verschijnen.

Er zijn verschillende JavaScript libraries en allerlei extensies beschikbaar voor Magento 2.  

 

 

4. Lettertypes

Lettertypes zijn vaak een belangrijk onderdeel van het design. Ze zorgen voor het juiste gevoel en indruk bij het lezen van de tekst. Ondanks dat het maar letters zijn, zijn ze toch niet onschuldig voor jouw pagina snelheid.

Vaak wordt er gebruik gemaakt van Google Fonts omwille van verschillende redenen. Ze zijn gratis, ongelimiteerd en snel om te laden.

 

Maar wat als een lettertype traag of zelfs niet geladen kan worden?

Ik ben blij dat je het vraagt! Als een lettertype niet geladen kan worden, zal er ook geen tekst te zien zijn.

Ook al laden Google Fonts vrij snel in, duurt het alsnog een bepaalde tijd om de gekozen lettertypes te downloaden. Deze periode is zichtbaar op de website en beïnvloedt de First Contentful Paint (FCP).

Er bestaat gelukkig iets zoals font-display: een CSS eigenschap voor font-faces die bepaalt hoe een lettertype getoond moet worden, gebaseerd op of ze gedownload en gebruiksklaar zijn.

 

Maar er zit ook een addertje onder het gras... Google Fonts ondersteunt geen font-display. Download daarom de google fonts in .woff-bestanden om gebruik te maken van font-display.  

 

5. Hosting & server configuratie

It all comes down to this!

Als kers op de taart komt er uiteindelijk een goede hosting met optimale hardware aan te pas. Zonder dit, hebben de vorige stappen zo goed als geen effect.

De juiste hardware is vereist om een Magento 2 webshop te draaien. Om jou een schatting te geven, zou je voor een Magento 2 webshop met 500 producten en 100 bezoekers per dag de volgende hardware gebruiken voor een snelle laadtijd:

 

Minimaal :

  • 4GB DDR4 Ram
  • 512MB PHP memory limit
  • 50GB SSD
  • 4 CPU Cores met multi core processing

 

Aangeraden :

  • 6GB DDR4 Ram
  • 1GB PHP memory limit
  • 100GB SSD
  • 8 CPU Cores met multi core processing

Een goede host is essentieel voor goede laadtijden. Wij raden daarom Combell aan. Combell is een uitstekende hosting partner die Magento geoptimaliseerde hosting aanbiedt. Tevreden van de laadsnelheid van deze website? Deze website draait op de hosting van Combell! Vaak wanneer een webshop groeit veranderen ze van hosting naargelang de noden. Combell voorziet hosting pakketten voor beginnende webshops tot grote multinationals met een 99,999% uptime garantie en een excellente support service. Wij raden dan ook deze hosting aan voor al onze klanten.

 

SSL Certificaat

Een SSL (Secure Sockets Layer) certificaat zorgt voor een betere beveiliging tussen de server en jouw internet browser.

Je kan websites met een SSL certificaat makkelijk herkennen als de URL begint met HTTPS://. Dit is niet alleen beter voor SEO ranking, maar ook voor bezoekers toon dit dat de webshop betrouwbaar is.

Bezoekers zullen zich veiliger voelen tijdens het navigeren door jouw webshop en sneller converteren naar klanten.

Om een gratis SSL certificaat aan te vragen, kan je terecht bij Let’s Encrypt.

 

SSL Certificate

 

Gzip compressie

Gzip compressie is een methode die kleinere pakketten (gecomprimeerd) doorstuurt naar de browser (zoals wanneer je een .zip naar elkaar stuurt). Dit resulteert in snellere laadtijden en blijere bezoekers. Hoera voor compressie!

Om deze methode te gebruiken op jouw server, kan je best contact opnemen met jouw hosting bedrijf.

 

HTTP/2

Dit nieuw protocol zorgt voor een snellere en slimmere overdracht van data via het internet. Dit zijn de belangrijkste verbeteringen:

  • Multiplexing: Er kunnen meerdere bestanden over één enkele verbinding verstuurd worden. Bij HTTP/1.1 was dit beperkt tot slechts één enkel bestand.
  • Header optimization: Bij elk HTTP-verzoek verkrijg je header informatie. Dankzij HTTP/2 worden deze gecomprimeerd en de overbodige verwijdert.
  • Server push: De server kan proactief de juiste bestanden doorsturen naar de browser. Dit wil zeggen dat de server al weet welke middelen deze pagina nodig heeft vooraleer de browser deze aanvraagt.

Voor meer informatie kan je best contact met jouw hosting opnemen.

 

 

Heb je nog vragen of wil je op de hoogte blijven van de CompactCode Blog? Contacteer ons of schijf je in voor onze nieuwsbrief

 

 

Author profile picture
Matthias Geysen Webdeveloper

Webdeveloper with a passion for design & gaming.

Need more?

We go further.