Magento 2 – Frontend performance

categorie / Blog / Magento 2
Blogpost - Magento 2 - Frontend Performance

Frontend performance verbeteringen van Magento 2

In alweer de tiende en laatste blogpost in deze reeks over Magento 2 bespreken we welke verbeteringen op gebied van performance er zijn gemaakt. Performance verbeteringen op de server of voor ontwikkelaars laten we voor nu achterwege; we focussen in dit artikel op de voornaamste performance verbeteringen voor de bezoeker van je webshop.

Overgenomen en verbeterde technieken

Al in Magento 1 worden verschillende performance technieken toegepast. In Magento 2 zijn eigenlijk al deze technieken overgenomen en soms ook verbeterd.

Product thumbnails

Productafbeeldingen worden in de catalogus vaak kleiner weergegeven dan de originele afbeeldingen; dit noemen we ‘thumbnails’. Magento verkleint hiervoor de afbeelding automatisch, zodat deze sneller te downloaden is. Dat komt ten goede aan de laadtijd van je webshop.

Samenvoegen van script- en style-bestanden

Het samenvoegen van meerdere script- en style-bestanden minimaliseert het aantal HTTP-verzoeken dat wordt uitgevoerd wanneer een klant je webshop bezoekt. Dit kan net als in Magento 1 ook in Magento 2 worden gedaan. Het staat ook in Magento 2 nog steeds standaard uitgeschakeld, maar met de nieuwe deploy in Magento 2, ofwel het activeren van updates naar de live-omgeving, kan dit direct goed ingesteld worden.

Content Delivery Network

Waar caching rekenkracht bespaart door het opslaan van dynamische bestanden, is het Content Delivery Network (CDN) dé oplossing bij het versturen van statische, direct downloadbare bestanden. Denk hierbij aan js-, skin- en media-bestanden zoals afbeeldingen, style (CSS), script (javascript) en PDF bestanden. Met CDN wordt de belasting voor deze statische bestanden over meerdere servers verspreid, wat de laadtijd enorm versnelt. CDN is nog altijd via de ‘Web’ instellingen te beheren in Magento 2.

Browserondersteuning

Officieel ondersteunt de laatste versie van Magento 1, versie 1.9, alleen Internet Explorer 9+. Deze browser bestond alleen nog niet in de tijd dat Magento 1 uitgebracht werd. Daarom vind je hier en daar nog ondersteuning voor Internet Explorer versies 7, 8 en andere oudere browsers terug.

Bovendien krijgen third party-modules voor Magento 1 ook een opknapbeurt. Bouwers van modules voor Magento 1 krijgen ook de kans om hun programma’s opnieuw te herschrijven en verbeteringen aan te brengen voor problemen waar zij eerder tegenaan liepen. Ook hun modules zullen weer bij bij de tijd zijn.

De ondersteuning, het laden en het initialiseren van deze backward compatibele scripts, ofwel scripts die ook op verouderde browsers gedraaid kunnen worden, wordt door Magento 2 niet gedaan. Omdat Magento 2 alleen moderne webbrowsers ondersteunt, werken Magento 2 webshops gewoonweg sneller. Maar ontwikkelaars, geen nood: de library Modernizr wordt wel meegeleverd in de installatie, als er toch behoefte is voor gebruik van oude browsers of juist nieuwe ‘cutting edge’ browsers.

Verbeteringen voor scripts

Scripts zijn sets van instructies die je webshop of website moet uitvoeren, om te kunnen functioneren. In Magento 2 zijn enkele verbeteringen voor scripts aangebracht, voor een betere performance.

Scripts minimaliseren (minify)

Het samenvoegen van meerdere scripts zorgt ervoor dat het aantal HTTP-verzoeken minder wordt. Dit is mogelijk in zowel Magento 1 als Magento 2. Het minimaliseren van scripts was in Magento 1 nog niet mogelijk, maar in Magento 2 wel. Weer een stap vooruit dus, die de laadtijd en performance van je webshop ten goede komt.

Scripts laden

Tegenwoordig worden veel scripts via de browser van de klant uitgevoerd. Zo krijgen klanten de winkelwagen als pop-up te zien, krijgen klanten bij het selecteren van productopties direct de correcte prijs te zien, zijn er diashows met afbeeldingen op de site te zien en meer functionaliteiten dan alleen maar opmaak, tekst en afbeeldingen. Deze scripts werden altijd direct ingeladen en zo nodig direct uitgevoerd. Dat kostte tijd terwijl het inladen vaak nog niet direct nodig was. Denk bijvoorbeeld aan een nieuwsbrief initialisatie of winkelwagen pop-up: die zijn niet altijd direct van toepassing zodra een pagina wordt bezocht.

In Magento 2 is dit slim opgelost met een zogenaamde ‘lazy loading’-techniek in de vorm van RequireJS. Hiermee worden scripts pas ingeladen en geïnitialiseerd zodra ze nodig zijn. Een voorbeeld hiervan is de ‘autocomplete’ in de zoekbalk die zoeksuggesties weergeeft tijdens het typen. Het script hierachter word pas geladen en geïnitialiseerd zodra de zoekbalk aangeklikt word. Op deze manier laadt en initialiseert je shop alleen kleine brokken scripts die je ook daadwerkelijk gebruikt. Dat komt de rekenkracht en snelheid van je webshop natuurlijk enorm ten goede.

Voor de initialisatie van scripts is overigens ook een protocol gemaakt, zodat ook deze zaken via een bepaalde standaard verlopen:
via data-mage-init attribute of tag.

Technische details over de nieuwe flow van scripts gebruik vind je hier.

Asynchroon template ondersteuning

Op webshops worden steeds vaker dynamische elementen ingeladen of acties verricht zonder dat je de webpagina zelf verlaat. Zo kun je in een Magento 2 webshop vanuit een categoriepagina producten aangekocht worden. Als er een keuze gemaakt moet worden voor bijvoorbeeld de juiste maat, wordt dit netjes op de pagina zelf gevraagd. Op de productpagina kan men ook producten in de winkelwagen plaatsen, zonder de pagina te verlaten. Zo kan de klant zelf beslissen om verder te winkelen of naar de kassa te gaan. In de winkelwagen zullen de totale kosten bij wijzigingen van verzendkosten ook dynamisch bijgewerkt worden, zodat de klant direct de juiste totaalprijs ziet.

Magento 2 biedt hier naast de nieuwe functionaliteit ook betere support, waardoor ontwikkelaars dit soort functionaliteiten eenvoudiger op kunnen zetten. De ontwikkelaar heeft bijvoorbeeld de mogelijkheid om KnockoutJs te gebruiken. Nu het standaard in Magento 2 ondersteund wordt, kunnen third parties deze technieken ook gebruiken in hun module, wat resulteert in een betere gebruikerservaring. Kortom: Magento 2 ondersteunt het dynamisch elementen inladen of acties verrichten zonder de webpagina te verlaten. Dit zijn kleinere acties dan het volledig inladen van de pagina. Naast een verbetering van de gebruikerservaring is dit ook een goede performance-verbetering.

Verbeteringen voor het inladen van pagina’s

In Magento 2 zijn een aantal verbeteringen aangebracht voor het inladen van pagina’s en losse elementen. Hierdoor is een Magento 2 webshop in staat de bezoeker sneller te bedienen, wat natuurlijk tot een prettigere gebruikerservaring leidt.

Local Storage

Moderne browsers ondersteunen het opslaan van data bij de bezoeker op het eigen apparaat, in plaats van op servers. Voor desktop pc’s hanteren browsers vaak 10 MB en voor mobiele apparaten zoals telefoons en tablets vaak 5 MB. Het plaatsen van opslag bij de bezoeker biedt voordelen: je hebt dan namelijk geen last van laadtijden van de server of responstijd van het HTTP verzoek. Magento gebruikt dit bijvoorbeeld voor alle scriptvertalingen. In Magento 1 worden deze vertalingen altijd en direct na het inladen van de pagina ingeladen. Bij Magento 2 gebeurt dit eenmalig, waarna het bij de klant in de cache terecht komt. Zo wordt ook de winkelwagen opgeslagen, waarop de pop-up ‘Mijn winkelwagen’ getoond wordt met de gegevens van de klant uit zijn eigen opslag.

Ontwikkelaars moeten de opslag wel bijwerken, zodat gegevens voor de bezoeker synchroon blijven lopen met de server. Dit verloopt via observers en kan geconfigureerd worden in het bestand van de module. Magento 2 zorgt er dan zelf voor dat de LocalStorage opslag bijgewerkt word met de nieuwe data, zie ook github.

Ondersteuning Full Page Cache

Magento 2 biedt ondersteuning bij en is gebouwd voor Full Page Cache (FPC). Als een bezoeker de homepage van je webshop opent, zal je shop de teksten en banners uit de database moeten halen. Hierna zal het deze data moeten verwerken tot een webpagina en dat kost tijd. Met de techniek FPC wordt de uiteindelijke webpagina opslagen in het geheugen. Als een andere bezoeker de homepage bezoekt zal FPC direct de opgeslagen webpagina geven. Op deze manier hoeft de server niet meer in de database te gaan en de webpagina opnieuw te verwerken, maar deelt het eenvoudig de al gegeneerde webpagina van de server.

In Magento 2 wordt in eerste instantie FPC als optie aangeboden. Daarmee kan iedereen zijn webshop sneller maken met een factor 10 of meer! Ook al gebruik je in Magento 1 modules van derde partijen voor FPC, dan nog is Magento 2 beter. Magento 2 heeft namelijk een onderscheid gemaakt tussen openbare data en privédata, zoals je winkelwagen. Door de scheiding van data kan FPC breder worden ingezet. Aangezien de techniek je shop tot 10x of meer versnelt, zal het kunnen inzetten van de techniek de shop aanzienlijk verbeteren.

Ondersteuning Varnish

Een bijzondere variant van Full Page Cache is Varnish: een zéér populaire oplossing om websites en Magento shops te versnellen. Varnish kan pagina’s wel 300 tot 1000 keer sneller sturen. Dat betekent dat gebruikers de webpagina’s binnen enkele tientallen milliseconden zien verschijnen. Wij zien bijvoorbeeld de homepage laadtijd verspringen naar 80ms! Magento 2 biedt out-of-the-box ondersteuning voor Varnish.

Conclusie

Verbeteringen op de server of backend-techniek voorzien de webshopeigenaar van meer mogelijkheden. Dat zijn uiteraard goede verbeteringen, maar een goede frontend-performance is direct merkbaar voor de webshopbezoeker. Alle bovengenoemde verbeteringen zorgen voor een betere gebruikerservaring. En dus ook voor een betere toekomst voor jouw webshop.

Hebben we jouw interesse gewekt?

We vertellen je graag meer over de mogelijkheden onder het genot van een goede kop koffie!

Neem contact op

Hebben we jouw interesse gewekt?We vertellen je graag meer over de mogelijkheden onder het genot van een goede kop koffie!

Jorden van den Beuken account manager
Giwanni Schaap account manager