Plus Page Speed Optimisation
If you’re in eCommerce, one of the most important factors that affects conversions is page speed, especially on mobile devices. With eCommerce merchants typically seeing over 70% of their traffic coming from mobile devices, it’s vitally important you get the most out of your eCommerce platform to ensure a positive user experience.
In the case of Minimax, this was always something the group had struggled with and new would be of great value to them if they could improve their load times. With this in mind, the team at Minimax engaged OSE to undertake a page speed optimisation project for their Shopify Plus website.
Improving Page Speed on Shopify
Because the research phase of a page speed exercise is so important, it heavily shapes the work we do to improve page load times.
In the case of Minimax, this was an exercise which required us to reduce page load times from approximately 12 seconds per page, to around 6 seconds as our initial goal.
Across the spectrum of our research, we found that most areas of the Minimax site needed work, and were contributors to our 6 seconds we needed to find. This is actually a relatively common scenario, where modest improvements across the board add up to a significant change in performance.
However, of particular interest with Minimax, was the fact that two of their previously installed apps, were accounting for around 3 seconds of load time. Luckily for Minimax, these apps were not being used, and were largely redundant allowing us to remove these and focus on other areas where we could pull back time.
Minimax Page Speed Results
At the time of releasing the page speed improvements exercise, OSE was able to deliver the following change in load times for the Minimax group:
• Page Speed: Reduced from an average load time of 12 seconds to 4 seconds
• GT Metrix Scores: Improved from a score of E to A
• File Size: Reduced from 13MB page load time to an average below 5 MB
• HTTP Requests: Reduction from approximately 300+ requests to less than 150 requests on average
• App Optimisation: Removal of 2 apps causing excessive back-end code loops
• Images, CSS and JS: Reduction in Image, CSS and JS files through minification which affected the overall page file sizes and number of elements being loaded into page.
Overall the Minimax team were very pleased with their page speed optimisation exercise, and saw sizeable improvements in on-site conversions within the first two-weeks of releasing code to production. This exercise was undertaken May 2021, with results measured at the time of release.
OSE is currently working with Minimax to ensure these load times remain a constant, as well as a series of other on-site work which will encourage higher conversion rates and overall sales volumes.
Understanding Current Page Speed
Starting out the first thing OSE typically undertake in a page speed project, whether it’s for Magento, Shopify or any other eCommerce platform is to record the current state of play. This includes evaluating the following metrics:
Google Page Speed Insights
One of the most widely used tools on the Internet for evaluating how to improve page speed is Google’s very own tool.
OSE use this tool to individually evaluate mobile and desktop performance and increase scores as we improve the over load of pages.
File Size and HTTP Requests
Obviously the less element you have loading into page the faster your pages will run, but the physical combined size of these elements is a major factor when looking to improve page speed.
OSE reviewed both file size and HTTP requests as part of our research phase when evaluating the Minimax website.
GT Metrix Scores
A widely used page speed tool which utilises Google Lighthouse technology to rank your website from A to F and provide you with a score out of 100%.
This tool is particularly useful as it provides our team with insights where pages are bottle-necking when loading.
Actual Page Speed
Here we use the term “actual page speed”. This is the time it takes a page to load without caching page items such as images, CSS and JS, as if it was the first time a visitor had come to your site.
To get this value, we use the Network tab on Google Chrome’s Inspector Tool and select ‘Disable Cache’ to understand the actual page speed of your Home, Category, Product and any other key pages in scope.
Backend Code Loops
Although more difficult to diagnose with Shopify Plus, OSE took time to diagnose which apps and code on the server-side of Shopify were making excessive calls to the server.
Because apps are created by third-party vendors, quality can vary. This was the case with Minimax, where we uncovered at least two apps which were causing significant page load adage.
Images, CSS and JS
One of the common fixes developers will focus on when working to improve page load times is to reduce image sizes, minify and combine CSS and JS files, and decrease the number of files loaded into page by using smart image formats.
This was an area where we were able to make a number of notes that allowed us to isolate key offenders we could look to work with to improve as part of this exercise.
We Should Talk.