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's Core Web Vitals (CWV).
Why publish this data? Jump to heading
In the Shopify Performance Team 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 theme to improve their Largest Contentful Paint (LCP) by 25% and their Cumulative Layout Shift (CLS) by 24%. You can learn more about it in our case study.
With any performance project, the first 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 people were asked to build an airplane from the same set of bricks, I am sure you would get two 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 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 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 we see 60% of stores don’t pass CWV’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.
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 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 and 2 is that synthetic tools don’t always reflect what real users experience. The problem with Option 3 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 of real user data of our top 100 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, First Input Delay and Cumulative Layout Shift at the 75th percentile. The results show the percentage of stores Achieving Good, Moderate and Needs Improvement levels as set out in Google’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.
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 assessment. It is also the one we see has the biggest impact on conversion.
8%
of stores pass LCP
at the minimum
73%
of stores pass LCP
at the maximum
First Input Delay (FID) Jump to heading
First input delay has never represented responsiveness of a page well. This is one reason why Interaction to Next Paint (INP) will replace FID in 2024. Unfortunately, at the time of writing we don’t collect INP so can only focus on FID.
44%
of stores pass FID
at the minimum
95%
of stores pass FID
at the maximum
Cumulative Layout Shift (CLS) Jump to heading
There was a large range in how well themes did with CLS. We don't see this metric correlate as closely with conversion as other metics. CLS issues can be easy to fix and represents an easy way to remove user frustration.
13%
of stores pass CLS
at the minimum
87%
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 in 5 of its stores passing the assessment. The lowest performing theme only had 1 in 30 stores passing.
3%
of stores pass CWVs
at the minimum
57%
of stores pass CWVs
at the maximum
How to improve theme performance Jump to heading
LCP and CLS are the 2 metrics that need the biggest improvement. The 3 biggest causes of degradation in these metrics are:
- Lazy-loading your LCP image
- Async Loading 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 party scripts
For items 1 and 2, we have some new features in Liquid that make this much easier to address now:
-
Default lazy loading for the
image_tagfor sections further down the page -
New section properties
section.index,section.index0, andsection.locationfor 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, not reserving height for images, check out Optimizing images for performance on Shopify.
For item 4, 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 of those categories, check out our page on Techniques for Optimizing Web Performance 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.
Summary Jump to heading
Theme performance can be dependent on many things. Our mission in the Shopify Performance Team 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.