Is your Shopify site optimised for Core Web Vitals?

Is your Shopify site optimised for Core Web Vitals?

Core web vitals has been hanging over every web owner, SEO, and developer’s head since it was announced last year. And with it has come tons of advice on preparing and optimising your website in advance of implementation. 

With core web vitals now fully rolled out, many are still eager to know how exactly you measure and optimise your Shopify site. Let’s explore.

Is core web vitals a ranking factor?

Google confirmed in May 2020 that Core Web Vitals would become a ranking factor. Thankfully, they gave digital departments information on what exactly is measured and time to prepare and update their websites in advance.

There have been only a handful of occasions when the tech giant has been so open about what moves the needle to gain visibility in the SERPs.  
One previous example was mobile-first indexing, or Mobilegeddon, as it was coined. This was implemented in April 2015, and, as with Core Web Vitals, Google gave us plenty of time to prepare

What is the core web vitals update?

Core web vitals is part of a more comprehensive update called the ‘page experience signal’, which encapsulates safe-browsing, mobile-friendliness, intrusive interstitial guidelines, HTTPS security and, of course, core web vitals. 

Core web vitals focus on responsiveness, speed, and visual stability, essentially encouraging digital departments to consider and improve your users’ online experience. 

Are core web vitals important?

Putting aside the fact that core web vitals is now a ranking factor, the fact that Google has provided so much information around the update highlights its importance. 

Shopify is largely heralded as a sellers platform, so optimisation advice is often primarily focused on eCommerce. However, the measurement of core web vitals is wholly focused on improving the user experience, proving that user engagement should be high on your list of improvements and something you should always be working on. 

A positive user experience should naturally result in higher sales and revenue, so it is more than worth the effort from an ROI viewpoint. What’s more, poor core web vitals may see your site falling in the rankings and losing visibility, traffic and, by extension, sales.

What are the three core web vitals? 

The metrics used to measure core web vitals are:

  • Largest contentful paint (LCP)
  • First input delay (FID)
  • Cumulative layout shift (CLS)

Essentially, it measures how swiftly a page loads, how long it takes for the page to be interactive and whether elements of the page continue to move after it has loaded.

The measurement of these metrics comes in the form of a traffic light system, whereby red is considered a low score and should be a high priority, amber (or orange) specifies that further improvements can be made, and green identifies your page as optimised.

What is “Largest Contentful Paint”?

Optimising your site’s page speed has long been a point of concentration regarding optimisation, especially for larger Shopify platforms. Largest contentful paint, or LCP, refers to the biggest piece of content on a page. This could be a hero image, video, or something else. 

Your largest contentful paint should load in 2.5 seconds or less to keep your core web vitals score in the green. 

What is “First Input Delay”?

Getting the content (text, video, images etc.) on your site to show up as quickly as possible is no longer enough. Now, the length of time between this content showing up and being interactive is measured as part of core web vitals. When someone clicks, they expect to see a response immediately. If they have to wait and click again, your first input delay needs to be optimised.

The timeframe between your page loading and being interactive must be 100 ms or lower to be qualified as good. Anything longer than that means improvements must be made.

What is “Cumulative Layout Shift”?

Is there anything more frustrating than clicking or tapping on a link or video on a webpage, only for it to have shifted slightly, and you’ve ended up clicking on something else? Once is an annoyance, but if it happens again, chances are you’ll exit the site and look elsewhere. 

The less your website does this, the higher your cumulative layout shift score. To keep your score green, your CLS has to be 0.1 or lower. 

What tools can be used to measure core web vitals? 

There are multiple tools available to measure your core web vitals. These include:

  • Lighthouse
  • Page Speed Insights
  • Chrome DevTools
  • Google Search Console
  • Chrome UX Report
  • Web Vitals Extension
  • Webdev Measure

And more.

The ‘best tool’ depends entirely on preference, so it may be worth trying them all out to discover what works best for you and your team. 

How do you implement core web vitals?

Identifying pages with a poor core web vitals score is only the first step in the process. Unless you know what is causing the issue and how to resolve it on your Shopify site, that information is essentially useless:

What affects “Largest Contentful Paint”, and how to optimise it?

CSS and JavaScript can slow down the largest contentful paint loading. One way of improving your score could be as simple as delaying non-essential JavaScript and CSS. 

The larger the visual aspects of your site, the slower it will load. Therefore, whenever uploading an image to your site, it’s good practice to resize it to reduce load time. 

If there is visual content that you know will cause a loading speed issue, you can add preload hints to the header tag so that Shopify knows to download it sooner and, therefore, to load it quicker. Here’s what it can look like:

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

You can preload images, JavaScript, CSS, fonts, videos and audio files. 

Even with entirely optimised visuals and delayed JavaScript and CSS, if you see a low largest contentful paint score, it may be your server that’s the problem. 

What affects “First Input Delay”, and how to optimise it?

First input delay can be affected by third-party code. Reducing your reliance on these as much as possible will minimise first input delay. The good news is that, in general, first input delay isn’t a common issue on Shopify websites. However, if you find it to be a problem, try analysing the apps you have installed on your site. If you can’t justify the value it brings to the platform, your team and your customers, we recommend removing them

If you have interactive features on your Shopify site, this could also contribute to a low score if this is implemented with JavaScript. Unfortunately, it’s not always a case of removing this interactivity. Your Add to Cart button, for example, is essential to your store. 

Therefore, you need an optimisation solution. One option is to reduce the amount of code the browser has to read in response to a button click. It’s worth asking your dev department, or, if you don’t have one, your helpful representative at HeyCarson to analyse the current code and work to reduce it and, by extension, your first input delay.

What affects “Cumulative Layout Shift”, and how to optimise it?

One potential and easily solvable problem that can lower your core web vitals score is when dimensions aren’t specified. Without this, the browser won’t know the content size, which leads to it shifting things around. 

To resolve this, add dimensions for all div tags, images and content blocks so that it is all loaded seamlessly. For product images, Shopify recommends setting the dimensions as 2048 x 2048 pixels. 

Optimising this is a manual task, and therefore, should be introduced as part of your processes to save time and reduce issues in the long term. Here is an excellent how-to guide to specifying image dimensions. For other attributes, you can set the dimensions within the container in the backend of the site. 

Another influence could be the JavaScript on your page. Because this type of code can take longer to load, the browser has to find a way to fit it onto the page, nudging things around to do so.

Consider dynamic content such as product star reviews. These are common for Shopify websites, as they are an excellent trust signal encouraging users to purchase from your website. Because these are dynamically loaded via JavaScript, they are loaded later and can cause other content on the page to shift around. 

You can resolve this by ensuring that the dimensions of the containers are larger so that it doesn’t have to expand further to accommodate star reviews.

Key takeaways on optimising core web vitals on your Shopify site

When a new algorithm update like core web vitals is announced, it can be disconcerting. But often, it’s not as scary as you think. Here are some key takeaways to optimise your Shopify site to keep your core web vital scores as high as possible.

  1. Take preemptive measures wherever possible.
  2. Use your preferred tool to ascertain the pages with the most significant issues and remedy those first.
  3. Understand the real problem. There could be numerous reasons why your score is low.

This is a guest contribution from Blend Commerce. Blend Commerce helps Shopify merchants get more out of their websites. Our partnerships with app and theme providers, continual training and deep understanding of Shopify technology allow us to help you achieve more.