The 411 on Google's Core Web Vitals

Every few months or so, Google likes to change things up a bit. Their latest tool which measures how your website pages are performing is called Core Web Vitals.

Core Web Vitals focuses on the users experience using “real world usage data” to measure site performance. You can check your Core Web Vital scores in Google Search Console.

The too long; didn’t read version – Core Web Vital scores MAY help with your Shopify store rankings but quality content is above all the best way to ensure the best possibility of improving your rankings. Google will prioritize pages with the best information overall. A good page experience does not override having great, relevant content.

The information can be a lot to process and fully understand. No matter how hard Google tries to simplify it, understanding the results beyond “Good, Needs Improvement, and Poor” can be challenging.

So I’ll do my best to simplify it for you.

What is being measured?

Cumulative Layout Shift (CLS)

This is when the page moves unexpectedly and is entirely user-experienced-focused. This is also an important piece to ensuring your Shopify site is accessible.

Examples:

• Customer facing apps that take a few extra seconds to appear on the page such as contact forms instead of the built-in one from Shopify.
• A customer moves to click on a button but right before they click on it, the button moves causing them to click on something else. This is commonly seen in slider images that auto rotate.
• The page loads one font, then a second later, a different font loads. A common issue when stores use custom fonts instead of the default fonts in Shopify.

How to improve the CLS score:

If you’ve scored poorly you can make improvements. Here are three quick ideas.

1. Contact Shopify app developers where the delay appears and ask them about making it faster.
2. Remove carousels and automatic sliders from your site and replace them with content that doesn’t move.
3. Use consistent image sizes such as 1:1 ratio (square) for product images. This will prevent “jumpiness” when clicking through the product images on the product page.

First Input Delay (FID)

The time it takes for customers to interact with something on the page and when the page responds to that interaction. Most often, this has to do with how much JavaScript is loading from your theme or apps. An interaction could be typing, clicking, tapping, swiping, or scrolling to name a few.

Example:

• When a customer taps a button, does the site actually respond or do they have to wait for some reason before trying again? If there are too many things running, the customer won’t be able to do anything until all the excess code runs its course.

How to improve the FID score:

If you’ve scored poorly, this one may be a bit more challenging to fix because you may not be able to control everything.

1. Look at the Shopify apps you have installed and remove any that aren’t needed anymore. Make sure you remove the code from your theme files whenever applicable. There’s often more you need to do than just deleting the app from Shopify.
2. Talk with your theme or app developer about ways to improve the load time. Shopify is also investing in this measurement from an app perspective.
3. Consider moving to a Shopify Online Store 2.0 theme which have been approved by Shopify to meet their speed expectations.
4. Consider moving to apps that are fully compatible with Online Store 2.0 features, preventing the app from leaving code behind once you’ve deleted them.
5. Remove unused tracking codes from apps like HotJar or LuckyOrange.
6. Remove your Instagram or Twitter feeds and replace them with images or text that look like the feed, but keep them on your site.

Largest Contentful Paint (LCP)

This is when the page’s main content has been perceived to be loaded all the way. The page is considered loaded all the way when the largest element such as text content, images, or videos is fully visible.

Example:

• The homepage is fully loaded when the main video that auto plays has been fully loaded. This is assuming the video is a large file.
• When you first land on the page and scroll down, all the text and images are there – nothing is still loading. Excessive image sizes, videos or images that are not compressed or made smaller are common offenders.

How to improve the LCP score:

If you’ve scored poorly, here are a few ideas on how to improve your score.

1. Reduce image sizes to no more than 2000 x 2000 pixels. You can go smaller if needed as long as the image doesn’t look pixelated or blurry. Most quality Shopify themes will resize images appropriately.
2. Do not auto play videos. Allow your users the controls to turn videos on/off. Another essential piece to ensuring web accessibility.
3. Steer clear of using animated gif files on your site. Just don’t.
4. Work with apps and themes that minimize both their JavaScript and CSS files at a minimum. Many apps use iframes to hide their performance impacts from Google. Your store and customers are still negatively impacted from any poor performance from their code.
   
   At the moment, Shopify and Google’s tools don’t evaluate iframes in the performance report. That can change at any time and it’s not clear if Google’s algorithm considers iframes or not. Additionally, iframes cause the app to own your content, not you, which means they reap the rewards for SEO. Review apps are common offenders of this now and you need to avoid review apps that use iframes whenever possible.

Will a good score on the Core Web Vitals help me rank better in Google?

Let’s be clear. No one knows the algorithm Google uses for ranking. In fact, Google changes its algorithm on average 6 times a day.

Google themselves downplayed the importance of this update and said

while this update is designed to highlight pages that offer great user experiences, page experience remains one of many factors our systems take into account.

They went on to say

sites generally should not expect drastic changes.

Scoring well on Google’s Core Web Vitals doesn’t mean your site is perfect. It’s one of many metrics to get your pages performing well.

Google does approximately 200,000 – 300,000 experiments a day on search. Some things they get right, others, well it’s an experiment and they learn from their guesses. These measurements are not the end all be all and we expect these metrics to change over time.

How long does it take for my score to change?

An important piece of this puzzle is that these metrics are not real-time.

The measurements are taken over a 28 day period, so there is a lag from when Google incorporates the data into your reports.

So don’t make a change on your site and expect to see immediate results. As with anything on Google, it takes time.

Should I take this seriously?

Yes, you should take it seriously. No, you don’t need to put all your efforts into this right now.

As a business owner, there are so many things vying for your attention. Don’t let this consume you.

I recommend you start working towards improving your site but not because these metrics tell you to.

You can pass the core web vitals and still have a page that fully loads in 30 seconds.

As in you can get a good score, but your customers suffer.

From an SEO ranking aspect, don’t lose sleep over this.

From a customer experience aspect, it’s worth investing in.

The good thing is that many ideas to improve your Core Web Vitals score for your Shopify store are already included in the Website Rescues. I have a list of 150 different tweaks or changes to pull from, all geared towards improving the customers experience.