A deep dive into how we increased Adelante's Page Speed Score by 80% on Shopify Plus.
We’ve been helping Adelante evolve their online store since we started working with them in 2018. In that time they have gone from strength to strength, consequently driving the requirement of new apps, features, and services to be added to the theme. In this article I take a technical deep dive into how we tackle this as a development team.
As a rule, when it comes to site speed and optimisation, every deployment we make is optimised and checked for speed as part of our Q/A process. However, over time, as a clients store develops, it makes sense to review the theme holistically. At Inspira this usually takes the form of routine site review. The tools we use for this are constantly developing and recently with the advent of Shopify’s store speed report it's helping to provide context on site speed for our clients.
In the case of Adelante, it helped put some focus on this issue and contributed to our team identifying some speed and optimisation issues that had built up over time, so after raising this with their team, here’s how we progressed.
We measured the site performance across three of the most impactful pages to user experience.
Whenever you carry out this kind of work it is vitally important to establish an accurate baseline. It’s from this position of rational understanding that we can then compare and accurately measure improvement over time. To this end, we measured the site performance across three of the most impactful pages to user experience, which for Adelante's site are the Homepage, Collection and Product pages. Here we focussed on four key speed metrics.
First Contentful Paint
When the first elements of the site are visible to a visitor.
Largest Contentful Paint
When the main page content is visible to a visitor.
Time to interactive
How long does the site take before a visitor can start to interact with it.
Total blocking time
How long do scripts block the page loading process. These can be the result of app installs, tracking codes or conflicts in the code.
We created a list to let browsers know which assets to start downloading immediately. This helps make sure the most important content is able to load first, so customers can see the page more quickly.
Following the initial assessment in late Nov 2020, we made two rounds of updates to the site, in which we identified the worst offending areas, these were as follows:
For app scripts added to the theme code we adjusted when they would be loaded so they weren’t interrupting customers being able to see the site.
Some aspects of the theme required code which was being hosted on other servers, this increases the chance of a third party service causing delays. By bringing these scripts into the theme assets we reduced the number of external servers that are needed to be connected to in order to load the store.
Images that will appear below the fold do not need to be loaded as soon as a customer visits the site, they can be gracefully loaded as they come into view. While Adelante already had some lazy-loading images in place, we identified that the implementation could be updated and optimised to use more modern native browser lazy-loading where possible.
Apps that enhanced product page features were being loaded site wide. We updated the theme to only load them on the product page - improving performance across all other pages.
There will be a handful of assets crucial to the pages being rendered. So for Adelante we created a list to let browsers know which assets to start downloading immediately. This helps make sure the most important content is able to load first, so customers can see the page more quickly.
When we can’t host an app script in the theme code we have to download it from the app’s server. We can let the browser know it will need to connect to external servers ahead of time. This reduces the time it takes to download the assets for the app.
Apps for measuring customer interactions with the site and A/B testing design changes don’t need to be active unless they are actively gathering data or testing new features. So we included toggles for apps so Adelante could easily enable/disable them with a simple click from within the Shopify Theme settings.
When these apps aren’t being used they can be safely and easily disabled without needing to edit code reducing overhead and providing an immediate speed boost.
Adelante was built using a customised version of the popular Shopify theme Split. When using stock themes they can often include many possible sections, so you can customise your store. Adelante’s theme came with some scripts for sections that weren’t being used, so we were able to selectively remove these to further improve performance.
Some apps that add visual elements to the page such as online chat, below-the-fold galleries and reviews that are less important than customers being able to see and use the main store content first. So we adjusted the load order for these apps reducing page load resources until after customers can already see and interact with the store.
We reassessed the site performance after both rounds of updates and were able to reduce the time taken to see the main page content by more than half. As you can see in the results below we made significant gains across all key metrics when comparing the same metrics from the 18th November 2020 with site measured on 26th January 2021.
By targeting the highest impact optimisations we were able to make significant improvements to Adelante’s site speed over a few weeks.
Following the second round of updates, Shopify’s store speed report updated to show Adelante was no longer slower than similar stores and got us closer to the key, sub 2 second page load goal. While total page load time was still longer than 2 seconds, the perceived speed for the customer (due to staged loading) is under 2 seconds.
Of course, optimisation will always be an ongoing process. The simple fact is that our clients stores are constantly evolving as are the approaches and underlaying technology technology that delivers the site to your eyes. As a result there will always be ongoing and new opportunities to improve site speed.
As we do with the majority of our clients, we continue to work with Adelante to make specific adjustments to optimise their theme code and apps.
If you would like to benefit from our expertise and experience to improve your store speed, then please don't hesitate to get in touch.
