How fast is your Shopify Theme

By admin
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.