How to get a lightning fast Magento: an Emico use-case

Magento is a popular e-commerce system worldwide. At RUMvision, we'd like to share how Emico, one of our partners, ensured that their project, Zitmaxx.nl, became one of the fastest e-commerce websites we know of. And yes, this website was built using Magento.

  • by Roderik Derksen
  • Published
  • Reading time ± 4 minutes
How to get a lightning fast Magento: an Emico use-case

Ranking in our free tool

With our free tool, you can have your webshop independently rated and ranked based on actual user experience and well-founded KPIs. More than 15,000 sites have been rated, with Zitmaxx among the absolute top.


Screenshot RUMvision main dashboard of zitmaxx.nl

Emico has proved that it is possible to make a webshop with customization on Magento 2 and Hyvä, one of the fastest webshops we know.

What processes and tools did Emico use?

Emico monitors its shops through the Emico e-commerce monitoring tool. With this tool, you can see in real-time how a shop performs in terms of technical KPIs, such as statistics on cache, orders, server load, varnish, redis, (slow query) logs, tests, and much more.

RUMvision is essential and complementary to Emico’s in-house monitoring. At the same time, Emico examines its code and processes, while RUMvision assesses the experience of real visitors.

Focussing on the Core Web Vitals

The Core Web Vitals are a set of performance indicators from Google that measure how well a website scores in terms of user experience, such as loading speed, interactivity, and visual stability. Many consider ‘passing’ the Core Web Vitals crucial, especially since this assessment contributes to your webshop's ranking with Google, affects CRO, and, in certain cases, the quality score in Google Ads.

After the implementation of Hyvä, it was immediately clear to Emico that the biggest gains could be made in Time to First Byte (TTFB). TTFB is the time it takes for your device to receive the very first data from a website after clicking on a link. RUMvision's data shows that 83% of all Magento shops have TTFB above the 800 ms mark, which means they score insufficiently on the Core Web Vitals here.

Prevent your performance from being limited by a sub-optimal hosting environment. After all, a good TTFB starts with excellent hosting. Emico works with Hypernode, a dedicated Dutch Magento hosting company.

Getting the most out of caching

Caching ensures that data requested by the front end is stored efficiently, allowing the same data to be served instantaneously the next time without revisiting the source. A limitation of this principle is that the first request must constantly be retrieved directly from the source before it can be cached. This means that this first request will be somewhat slower.

To consistently provide users with up-to-date data, the cache validity period is often limited. Clearing the cache restarts the process, causing the first request to be slow again. Initially, the cache hit ratio was approximately 60%, meaning many users still encountered uncached data.Before cache optimizations: Cache hit ratio of 60%

Emico improved the hit ratio and TTFB by focusing on cached responses. By frequently and automatically ‘warming’ the cache of the full sitemap, you prevent users from requesting non-cached pages.

After cache optimizations: Cache hit ratio of 96%

For caching and configuration, Emico uses Varnish, which is optimized with tweaks to maximize performance. Furthermore, Emico implemented Varnish xKey with soft purge to refresh cached content more targeted, significantly improving the website's cache efficiency and load time. Meanwhile, the cache hit ratio is over 96%, ultimately resulting in extreme gains for the average TTFB.

Improving the Interaction Next Paint (INP)

LoAF data in RUMvision gives insight into the impact of third parties on INP. Many people think GTM significantly impacts website speed because it often comes up in Lighthouse audits. This is not so bad; for example, you can test to load GTM through Partytown to improve performance in some cases. The LoAF data showed that our third parties have little impact on INP, but there is still marginal room for improvement in better bundling of JavaScript code in this case.

feature: Long animation frames
Limited availability

Long animation frames is not Baseline because it does not work in some of the most widely-used browsers.

Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.

Since Hyvä version 1.3.7, Emico has used the Alpine.js x-defer fetchpriority="low" plugin, which ensures that only the necessary JavaScript is executed directly. This increases a page's interactivity and reduces the main thread's blocking time, which again benefits the INP score.

Backend optimizations

Magento 2 is a large and complex backend platform. Without automated testing and monitoring, performance can regress. In Emico's case, with New Relic, bottlenecks, such as slow database queries, can be found and optimized by proper monitoring.

Emico also uses Redis caching for heavy operations, so they only need to be executed once. This ensures that underlying services and libraries are always up-to-date, ensuring optimal performance and maximum security.

Third-party choices

Use as few (third-party) modules as possible. Unfortunately, their quality can vary, which is often the cause of performance and stability problems. A tip is to thoroughly audit the modules you want to use first to minimize the technical impact.

Smart handling of images

Images that are not directly visible are not loaded, so the browser has more time for other tasks. Emico uses a custom CDN solution to optimize visible images, which, of course, are in a WebP format.

feature: WebP
Baseline Widely available

WebP is well established and works across many devices and browser versions.

  • Supported as of Chrome 9, Edge 18, Firefox 65 and Safari 14
  • Resulting in full support since September 16, 2020
  • Continue reading about rfc9649

Register to RUMvision to see more resources and learn if your website visitors would already benefit from this feature today.

Furthermore, the images are retrieved directly from Pimcore and not stored in Magento. While this approach may not be groundbreaking or innovative, it is important for improved loading speed and an optimal user experience.

Prerendering with Speculation Rules

With user data already collected, it becomes possible to reasonably predict where a visitor is likely to navigate next. By utilizing the Speculation Rules API, these pages can be preloaded, significantly reducing loading times. At Zitmaxx.nl, this optimization results in 28% of pages being pre-rendered, achieving a TTFB (Time to First Byte) of 0ms.

Pages are also loaded when the user hovers over a link on the page. So, when it is not already pre-rendered, it still happens in the background.

Conclusion

We hope this article has provided valuable suggestions for your consideration. Every e-commerce website requires its own tailored approach, but with care, attention, and a deep understanding of real user experience through RUMvision, the optimization process becomes much smoother. Happy optimizing!

Share blog post