How fast is your Shopify Theme

Created on November 12, 2023 at 10:22 am

Everyone wants to use a theme that performs well. By benchmarking popular theme performance we hope to provide the data required for theme developers to identify opportunities to improve and in turn help speed up stores across the whole of Shopify.

In this post we have aggregated the performance of some of the most popular themes on Shopify using our real user data. We have published performance data on Google ORG ‘s Core Web Vitals ( CWV ORG ).

Unfamiliar with the Core Web Vitals? Learn more about the Key web performance metrics in 2023 DATE .

Why publish this data? Jump to heading #

In the Shopify Performance Team ORG our mission is to speed up all stores on the platform. Making sure themes apply best practices is a major part of achieving that goal. Working with theme developers has the biggest potential in achieving that mission.

We work with Merchants to help them improve their storefront web performance. These engagements help us uncover some common performance patterns. We also work with theme developers to help improve performance. For example, we worked with the Avenue FAC theme to improve their Largest Contentful Paint (LCP) by 25% PERCENT and their Cumulative Layout ORG Shift (CLS) by 24% PERCENT . You can learn more about it in our case study.

With any performance project, the first ORDINAL step is to benchmark your performance. This is the purpose of releasing this data. Now we have a benchmark, we can see where the opportunities exist to improve.

My theme shows up slow, is that bad? Jump to heading #

In short, not necessarily.

The final performance of a store is dependant on a lot of factors, including but not limited to:

The design and layout of individual pages The customisations made to theme code The 3rd Party apps added to the shop The version of the theme you are on

Think of a theme like a set of lego bricks. If two CARDINAL people were asked to build an airplane from the same set of bricks, I am sure you would get two CARDINAL very different outcomes. A theme is like the bricks and to achieve the best performance, you need to make good decisions when building.

The aim of this post is to start a conversation about how well themes are performing and where they can improve. For the first ORDINAL time it gives theme developers a view of how their themes perform in the real world.

Applying the considerations above we can use this blog as a good example. This blog uses Dawn PERSON as its theme and passes the CWVs assessment. But, it is a very simple store and doesn’t have many apps or customisations. Looking at the results for Dawn PERSON we see 60% PERCENT of stores don’t pass CWV ORG ’s. This shows the underlying theme is fast out of the box, but other things are causing many sites to slow down. Understanding why would be the next step in improving the underlying data.

The Core Web Vitals RUM data for this blog taken from Treo ORG

It is important to note the theme data is aggregated and will include all versions of that theme. Simply updating to the latest version of a theme can often give a good boost to web performance.

The methodology Jump to heading #

Until now the best options for assessing a theme’s performance were:

Run Lighthouse FAC on the demo version of the store Test the demo store in a synthetic tool like WebPageTest Look up the Chrome User Experience Report for a store already using the theme

The problem with options 1 CARDINAL and 2 is that synthetic tools don’t always reflect what real users experience. The problem with Option 3 LAW is that it is time consuming. It also assumes you know a store using the theme and you would make similar design decisions as the store you are comparing. The final store performance is dependent on more than the base performance of the theme.

By using real user data on real stores we can see how the themes perform in the real world when additional features and apps have been added in.

We aggregated 7 days DATE of real user data of our top 100 CARDINAL themes by the number of stores with them installed. It is important to note that we decided not to account for different prefixes and suffixes in the name. This would require us to manually review and adjust the dataset every time we query it.

For each store we measured the Largest Contentful Paint ORG , First Input Delay and Cumulative Layout ORG Shift at the 75th ORDINAL percentile. The results show the percentage of stores Achieving Good, Moderate and Needs Improvement levels as set out in Google ORG ’s Core Web Vitals.

The data Jump to heading #

To make reading the results easier and keep this post short, we’ve published the full table on a seperate page. Click the image below to see the full results in a new tab.

Click on the table above to see the full results

Key findings Jump to heading #

Largest Contentful Paint (LCP) Jump to heading #

This metric is the one that stands out as having the fewest number of stores passing the CWV ORG assessment. It is also the one we see has the biggest impact on conversion.

8% PERCENT of stores pass LCP

at the minimum

73% PERCENT of stores pass LCP ORG

at the maximum

First Input Delay (FID) Jump to heading #

First ORDINAL input delay has never represented responsiveness of a page well. This is one CARDINAL reason why Interaction to Next Paint (INP) will replace FID ORG in 2024 DATE . Unfortunately, at the time of writing we don’t collect INP ORG so can only focus on FID ORG .

44% PERCENT of stores pass FID

at the minimum

95% PERCENT of stores pass FID

at the maximum

Cumulative Layout PRODUCT Shift (CLS) Jump to heading #

There was a large range in how well themes did with CLS ORG . We don’t see this metric correlate as closely with conversion as other metics. CLS ORG issues can be easy to fix and represents an easy way to remove user frustration.

13% PERCENT of stores pass CLS

at the minimum

87% PERCENT of stores pass CLS

at the maximum

Overall CWV Assessment Jump to heading #

To pass the assessment, a store needs to pass all metrics simultaneously. The top performing theme had approximately 3 CARDINAL in 5 CARDINAL of its stores passing the assessment. The lowest performing theme only had 1 CARDINAL in 30 CARDINAL stores passing.

3% PERCENT of stores pass CWVs

at the minimum

57% PERCENT of stores pass CWVs

at the maximum

How to improve theme performance Jump to heading #

LCP and CLS ORG are the 2 CARDINAL metrics that need the biggest improvement. The 3 CARDINAL biggest causes of degradation in these metrics are:

Lazy-loading your LCP ORG image Async Loading PRODUCT CSS required for content at the top of the page Not reserving space for images Not reserving space for content injected by apps or third CARDINAL party scripts

For items 1 CARDINAL and 2 CARDINAL , we have some new features in Liquid LOC that make this much easier to address now:

Default lazy loading for the image_tag for sections further down the page

for the for sections further down the page New section properties section.index , section.index0 TIME , and section.location for more fine-tuning of image lazy loading as well as async CSS loading.

Learn more about the details as well as see code samples in our announcement post.

For item 3 CARDINAL , not reserving height for images, check out Optimizing images for performance on Shopify.

For item 4 CARDINAL , you could use a similar strategy of reserving space on the container for the widget using CSS height and width properties or other sizing approaches like aspect-ratio and object-fit , depending on what type of content is being injected.

If your issues don’t fall in one CARDINAL of those categories, check out our page on Techniques for Optimizing Web Performance ORG which groups articles by which metric they address.

Immediate steps for merchants

If you’re a merchant reading this post think about the following steps in order to improve performance:

Make sure you are on the latest version of your theme so that you can take advantage of any new features and optimizations. We have written a guide on steps to do that here. Review all apps installed on your store to make sure they are still used and provide value. Audit customisations you have made and make sure they are still required. Updating to the latest theme may mean some features are supported natively. Monitor performance once you are done. We recommend using real user data from CrUX PRODUCT .

Theme performance can be dependent on many things. Our mission in the Shopify Performance Team ORG is to make as many stores as fast as possible to make ecommerce better for everyone. Themes play a major part in this mission.

The benchmarking data in this post should help theme developers understand where they might be failing so that they can dig deeper to find out why. Use the tips here and on our blog to implement improvements. Subscribe to our newsletter for future news and tips. For merchants, make sure you update your theme regularly to take advantage of new features and optimizations of that theme.

If you are still struggling with performance, contact us to discuss a paid engagement.

In our next post we will explore some of the key reasons behind the data shared above.

Connecting to blog.lzomedia.com... Connected... Page load complete