How we helped a client gain 675% growth in eCommerce checkout performance in 6 weeks!
If you run an online business, you know how important is your checkout experience. There are several posts that were written about the importance of how to build your website checkout and how to keep it simple and effective.
However, this post is not about theories and suggestions, this post is about a real use case, a problem which was presented to us, and what approach our team followed to solve that problem. And finally, most importantly, what were the results. This is a case study.
What was the problem?
The business which is running its online eCommerce operations on Magento, reached out to our team to help solve their checkout problem. The checkout was heavily customised and despite all efforts, the checkout was taking somewhere between 15-21 seconds to load the page, resulting in massive drop-offs.
One common mistake that I see even some seasoned agencies make is adding more plugins/modules for performance. Adding more stuff will only make it worse.
The fundamentals of site speed and performance boils down to these two very simple metrics.
- Number of Requests
- Size of Requests
Our Strategic Approach to this Problem
While there were many good suggestions that came in, like lazy loading, improved caching, we felt these were only symptomatic fixes, and will not solve the real problem causing the performance damage. We proposed we do a performance benchmarking process understanding the nature of requests, template rendering mechanism, asset loading and all the modules involved to render the checkout page. The client trusted us, and gave us the go ahead.
We benchmarked the checkout and studied the mechanics behind it thoroughly and came up with following plan of action.
- Declutter and Remove Dormant assets (images, js, css and templates)
- Segregated the active Js files into two sections. Libraries and DOM modifiers. Primarily identifying the JS files which are required by other JS files to work properly, example jQuery, KnockoutJs etc.
- Modify checkout layout XML to forcefully remove any template which is not required or is not necessary. (These three steps alone improved the checkout performance by 44%!)
- We deferred all the DOM modifier scripts and kept only JS libraries to get rendered on page load. This significantly improved the perceived load time of the page. User do not need to wait for them to load before accessing the page. Most time was spent here in trials by carefully observing page behaviour and test cases.
- We optimised and created separate bundles of JS files using advanced bundling. Since It was an older version of Magento, we couldn’t use pre-loading, however the overall perceived load times still improved to 2-3 seconds.
This led to the combined improved of 675%!!!
Laws of physics do apply on Site speed too, Make it light, to make it jet.
Feel free to reach out to me if you need help with your project, using this link.