Improving Core Web Vitals for Shopify Sites

Rhian Galea, James Koshigoe

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. These are new web performance metrics that Google deems important to your visitor'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].


Source: https://twitter.com/googlewmc/status/1265674342987444224 


In this article we’ll look at:

  • Why Core Web Vitals are important
  • What the Core Web Vitals metrics are
  • How to improve the Core Web Vitals for your Shopify store
  • How to check the Core Web Vital metrics for your site
  • The impact of optimizing Core Web Vitals metrics

Why has Google introduced the new Core Web Vitals metrics?

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. 

Why you need to pay attention to Core Web Vitals for SEO

From 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.

What are the new Core Web Vitals metrics?

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 (LCP)

The 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 vital 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]


Source: web.dev 


LCP is primarily affected by:

  • Slow server response times
    If the server that hosts your site is slow in sending your content to the user’s browser the  transfer time of the element in question may be slow. Think of it as like ordering a pizza. How quickly the staff in the pizza house process your order and prepare your pizza, and how quickly the delivery driver can get to you will determine how soon you get to eat.

  • JavaScript and CSS that block the rendering of elements
    As the CSS and JavaScript control how the page content is displayed the browser needs to receive and process this before it can display the page on your screen, otherwise it doesn’t know how to display elements and where to place them. It’s a bit like trying to build flat-pack furniture: you need to read the instructions first to know which parts go where and how to connect them. You can improve this by delaying the loading of or even lazy-loading non-essential CSS and JavaScript only when required.

  • Load times of individual elements
    A large photo is probably the best example of something that might affect your LCP. Let’s say that your page has a hero image and you’ve got a very high-quality photo there. The larger the image, the longer it will take to load. If you’ve added the photo to your website without resizing and optimizing it, the file size is likely to be very big and, therefore, take a long time to load.

    The website below includes a very large image that causes a delay in loading the page. As the largest item on the page, this image will negatively affect the site’s LCP.
Source: https://www.jerky.com



How do I improve Largest Contentful Paint for my Shopify store?

To optimize your Shopify store’s LCP we recommend 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:

<link rel="preload" href="hero-image.jpg" as="image">

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:

  • Images
  • Fonts
  • JavaScript
  • CSS
  • Audio files
  • Videos

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)

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] 


Source: web.dev


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 affected by:


  • Elements (e.g. images) without dimensions specified in the code
    Setting the dimensions of your content, such as images, will tell the browser what the size of that content will be when it loads. Think of it as reserving space for an item. If the space on the page has been reserved the item just drops in when it loads. If the space hasn’t been reserved the other page contents will fill it until it loads and then have to rearrange when it does.

  • Dynamically adding new content into existing content
    This usually happens if you have some JavaScript that powers a feature on your web page. Oftentimes the JavaScript takes longer to load than the rest of the page so the feature gets added in after the other page elements have already loaded. A good example of this is a banner or ad loading at the top of the page and pushing all the other content down as it appears.

    The website below adds an information banner to the top of the page after the main content has loaded causing a small shift in the layout.


Source: https://www.markethouse.com


How do I improve Cumulative Layout Shift for my Shopify store?

On Shopify stores, CLS is often caused by a banner or image loading late.

To improve CLS on your site we recommend: 

  1. Ensuring that you specify the dimensions of images and other block items on your site. Including the dimensions for images, div tags, and other blocks of content allows the browser to plot the layout even if elements are slow to load into it.

  2. Using preload hints (as discussed in the LCP section above) to prioritize the loading of JavaScript that powers banners.

A simple trick we’ve found to solve CLS problems caused by content loading is to set the width and height of the element that will contain the element that is being loaded.

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.

Review stars on eraorganics.com

First Input Delay (FID)

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]


Source: web.dev


FID is affected by:


  • Third-party code
    If you’re using third-party code to power elements on your page the efficiency of this code and how much of it you’re using will affect how fast your page responds. It’s a bit like when you’re at a party and you’re thirsty. You head to the bar but it’s crowded and you have to keep stopping to speak to friends on your way through. It takes a long time to get a drink and quench your thirst.

  • JavaScript execution time
    Many interactive functions on a website will be powered by JavaScript, for instance, slideshow control buttons or an Add to Cart button. A user’s browser needs to respond to their click by reading the relevant section of code and executing it. This can vary depending on how your code has been written. If your code is long or inefficient it takes the browser longer to process it. Think of it like going hiking and taking a route that goes through long grass and mud instead of taking the direct path. Your journey will be slower.


How do I improve First Input Delay for my Shopify store?

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.


How can I check the Core Web Vital metrics for my site?


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. 


Source: https://twitter.com/googlewmc/status/1265674342987444224 



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]


The Impact of Optimizing Core Web Vitals metrics

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.


Photo by rupixen.com on Unsplash

Keep your Core Web Vitals healthy and boost your SEO


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 

[4] https://web.dev/lcp/ 

[5] https://web.dev/cls/ 

[6] https://web.dev/fid/ 

[7] https://web.dev/tbt/ 

[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_contentAs 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.

Get a free site speed evaluation by our experts

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