A comprehensive guide on how to improve your Shopify website for Google's Core Web Vitals
As you probably already know, SEO is a critical way for potential customers to find your Shopify store. Maintaining your SEO rankings is an evolving process as search engines decide on new rules of the game, some that could send your store’s search rankings in free fall if you don’t act quickly to follow them.
The Core Web Vitals is one of those new rules and it’s important that you pay attention to it.
Google will start penalizing the rankings of websites that have poor Core Web Vitals starting mid-June of 2021. These are new web performance metrics that Google deems important to your shopper's user experience. It's critical if you're focusing on maintaining SEO for your Shopify storefront to start giving these metrics high priority.
So what are the Core Web Vitals? The Core Web Vitals are 3 new website performance metrics that assess how fast your site loads, how much it shifts around as it loads, and how quickly your site responds to user interactions. Google has decided these metrics are useful indicators of whether or not users have a positive experience with your website [1].
In this article we’ll look at:
Google prefers to send traffic to websites they feel provide a good experience for visitors. This is because providing their users with relevant, easy-to-use, well-performing websites improves their own relevance and brand reputation.
Good website performance has already been shown to positively affect how users engage with your website. Shoppers are more likely to stay on your site and complete a purchase if it’s fast [2]. Google has discovered that having healthy Core Web Vitals helps ensure that your website provides a good user experience for your customers.
From May 2021, Google will start combining Core Web Vitals with the factors it already uses to determine search rankings. Websites with poor Core Web Vitals metrics may find that their search engine rankings are lowered[1] so it's important that you give these metrics your attention for improving and maintaining your SEO.
The Core Web Vitals measure the quality of a user’s experience of a web page. They look at how fast the main content of the page loads, whether the page jumps around on the screen whilst it’s loading, and how quickly features like menus and buttons respond when a user clicks them.
The 3 new metrics are Largest Contentful Paint, Cumulative Layout Shift, and First Input Delay. Let's dive into what these metrics mean and how you can fix them.
Largest Contentful Paint (LCP) is a measurement of how long it takes to see the largest piece of web page content on your screen. This metric is used as a way to measure how fast your site loads. For example, the largest content may be a hero image, heading text, or video.
Google recommends your LCP metric should be below 2.5 seconds. [4]
LCP is often affected by:
To start optimizing your Shopify store’s LCP, first figure out where the problem is the worst by checking your Core Web Vitals in Search Console. Once you've identified which pages have the worst LCP, you can use PageSpeed Insights to figure out what the Largest Content is on the page you're analyzing. Enter the URL of the page into the box and hit Analyze. When it loads, it should provide a large report for the page. Look for the Largest Contentful Paint element listed under the Diagnostics area (half-way down the page). This will tell you what the Largest Content is on this particular page. Here's an example:
Once you figure out what the Largest Content is, your next step will be to figure out why it's loading late and how to load it sooner.
One common strategy to fix LCP issues is adding preload hints to your HTML code. Preload hints are instructions to the browser that tell it which images, scripts, stylesheets and other resources are most important for the page. If you’re using a hero image, for example, telling the browser to preload your image early will prompt the browser to download it sooner, resulting in it showing up quicker from the user’s perspective.
An example preload hint looks like the following:
This code would be added to the HTML <head> tag, where the browser will see it fairly quickly as it parses the HTML.
For example, Baffin (one of our clients), has a hero carousel on their homepage which showcases their featured products. Before we helped them, they had no preload hint for the hero image, and their hero image did not load until a few seconds later (on mobile):
As you can see in the filmstrip that captures how their page loads, the hero image loads slowly, a few seconds later. After adding a resource hint to preload their hero image, their hero image shows up almost as soon as the page starts to load:
This drastically improved their LCP for their homepage.
Items that can be preloaded include:
Setting the appropriate items to preload could improve the Largest Contentful Paint of your page and may create a better user experience[11].
Cumulative Layout Shift (CLS) is a measurement of the visual stability of your website. In other words, it measures how much users experience the content on their screen moving around while your website loads. You’ve probably experienced this yourself on a website where an image or ad causes the whole page to move the content on the page as it loads. It’s easy to see how this affects user experience as you’ll often lose your place in the text you were reading, or click the wrong link as it suddenly shifts. Google recommends your CLS to be 0.1 or less. [5]
How the CLS score is calculated is a little more complicated but if you’re interested you can read about it at https://web.dev/cls/.
CLS is often affected by:
To start optimizing your Shopify store’s CLS, first figure out where the problem is the worst by checking your Core Web Vitals in Search Console. Once you've identified which pages have the worst CLS, you can use PageSpeed Insights to figure out what elements on the page you're analyzing are causing layout shift. Enter the URL of the page into the box and hit Analyze. When it loads, it should provide a large report for the page. Look for Avoid large layout shifts listed under the Diagnostics area (half-way down the page). This will tell you what caused layout shift on this particular page. Here's an example:
After you determine what's causing layout shift, your next step will be to figure out why these elements are shifting content and how to prevent it.
Often times, to improve CLS on your site we recommend:
For images, a simple trick we’ve found to solve CLS problems caused by them is to ensure the width and height attributes are set. For other things, like content that is loaded by JavaScript, we recommend giving the container that the content will show up in fixed dimensions, so it doesn't grow and cause content to shift around.
For example, let’s take product review stars. Review systems are common apps for Shopify, which load dynamically with JavaScript. When product stars load on the product page, they typically shift the page slightly. This can be fixed by simply giving a large enough width and height to whatever contains the stars so it doesn’t expand once the stars load.
First Input Delay (FID) is a measurement of your page’s responsiveness and usability. It measures how long the delay is between a visitor clicking an interactive feature (like a button or expanding menu) and the page responding to the click. A high FID can indicate that the page is still busy loading while the visitor tries to use your website. If the browser is still busy processing code for things like Analytics, Facebook, or a carousel, it can’t start processing the code your click has initiated straight away. Google recommends your FID metric should be 100 milliseconds or less. [6]
FID is often affected by:
For most Shopify stores, FID isn’t frequently an issue. However, if you find it is for your site, a slow FID time might be caused by third-party code. Sometimes this code can take so long to load that the browser freezes.
To improve FID on your site we recommend minimizing the use of apps.
The features an app offers may seem a really neat addition to your store but consider how much value it brings to your customers. Adding it means using a script you have no control over and it may make your site slow to respond to your customers’ clicks.
There are several ways you can find the Core Web Vitals for your site, but the easiest is in Google's Search Console. You’ll find them in the menu under the Enhancements section.
You’ll see an overview page to start with. Here you can see charts that show how your URLs are performing on both desktop and mobile devices. Click “Open Report” for one of these device types to see more detailed data.
For each device type, your URLs are given a status rating; Good, Needs Improvement, or Poor for each metric. The chart allows you to filter the results by status and see how your site has performed over time. The table shows the URLs of affected pages with that status.
The report is designed to show the status of your site as a whole rather than specific URLs allowing you to identify issues affecting multiple pages. To assess a specific page use PageSpeed Insights.
If you see “No data available” this will either be because your site is new in Search Console or that not enough data has been collected yet to be meaningful. If this is the case you can use PageSpeed Insights to check your Core Web Vitals.
[9]
You can also check your Core Web Vitals using these tools:
[8]
Optimizing your store to improve it’s Core Web Vitals makes your site easier for customers to use, faster, and more stable. When your store is providing a great user experience for customers they’ll stay on your website for longer and you’ll see an increase in conversions. [10]
Optimizing your Core Web Vitals will also help your store’s SEO, enabling you to attract new customers more easily. It’s a win-win for you and your customers.
Not sure where to start with optimizing your store for the Core Web Vitals?
We’ve had a lot of success helping our clients improve their Core Web Vitals and eliminating errors in their Search Console. Contact us and we'll be happy to help make your store perform at its absolute best.
References
[1] https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
[2] https://blog.chromium.org/2020/05/the-science-behind-web-vitals.html
[3] https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html
[8] https://web.dev/vitals-tools/
[9] https://support.google.com/webmasters/answer/9205520?hl=en&ref_topic=9456557
[10] https://www.shopify.com/enterprise/site-performance-page-speed-ecommerce
[11] https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
We help ecommerce brands conquer their site speed so they can increase sales and improve their SEO. We'll provide you with a free site speed evaluation by one of our experts so you can take the right steps to make your site faster than ever.
Get Started
