There’s plenty of information online about how to measure Core Web Vitals and whether your site is scoring well or poorly. But there’s very little actionable advice about what you need to do to make improvements, specifically on Shopify.
In this article, we’ll look at how exactly you can improve your Core Web Vitals score on your Shopify store. We’ve tried to make as many of these recommendations actionable without a developer, but some require expert technical implementation.
We’ll break down each core web vital metric in turn, explain what factors affect their performance, then show you how to improve each CWV metric on any Shopify store.
Click on the headings below to jump straight to that section:
- How Core Web Vitals Are Calculated On Shopify
- How To Improve LCP On Shopify
- How To Improve CLS On Shopify
- How To Improve FID On Shopify
- Shopify Core Web Vitals Apps
Shopify SEO audit for your online store TODAY ⬇What Are Core Web Vitals
Let’s very briefly recap what Core Web Vitals are.
Core Web Vitals are a set of metrics Google uses to measure web page performance and experience for users. For each metric, URLs are marked as either “Green - Good”, “Amber - Needs Improvement”, or “Red - Poor”.
Core Web Vitals scores have a direct impact on search engine rankings.
LCP - Largest Contentful Paint
How long does it take the largest element on your page to render onto the screen?
CLS - Cumulative Layout Shift
How much does the page layout shift around as the page loads?
FID - First Input Delay
How long does it take the page to become responsive to interactions?
How Core Web Vitals Are Calculated On Shopify
It’s important to understand how Google calculates Core Web Vitals scores because this affects how to make meaningful improvements. The data for Core Web Vitals comes from CrUX data which measures the performance for real website visitors using the Chrome web browser. This is called ‘field data’.
For each CWV metric, there’s a minimum average score you need to hit to not be marked as ‘Poor’. This is based upon the average scores recorded against groups of pages. It’s important to understand that your Shopify website isn’t scored against a core web vitals metric; the URLs on your website are.
When your Shopify store fails on a Core Web Vitals metric, Search Console will show you a sample of URLs that were affected by the problem. This helps you narrow down where the issue is and apply target improvement. Before beginning any Core Web Vitals optimisation work on your Shopify store, first identify which areas of improvement will be most impactful. Don’t waste your time on work that won’t produce a positive result.
Shopify Core Web Vital Metric Optimisation Tips
Core web vitals is all about delivering your most important content and resources as quickly as possible.
Page speed optimisation isn’t a one-time thing. Your organisation needs to adopt a culture where page speed impact is factored into all decision making. For every enhancement you consider making to your store, consider what the trade-off will be on page speed.
How To Improve LCP on Shopify
LCP refers to the largest element on your page and how long it takes the browser to load and render that element onto the screen. This will normally be an image, but it could also be a text element.
To improve LCP on a Shopify store it helps to understand the factors that affect LCP. There are four stages that take place to load your LCP element.
| No. | Stage | Description |
|---|---|---|
| 1 | Time to First Byte | The time from when the web browser initiates until the time the browser receives the first byte of data in the HTML response |
| 2 | Resource Load Delay | The delta between the TTFB and when the browser begins loading the LCP element |
| 3 | Resource Load Time | The time it takes for the browser to download the LCP element |
| 4 | Element Render Delay | The delta between downloading the LCP element and rendering it onto the page |
LCP is all about how long it takes the web browser to paint/render your largest element onto the page. Loading and painting aren’t the same things. Even if your LCP element is optimised to a small tiny file size, LCP can still take a long time because of:
- Resource Load Delay. It takes too long for the browser to begin downloading the element
- Element Render Delay. After the LCP element has been downloaded by the browser, it takes too long to render the element onto the page.
The takeaway insight here is that LCP is more than just the file size of your largest element. It’s the time it takes to complete the 4 stage process above. To improve your LCP scores, focus on the whole process of loading and rendering your LCP element.
How To Find the LCP Element On Any Shopify Page
To improve LCP you need to know which element on a page is the LCP. This is easy on Shopify. Simply go to PageSpeed Insights and analyse the URL that you need to find the LCP for. When the report has finished, scroll to the bottom and look in the ‘Diagnostics’ section. There will be a row called ‘Largest Contentful Paint element’. Expand this to see detail about what element is the LCP on this page.
Don’t Lazyload the LCP Element
Lazy loading is a method used to only load an element when it becomes visible in the viewport. This helps make the above-the-fold content load faster. You shouldn’t lazy load your LCP element because it will delay how quickly the browser begins downloading the element.
On Shopify stores, the LCP element on a product page will normally be the main product image. Or on a blog post the LCP element will probably be a blog header image. Some Shopify themes will automatically add lazy loading to every image, even those that appear above the fold. Review each of your Shopify templates and work out what the LCP element is. If it appears above the fold, make sure the attribute below isn’t included on the HTML tag:
loading="lazy"
Preload the LCP Element
You can use rel=”preload” to tell web browsers to download a specific resource as soon as possible. By applying rel=”preload” on your LCP element, the browser will prioritise loading that resource into the page.
You can do this yourself by editing your theme code. For Shopify theme developers, there is a filter that can be added to Shopify liquid templates that will output a preload tag.
Use Nextgen Images
New image formats such as WebP are smaller in file size than traditional formats such as JPG and PNG. If your LCP element is an image, using a Nextgen image format will speed up download time. Where possible, use WebP images, but remember to include a fallback for legacy browsers that don’t support nextgen images.
New Shopify themes will automatically convert your images into WebP and serve them to appropriate browsers.
Make Sure the LCP Element Is Included In the Initial HTML Response
Reduce ‘Resource load delay’ by making sure your LCP element is delivered within the initial HTML response. If the LCP element is loaded into the page by an external resource (such as a JS script) it will take longer for the browser to begin downloading the LCP element.
Whether this affects your Shopify store will depend on the store theme you use. A quick way to test this is to work out what your LCP element is, then view the page with JS turned off. If the LCP element isn’t outputted in the page HTML, that means it’s not delivered within the initial HTML response.
Eliminate Render-Blocking Resources
The ‘Eliminate render-blocking resources’ advice has been around for ages. But what does it actually mean? Some resources such as scripts and stylesheets block a web page from rendering. When a browser discovers a resource, it will stop downloading the page, and instead download and execute that resource. This delays rendering the page for users.
A lighthouse report will show you the render blocking resources for any page. So you need to work out which of your scripts and stylesheets are render-blocking, and then optimise how they’re delivered.
Eliminate Render Blocking JS
First you need to understand two attributes called defer and async. These HTML attributes can be attached to external scripts and tell the browser when to download/execute the resource.
| Attribute | Definition |
|---|---|
| Defer | Don’t download or execute the script until the page has rendered |
| Async | Continue downloading the script whilst downloading the rest of the page, but then stop downloading the page and execute the script |
So by applying async or defer to your JS scripts, you can minimise their impact on page rendering. Shopify won’t automatically async or defer your scripts so you’ll need to go into the theme liquid templates and add the attribute yourself. But be very careful when doing this process as you need to consider what impact deferring a script could have on your store functionality.
You’ll also find that apps and plugins you install on your Shopify store will output render blocking JS scripts. You can identify these through a Lighthouse report. Give careful consideration to every app you install on your store and think about the potential impact on page speed. Some merchants won’t even realise that unused apps are still installed on a store and affecting page speed. When you uninstall an app, make sure that it doesn’t leave behind any legacy code in your theme.
Eliminate Render Blocking CSS Stylesheets
To eliminate render-blocking CSS, you should inline the critical styles needed to render the above-the-fold content. It’s not efficient to download your entire stylesheet immediately for every visitor as most of the CSS won’t be used.
The solution is to inline the critical CSS needed to render the above-the-fold section of your page by including it within a style tag in your head. Then add the code below to the
of your theme.liquid.js to load your main stylesheet asynchronously.<link rel="alternate stylesheet" href="slow.css" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">Before releasing this to your live store, experiment on a test theme to validate that your page still appears correct visually.
How To Improve CLS On Shopify
CLS is all about how much the page layout shifts around as a page loads. The cause is normally images that move content around as they’re loaded and rendered.
Add Width and Height Attributes To Your Images
The easiest CLS solution is to make sure your img tags output explicit width and height attributes. These attributes are applied to the image HTML and tell the browser the image width and height. With this information, the browser can calculate the image aspect ratio and dimensions, and reserve the space needed for that image. This stops the layout from shifting when the image is added into the page.
To do this on an image on your own Shopify store, log in and go to the themes section. And go into ‘Edit Code’ for your theme. Then find the code snippet within your liquid template that outputs the image and add the following snippet to the img tag.
height="{{img.height}}" width="{{img.width}}Look at the liquid templates you use for your Shopify homepage, collections, products and blogs and make sure img tags reference width and height attributes.
Optimise Your Fonts
Those fancy web fonts you load from places like Google fonts can cause CLS problems due to an issue called FOUS (flash of unstyled text). This is where the web browser initially loads a fallback font, and then when the main web font is loaded the text is rerendered causing a layout shift.
Check out this article for more Shopify design tips.
Reduce Reliance on 3rd Party Web Fonts First of all, try and reduce your reliance on third party web fonts. When you import web fonts, only import the font families that you need. Don’t import the different font weights and styles if they’re never used as this will bloat the font file size.
Preload Fonts Web fonts are sometimes loaded from within a stylesheet. This delays how quickly the browser can begin downloading the font. Instead, preload your font files in the
of your store. This will tell the browser to load the font file as a high priority.Use font-display:optional Font-display is a CSS property that tells the browser what to do when a font face hasn't been downloaded within 100ms. The browser will initially load the fallback font and if the custom font hasn’t finished downloading within 100ms, the browser will keep the fallback font rendered on the page. This reduces the risk of the custom font loading in too late and causing a layout shift.
How To Improve FID On Shopify
In our experience, FID is the least common Core Web Vital metric we see affect Shopify stores. Think of FID as a way to measure how responsive a page is during load. Nothing frustrates users more than clicking/tapping and nothing happens.
FID is similar to another metric called Total Blocking Time (TBT). TBT measures the time between when the page begins to render (First Contentful Paint or FCP) and when the page becomes responsive (Time to Interactive or TTI).
TBT is caused by ‘long tasks’ that block the main thread from processing. The main thread is where the browser processes everything needed to load a page. If long-tasks block the main thread from processing, it delays how quickly a page becomes interactive for users.
What’s the Difference Between FID and TBT
The main difference between FID and TBT is that FID is based upon field data (data from real users who’ve visited your Shopify store). Whereas TBT is lab-measurable and is calculated by running tests in a contrived environment with defined network conditions.
As you can’t measure FID when testing your own pages, you should instead measure TBT.
To improve FID you need to speed up how quickly your Shopify store responds to a user's first interaction. This is done by making your Shopify pages load as efficiently as possible. Focus on these three areas:
Reduce the Impact of Third-Party Code
As with all core web vitals metrics, third-party JavaScript is often the cause of problems. Any third-party that blocks the main thread for more than 250 ms will be flagged in a Lighthouse report. Run your pages through Lighthouse to identify which third-party scripts cause problems. Then decide which ones can be set to async or defer.
Reduce JavaScript Execution Time
The time it takes your JavaScript to execute is also important. First of all, run your pages through Lighthouse and identify which scripts take the longest to execute. Lighthouse will flag any scripts that take more than 2 seconds.
Use Code Splitting Rather than delivering all your JavaScript code in a single file, split your code into smaller pieces and only deliver the code needed for that page. This isn’t easy and requires support from the developers who manage your code. You’ll find this much easier if it’s integrated into the development of your Shopify theme at the beginning of the project.
Minify and Compress Your Code When you minify your code, you remove unnecessary whitespace and comments. This reduces the size of the file but speeds up how quickly a browser can execute the code. One of the great things about Shopify is that most theme js is automatically minified.
Like minification, compressing your js reduces the file size and speeds up how quickly the web browser can execute the code.
Minimise Thread Work
The main thread does all the work processing and calculating how to build a page. When the main thread is occupied by intensive tasks, your TBT will be worse. This mostly comes down to how robust your Shopify theme is. Cheap themes built by poor developers won’t load as efficiently as those developed by Shopify experts.
How can you minimise thread work on your Shopify store? As mentioned above, it’s much easier if this is integrated into your theme from the beginning. We’d recommend purchasing a premium Shopify theme with great reviews. Or if you’re building your own Shopify store, make sure you’re working with Shopify expert developers who can ensure your theme is optimised to minimise thread work.
How To Measure Core Web Vitals Performance
Now you understand how to improve Core Web Vitals on your Shopify store, next you need to know how to measure your Core Web Vitals progress.
Search Console
The quickest way to see how your Shopify store currently performs for Core Web Vitals is through Search Console. Go to the Core Web Vitals report from the left menu to get data about how your site currently performs. It will include a breakdown of where you have any Core Web Vitals problems and show you a sample of affected URLs.
Pagespeed Insights/Lighthouse
Pagespeed insights is a free Google tool that lets you measure the page speed of any page. Run your Shopify URLs through the tool to get a detailed breakdown of your performance along with recommended actions to achieve a higher score.
CrUX Report
CrUX is Google’s own dataset of speed/performance for millions of real pages. You can access the CrUX data for your own Shopify store by using the Google CrUX Data Studio Dashboard. The dashboard provides an in depth breakdown of how your site has performed across Core Web Vitals metrics for the past 16 months.
What Do All Those CWV Terms Mean?
When you start to look at Core Web Vitals, you’ll come across lots of complicated terminologies, here’s what it all means:
| Term | Definition |
|---|---|
| Preload | Prompt the browser to prioritise downloading a specific resource. High priority |
| DNS-Prefetch | Resolve domain name |
| Prefetch | Tell the browser to load a resource before the user requests it. Used for resources which are likely to be needed in the near-future (such as the next page). Will speed up loading when the resource is required, but may slow down load of the current page. Low priority |
| Preconnect | Suggest the browser connects to an origin, before resources are downloaded from the domain. Will resolve DNS, and TCP Handshake/TLS Negotiation |
| Defer | Delay loading of a script until after the page has loaded |
| Asynch | Load a script as soon as it’s reached, but continue loading the rest of the page |
Core Web Vitals Shopify Apps
There are lots of shopify apps that claim to be able to improve Core Web Vitals scores. Some of these apps are effective and do deliver a performance improvement. Whilst this can improve your Core Web Vitals scores, there’s no guarantee that you’ll see any effect. This is because Core Web Vitals scores are unique to every Shopify store. If your store’s Core Web Vitals scores are poor because of a specific theme issue, an app probably won’t make any difference.
If you want to take the app route, we’d recommend trialling an app and observing the effect it has on performance. Here are some suggested apps to trial:
- https://apps.shopify.com/core-web-vitals-booster
- https://apps.shopify.com/page-speed-optimizer
- https://apps.shopify.com/swift
If you need any advice or support with your ecommerce business, drop our team a line and we'd be happy to help.
