Struggling to achieve good Core Web Vitals performance?
Get assistanceMy theme shows up slow, is that bad?
Not necessarily! The real-user performance of a store is dependant on a lot of factors, including, but not limited to: the theme code, customizations to the theme code, installed apps, and additional third-party JavaScript, including tag managers.
However, when looking at aggregated data across multiple websites, the theme code has the highest correlation to store performance.
Where does this data come from?
All of the data reported here is publicly available through HTTPArchive and the Chrome User Experience Report (CrUX) via BigQuery. Information about whether a website is on Shopify and which theme it uses comes from HTTPArchive. That data is then joined with CrUX to obtain real-user performance metrics from sessions in Chrome browsers. You can find and review the query in this site's source code.
How were themes selected to be included?
For total origins (domains) counts, I counted all root (home) pages in HTTPArchive. For each theme highlighted here, I only counted themes with a theme_store_id
. In addition, I currently filter out any theme with less than 50 origins for the latest month. So new, growing themes can be included, but older diminishing ones will be dropped even if they have data in earlier months.
Note that not all websites are included in the Chrome User Experience report so the number of origins is not equal to the number of installs. Learn more about the eligibility for inclusion. Another thing to keep in mind that most ecommerce traffic is on mobile devices. Most themes have fewer origins in the desktop data which is also subject to the minimum of 50 origins.
Do you think your theme is missing? The data is quite messy so I'm cross-checking it against a list of "confirmed themes". I might have missed yours. Check this JSON file. If your theme is not on there and you think it has enough popular installs, create an issue or submit a PR on Github or contact me.
Which pages were included? Can I see data split out by page type or template (e.g., home, product, collection)?
The Chrome User Experience Report (CrUX) data set only reports cumulative data for an entire origin, or website. Thus, the data includes all pages.
It is not possible to split the data by page type. However, you can use the CrUX API to try to find page-level CrUX data for your own website. The easiest way to do this is to run Page Speed Insights on your home page, your most popular collection page, and your most popular product page. If that individual page has enough data, you will be able to toggle the "This URL/Origin" selector at the top right of the Core Web Vitals assessment. "Origin" shows data for the entire site, and "This URL" shows only the data for that page's URL.
How is this different from the data on the Shopify Performance site?
The primary difference is the source of the data. The Aggregated Theme Performance data page uses internal, non-public data collected by Shopify. This site uses the publicly-accessible Chrome User Experience Report (CrUX) data.
Another difference is that more recently, they began limiting the data to only the 3 most recent versions of a theme. That data is not available in CrUX or HTTPArchive.
This site also provides additional metrics like TTFB, FCP, number of origins, and estimated market share (at the time of writing this FAQ).
These two sites are great to use together. This site contains all theme versions plus additional data while that one shows the trend for the more recent versions.
How is estimated market share calculated?
First, I count the total number of Shopify sites in the Chrome User Experience Report (CrUX) data set. I use that as the denominator for the market share calculation of an individual theme.
This metric is not the total market share of all Shopify sites. Rather, it is the total market share of sites with enough traffic to be included in CrUX.
What does the % Passing CWV number mean?
This is the percentage of websites using the theme that "pass" all Core Web Vitals. A passing score for a website means that 75% of users experience a good LCP, CLS, and INP. Learn more about these metrics on web.dev.
What do the red, yellow, and green categories mean for each metric (e.g., LCP)?
The green number is the percentage of websites for the theme that achieve "good" for that metric. Good is defined as at least 75% of users having a good experience. For example, at the time of writing, a "good" LCP occurs if the Largest Contentful paint happens in 2.5 seconds or less.
The red number is the percentage of websites for the theme that achieve "poor" for that metric. Poor is defined as 25% of users or more having a poor experience. For example, at the time of writing, a "poor" LCP occurs if the Largest Contentful paint happens in more than 4.0 seconds.
The yellow number is the percentage of websites for the theme that "need improvement" for that metric. It is calculated as difference between the good and poor numbers. For example, if 80% of the theme's origins have a good LCP and 5% have poor, then 15% need improvement.
Learn more about these metrics on web.dev.
I noticed an error. Where can I report it?
Thanks for the catch! If you're comfortable, I'd love issues to be reported in Github. If Github is not your jam, you can contact me via my personal site's contact form.