Case study: Speed optimisation
Taking a Shopify website to new speeds
Shopify stores can be notoriously slow. Our client wanted their store to load faster, both for the better google ratings, and the better user experience reducing bounce rate.
Analysing site issues
We started by analysing each of the store’s different page templates in detail, using a range of tools to paint a complete picture. Tools such as Google search console, Chrome dev tools, and Webpagetest.org, helped us to identify inefficiencies amongst the 100s of lines of code, and dozens of downloaded assets. We also generated speed report benchmarks to compare against future changes.
Tackling low hanging fruit
Straight away we noticed that there were a number of historic code assets that were no longer being used, so could be immediately removed. We then made the remaining assets load into the page more efficiently, either by preloading them in the case of theme javascript or CSS files, or by pre-connecting to the servers of 3rd party tracking software.
There were no Shopify apps that we could usefully delete but that would have been another opportunity had it existed.
These changes produced an immediate improvement in First Contentful Paint (FCP) and Total Blocking Time (TBT).
Improving page layout efficiency
Making relatively small changes to the stylesheet reduced the occasions where a piece of UI changed dimensions as it loaded in. This reduced redraw events and thus increased the efficiency of the pages loading in the browser.
These changes improved Total Layout Shift (TLS).
Loading tracking tags using GTM
All the tracking tags that help you track your digital marketing campaign are an important necessity. Yet they can have a surprisingly negative impact on page load speed as you add more and more of them. We packaged all these tags in Google Tag Manager to minimise their impact as much as possible.
Delaying process hungry javascript
The final step was a step by step review of javascript functions that were adding extra content or interactivity to the website. These sorts of functions that manipulate a page’s display or functionality are always processor intensive and have a real impact on page loading. Any functions that operated lower down the page were delayed until the user started to scroll for deeper content. And we made carefully chosen changes to functions that installed picture galleries at the very top of the page. Our updated code rendered the first image in the gallery immediately, and then paused for a small but critical amount of time before rendering the remainder.
These changes significantly improved Largest Contentful Paint (LCP) scores on product pages.
Final results
Significant improvements were made to all pages. Critically important landing pages like the home page and product pages had their Lighthouse Speed Scores effectively doubled.
Pageloading speed performance as reported by Google Search Console
Home page performance improvements
| Metric | Lighthouse speed score | First Contentful Paint | Speed index | Largest contentful paint | Cumulative Layout Shift |
|---|---|---|---|---|---|
| Initial | 31 | 3.9sec | 9.1sec | 7.8sec | 1.209 |
| Final | 64 | 2.3sec | 7.1sec | 7.9sec | 0.05 |
| % Improvement | +106% | +40% | +11% | -1.3% | +2400% |
Product page performance improvements
| Metric | Lighthouse speed score | First Contentful Paint | Speed index | Largest contentful paint | Cumulative Layout Shift |
|---|---|---|---|---|---|
| Initial | 37 | 3.3sec | 8.5sec | 7.8sec | 1.209 |
| Final | 70 | 2.3sec | 8.8sec | 4.6sec | 0.05 |
| % Improvement | +90% | +30% | -3.5% | +41% | 2400% |