How to Improve your Core Web Vitals Score on Shopify

Wondering how to improve your web vitals score on Shopify?

While virtually anyone can create an attractive Shopify store and start selling products online, it takes a lot of work to ensure your site is successful. You need to do more than just create or stock amazing products. You also need to invest in marketing and other strategies to attract customers to your site.

One of the easiest ways to increase the traffic on your Shopify website (and your revenue potential at the same time) is to invest in search engine optimization. In other words, you design your store to appeal to the search engines, and rank higher on search result pages. 

Unfortunately, a lot of store owners make the mistake of thinking SEO is just about content creation and keywords. The reality is Google’s algorithm also ranks sites according to their technical functionality, and user experience. That’s where your web vitals score comes in.

What are Core Web Vitals? 

Core Web Vitals (CWV) are standards Google uses to evaluate the technical health and performance of a website. The Google search algorithm prioritizes websites that perform well on all devices, with quick page speeds, and minimal technical errors. 

That’s why it’s such a good idea to work with a professional to build a successful store in the first place. To measure the usability of a site, Google focuses on three metrics (the core web vitals of your website), and assigns each site with a score. 

These metrics include:

• Largest Contenful Paint (LCP): LCP examines the time it takes to load the largest text block or image on a web page, whether that’s a video, or an entire blog post. This helps Google to determine how quickly consumers see meaningful content on your site. 
• First Input Delay (FID): With FID, Google looks at the time it takes to process a user interaction, such as someone clicking on a button or a pop-up. This helps the search engine to ensure users can interact with your content. Notably, FID will be replaced with “Interaction to Next Paint” in 2024. This still measures responsiveness, but focuses on the time it takes for feedback to be delivered after a user interacts with your page. For instance, when someone adds a product to their cart, they expect the cart icon to update instantly. 
• Cumulative Layout Shift (CLS): CLS looks at the stability of your site’s visuals. For instance, if an ad takes a while longer to load than the rest of your page, then shifts your text and content around, this lowers your CLS score. CLS helps Google to determine whether your website is offering a consistent experience for all users. 

The Importance of a Good Core Web Vitals Score on Shopify

Every CVW metric assessed by Google comes with a minimum “average” score you need to reach. If you don’t reach this score, Google marks the quality of your site as “poor”. This means you’re less likely to rank highly on the search engine result pages, even if your content and products are great.

When your Shopify store fails to achieve a minimum viable score on a CWV metric, the Google Search Console will usually show you samples of URLs affected by the problem, so you can narrow down the issue, and apply improvements, sometimes with the help of an expert. 

While learning how to improve your core web vitals score can seem complicated, it is worthwhile. Not only does it boost your ranking potential, but it can lead to better business metrics and user engagement too. For instance, Google discovered when a site meets the threshold for its CWV metrics, people were up to 24% less likely to leave a page. 

How to Measure Your Core Web Vitals

To improve your Core Web Vitals score, you first need to know where your Shopify store currently stands. There are a few free tools you can use for insights, such as:

1. PageSpeed Insights

Google PageSpeed Insights gives you a free, in-depth insight into the metrics of a single page. It doesn’t just evaluate core web vital scores; it also gives you an overview of other technical metrics, giving each page a score from 0 to 100. PSI presents findings in a simple, actionable format, and even gives you tips on what you can change on your website to improve it.

2. Google Search Console

Search Console, from Google, allows you to check your Core Website Vitals scores across all of the pages on your site at once. Although the diagnostic reports aren’t as detailed as the ones you get from PSI, you do get a rapid insight into how your overall site is performing. You can also access some handy tips on where you can improve your metrics.

3. CrUX Dashboard

While PageSpeed Insights and Search Console are both browser-agnostic tools, there’s a specific toolkit available for Chrome. The CrUX dashboard gives you a more specific insight into how your website is performing and loading on chrome browsers, for free. This is a great tool if you want a more detailed overview of your site’s loading ability on Chrome browsers.

How to Improve your Core Web Vitals Score

Once you’ve determined where you site sits in terms of performance, you can begin to make changes to your site’s functionality. The tools above will tell you which Core Web Vitals need the most work, so you can focus your attention on those areas. 

Here are some handy quick fix options for improving each of the 3 metrics.

Improving LCP Scores on Shopify

If your biggest issues lie with your LCP scores, due to pictures and content not loading quickly enough on your product pages or other assets, there are a few things you can try:

• Prioritize LCP resources: Using PSI, you can identify each page’s largest element, and add a “fetchpriority=high” attribute to it. This should ensure your LCP loads first. You can also preload LCP images with rel=preload on assets. 
• Upgrade your HTML: Some JavaScript-based pages on JavaScript serve images not using an <img> tag. Sometimes, this slows the LCP time. A good way to fix this is to load the image using an <img> tag featuring a standard src attribute. 
• Use lazy-loading: Adding a native lazy-loading attribute to your non-LCP resources is another way to enhance performance. This basically forces other assets to load after your LCP resource has already appeared on the page.
• Optimize images: When adding images to Shopify sections, consider choosing compressed images, designed for the web. You can also ensure your images are adapted to the size of the screen, and use the right image extension (JPG or PNG). 
• Use NextGen images: New image formats like WebP are often smaller in size than traditional options like PNG and JPG. Using a Nextgen image will help to speed up download times. Most Shopify themes can automatically convert your images to WebP. 

It’s also worth looking for opportunities to eliminate “render-blocking resources”. A lighthouse report can show you the render blocking resources for any page. However, it’s often easier to work with a Shopify expert if you’re not experienced with Shopify coding.

Improving FID Scores on Shopify Stores

Low FID scores are less common on Shopify stores. Usually, FID issues are caused by a large amount of JavaScript constantly running on the same page. Since the browser takes a lot of time to run the scripts, this leads to delays. If you’re struggling with FID, you can:

• Reduce third-party code: If you’re using a lot of third-party code from apps and add-ons on Shopify, this could have an impact on your FID scores. It’s worth checking to ensure none of your applications are slowing your pages down. 
• Reduce JavaScript execution times: If you have the support of a JavaScript editor, you can use tools like code splitting, and code minifying or compressing to reduce JavaScript code execution times. You can also condense your scripts using tools like Google Tag Manager. This can minimize the work a browser has to do in response to a user interaction.
• Minimize thread work: The main thread on your store does the work of processing and calculating how to display a page. The easiest way to reduce thread work on your Shopify store is to choose a premium theme with fast loading capabilities, or work with an expert developer who can optimize your site. 
• Reduce the amount of JavaScript: Auditing tools such as PSI can help you to pinpoint unnecessary scripts on your store, so you can streamline each page and make it more reactive. You can also centralize your script into one file, rather than several files. 

Improving CLS Score on Shopify Stores

Your CLS score is influenced by how your page layout shifts around as your website loads. Once again, working with an expert Shopify developer will help you to reduce these issues. However, you can also take measures like:

• Adding attributes to images: Adding specific width, height, and aspect ratio attributes to your images tells browsers exactly how they should size an image. Without these instructions, most browsers will preload an image as small as possible, before expanding it. 
• Optimize your fonts: Attractive fonts can sometimes cause CLS problems due to an issue known as “FOUS”. A good way to reduce this problem is to minimize your reliance on third-party web fonts were possible, and preload fonts with your stylesheet. You can also use the font-display:optional CSS property. 
• Avoid animations when possible: Although animations can be a great way to grab user attention, they open up larger risks for CLS issues. Animations that influence margin or border properties will usually cause CLS score problems.

Upgrade your Core Web Vitals Score on Shopify

Learning how to improve your Core Web Vitals score on your Shopify store is an excellent way to improve your chances of running a successful website. The more professional your website is, the faster it loads, and the better the user experience it offers, the more your business will thrive.

If you’re struggling with any of the strategies or tips above, the easiest way to upgrade your Shopify store is to seek help from the experts. Contact Storetasker to find an expert that can help you maximize your Core Web Vitals score. 

‍