Absolute topklasse.
Bij Emico weten we al jaren dat de meest complexe en snelle webshops succesvol op Magento draaien. Dit bewezen we zelf al jaren geleden met o.a. onze eigen PWA, de komst van Hyvä heeft ervoor gezorgd dat onze mening steeds vaker wordt gedeeld. Met Hyvä is de performance van een Magento 2 shop out of the box oprecht fantastisch te noemen. Echter blijkt het voor velen toch een uitdaging te zijn om je shop uit te breiden en de performance op peil te houden.
Bij RUMvision kun je onafhankelijk je webshop laten beoordelen en word je gerangschikt op basis van daadwerkelijke gebruikerservaring en gefundeerde KPI’s. Momenteel zijn er zo’n 14.500 sites beoordeeld waar Zitmaxx dus tot de absolute top behoort.
Wij hebben bewezen dat je zelfs met extreem veel maatwerk op Magento 2 en Hyvä de allersnelste webshop kunt bouwen. Voor enkele maanden heeft Zitmaxx namelijk op de eerste plek gestaan en was het onafhankelijk van het e-commerce pakket (magento, shopify, bigcommerce, scayle, salesforce, shopware, etc) simpelweg de allersnelste webshop gemeten!
Sinds kort zijn er enkele statische webshops gemeten (zonder dynamische data zoals voorraad en prijzen) die hoger gepositioneerd zijn. Als je daarentegen naar volwaardige klantbeleving en complexiteit kijkt, staat Zitmaxx met afstand bovenaan.
Hoe we op de eerste plaats kwamen en zeker weten deze terug te winnen? Daar gaan we in dit artikel dieper op in.
Monitoring is essentieel
Al jarenlang monitoren we bij Emico onze shops door middel van de Emico E-commerce Monitoring. Hier zie je realtime hoe een shop presteert op het vlak van technische KPI’s, denk aan statistieken omtrent cache, orders, server load, varnish, redis, (slow query) logs, tests en nog veel meer. Deze monitoring zit verweven in onze aanpak en zodoende ook in de deploy straten.
RUMvision is voor ons essentieel en complementair aan onze in-house monitoring. Waar wij zelf met een vergrootglas onder de motorkap kijken, beoordeelt RUMvision de uiteindelijke rijervaring. Wanneer je dit samenbrengt, kun je constant de juiste keuzes blijven maken.
Core Web Vitals
De Core Web Vitals zijn een set prestatie-indicatoren van Google die meetbaar maken hoe goed een website scoort op het gebied van gebruikservaring, zoals laadsnelheid, interactiviteit en visuele stabiliteit. Door velen wordt het ‘slagen’ bij de Core Web Vitals als cruciaal gezien, temeer omdat deze beoordeling bijdraagt aan de ranking van je webshop bij Google.
Na de implementatie van Hyvä was het voor ons direct duidelijk dat de grootste winst te behalen was bij de Time to First Byte. De Time to First Byte (TTFB) is de tijd die het kost voordat je device de allereerste data van een website ontvangt nadat je op een link hebt geklikt. Uit de data van RUMvision blijkt dat bij 83% van alle Magento shops de TTFB boven de grens van 800 ms ligt, wat betekent dat ze hier onvoldoende scoren bij de Core Web Vitals.
Voorkom dat je performance wordt beperkt door een suboptimale hostingomgeving. Een goede TTFB begint namelijk met uitstekende hosting. Aangezien wij al jarenlang partners zijn met Hypernode, was dit voor Zitmaxx natuurlijk al goed geregeld.
Focus op caching
Caching zorgt ervoor dat de data die de frontend opvraagt, slim wordt opgeslagen, zodat dezelfde data de volgende keer instant kan worden uitgeserveerd zonder de oorspronkelijke bron opnieuw te raadplegen. Een hiaat in dit principe is dat het eerste request altijd rechtstreeks bij de oorspronkelijke bron moet worden opgehaald voordat het in de cache kan worden opgeslagen. Dit betekent dat dit eerste request wat trager zal zijn. Om de eindgebruiker altijd representatieve data te tonen is de geldigheidsduur van de cache vaak beperkt. Het legen van de cache zorgt ervoor dat het proces opnieuw begint en het eerste request weer traag is. In de happy-flow van de eindgebruiker was de cache hit ratio plusminus 60 procent en kreeg het overgrote deel van de eindgebruikers alsnog (weliswaar enkele) niet-gecachte data te zien.
Door te focussen op cached responses, hebben we de hitratio en zodoende de TTFB enorm weten te verbeteren. Door frequent en geautomatiseerd de cache van de volledige sitemap ‘op te warmen’, voorkom je dat gebruikers niet-gecachte pagina’s opvragen.
Voor onze caching en configuratie gebruiken we Varnish, geoptimaliseerd met tweaks om de prestaties te maximaliseren. Verder hebben we Varnish xKey geïmplementeerd met soft purge om gerichter cache-inhoud te vernieuwen, wat de cache-efficiëntie en laadtijd van de website aanzienlijk verbetert. Inmiddels is onze cache hit ratio meer dan 96 procent, wat uiteindelijk resulteert in een extreme winst voor de gemiddelde TTFB.
Het verbeteren van de Interaction Next Paint (INP)
Met LoAF data in RUMvision hebben we inzicht gekregen in de impact van third parties op INP. Veel mensen denken dat GTM veel impact heeft op de website snelheid, omdat deze vaak naar boven komt in Lighthouse audits. Dit valt in realiteit erg mee, vooral als je GTM via Partytown inlaadt. Uit de LoAF data bleek dat onze third parties weinig impact hebben op INP, maar dat er nog marginale ruimte voor verbetering is, in het beter bundelen van JavaScript code.
Sinds Hyvä versie 1.3.7 gebruiken we de Alpine.js x-defer plugin die zorgt dat alleen het nodige JavaScript direct wordt uitgevoerd, wat de interactiviteit van een pagina verhoogt en de blokkeertijd van de main thread vermindert. Wederom komt dit ten goede aan de INP-score.
Backend optimalisatie
Magento 2 is een groot en complex platform als backend. Praktisch gezien is het onmogelijk om zonder geautomatiseerde tests en monitoring hier geen regressie op performance te laten plaatsvinden. Samen met onze Emico E-commerce Monitor, monitoren en analyseren we ook met New Relic mogelijke bottlenecks, zoals trage database queries, die we vervolgens optimaliseren.
Bij Emico implementeren we altijd onze interne performance-boosters. Dankzij slimme optimalisaties in de Magento-bootstrap versnellen we meerdere standaardprocessen binnen Magento 2. We zorgen ervoor dat bepaalde data direct uit de memory wordt gehaald.
Tevens gebruiken we Redis caching voor zware operaties, waardoor deze slechts één keer uitgevoerd hoeven te worden. We zorgen ervoor dat onderliggende services en libraries altijd up-to-date zijn, om zowel optimale prestaties als maximale beveiliging te waarborgen.
We gebruiken zeer weinig (third-party) modules, omdat de kwaliteit helaas sterk kan variëren en dit vaak de oorzaak is van performance- en stabiliteitsproblemen. Modules die we gebruiken, ondergaan altijd een grondige audit om technische impact te minimaliseren. Bevindingen op modules worden tevens altijd gemeld en geborgd in onze monitoring en getoetst wanneer er een nieuwe update uitkomt. Zo dragen we bij aan de Magento community, centraliseren we kennis en maximaliseren we waarde voor onze klanten.
Magento <3 PIMCore
Zitmaxx heeft een complex productmodel, waarbij veel producten geheel door de eindklant zelf samen te stellen zijn. Om alle mogelijke materialen, opties, specificaties, elementen, opstellingen en andere variabelen effectief te beheren, is een Product Information Management-systeem (PIM) zoals PIMCore van groot belang. Deze integratie stelt ons in staat om de krachten van zowel Magento als PIMCore te bundelen. Hierdoor staat er slechts essentiële productdata in Magento, terwijl we de uitgebreide productinformatie en alle gegevens voor de maatwerk configurator direct uit PIMCore kunnen inladen via zowel GraphQL als een custom REST API. Dit draagt bij aan de geweldige performance.
Slim omgaan met afbeeldingen
Afbeeldingen die niet direct zichtbaar zijn, worden niet geladen zodat de browser meer tijd heeft voor andere taken. We optimaliseren zichtbare afbeeldingen met onze custom CDN-oplossing en maken natuurlijk gebruik van WebP-formaat, verder worden de afbeeldingen direct uit Pimcore opgehaald en niet opgeslagen in Magento. Hoewel deze aanpak misschien niet baanbrekend of extreem innovatief is, is het wel van belang voor een verbeterde laadsnelheid en een optimale gebruikerservaring.
Prerendering met Speculation Rules
Met de reeds verzamelde gebruikersdata kunnen we redelijk accuraat voorspellen waar een bezoeker naartoe zal navigeren. Door middel van de Speculation Rules API laden we pagina’s vooraf in. Hierdoor wordt de laadtijd aanzienlijk verkort. Bij Zitmaxx.nl hebben we gezien dat 12% van de pagina’s uit een pre-render komen met een TTFB van 0ms.
Tevens laden we pagina’s in wanneer de gebruiker over een link op de pagina hovert. Wanneer deze dus niet reeds prerendered is, gebeurt dat alsnog op de achtergrond.
Geen eindstreep
Emico en Zitmaxx werken sinds 2013 samen om het maximale uit de webshop te halen. Iedere week weer zijn er kleine en soms grote stappen voorwaarts. We zijn trots dat we opnieuw een prachtig record hebben gevestigd. Op naar de volgende mijlpaal!
