No items found.

How we improved Adelante's Shopify Theme speed by more than 80%

Written by
Tom Bedford
March 5, 2021

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.

Read Post
Regular speed optimisation will keep you ahead of the pack.
Regular speed optimisation will keep you ahead of the pack.

heading 1

heading 2

heading 3

heading 4

heading 5
heading 6

The rich text element allows you to create and format headings, this is bold text paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
  • This is a list item
  • This is a list item that spans over multiple lines because somebody wrote a lot of content into a list
  • This is a list item
  1. This is a list item
  2. This is a list item that spans over multiple lines because somebody wrote a lot of content into a list
  3. this is a list item

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content. The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a caption

and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create conte

This is a caption

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

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.

Establish Speed baseline

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.

Improve, test, review, repeat...

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:

Round 1 (Dec 2020)
Defer app scripts

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.

Self host library scripts

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.

Lazy-loading images

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.

Only load app scripts where they are needed

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.

Round 2 (Jan 2021)
Preload important assets

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.

Pre-connect to app servers

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.

Toggles for apps not in constant use

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.

Remove unused theme code

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.

Delay app widgets

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.


The Results

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.

Made with Visme

Made with Visme

Made with Visme

Summing up...

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.

Thanks for reading, we’re Inspira Digital.

11 years ago we created the 123rd ever store on the Shopify platform, today we are one of the most experienced Shopify Experts in the world, delivering industry-leading Shopify services for fast-growing ambitious brands. We have helped build 100s of successful stores and have delivered 1000s of individual projects for Shopify and Shopify Plus clients globally.

Clients that work with us know we work passionately, to make sense of your commerce business, so if you want to talk to a team of experts about how best to take advantage of the Shopify platform, then let's talk.

Inspira Digital — High volume commerce handled beautifully.

Get in touch

Let chat today about achieving your goals on Shopify.

Get in Touch