Core Web Vitals E-commerce
Starting in May 2021 Core Web Vitals will play a significant role in your website's and e-commerce store's SEO performance. Despite daunting acronyms like LCP, CLS and FID, these metrics are actually easy to understand and we will see how they improve the experience of a site's visitors.
Core Web Vitals for Shopify Stores
Quite some time ago Google announced that they are going to factor Core Web Vitals into the SEO ranking of websites, starting from May 2021.
If you are a merchant on the Shopify platform or own any other kind of e-commerce store, it's fair to assume that you will care a lot about your SEO ranking. It's free traffic after all, isn't it? But maybe even more importantly, Core Web Vitals play a crucial role in your customer's experience on your website and directly affect bounce rates.
So what are Core Web Vitals? Where, how and why are they important on an e-commerce store?
LCP, CLS & FID - The three metrics
There are three metrics, which determine a site's Core Web Vitals and while their acronyms and full names might sound daunting in the first moment. They are relatively easy to understand, especially if we know why **they are used.
In terms normal people can understand, the metrics are:
- LCP - Largest Contentful Paint - How long does it take until the largest text, image or video element is visible to the visitor?
- CLS - Cumulative Layout Shift - How long does it take until the layout stops shifting around while loading?
- FID - First Input Delay - When I click or scroll, how long does it take until the website reacts to my interaction?
Let's have a look at those metrics in a bit more detail. We'll start off with LCP
LCP - Largest Contentful Paint
As already stated this metric is all about the time it takes to fully display the largest text, image or video element. That is what is where the name comes from, Contentful describes elements like text blocks and (multimedia) resources*.*
But why should we care about rendering specifically the largest contentful element as quickly as possible?
The main reason for this metric is visual hierarchy. Larger elements will grab a new visitor's attention first, as their size indicates importance. Right when the largest contentful element is fully rendered, users are able to start to read or watch the content. Things are especially problematic when, during a slow loading and rendering process, the currently largest element switches several times. A customer would start to shift their attention to the element they currently perceive as the most important one and suddenly an even more important element would pop up and they have to start all over again.
Let's look at an example. Here are three screenshots of an e-commerce store's loading process.
In the first picture, the hero element is still missing and the largest contentful element is the box for the ski collection. During this state a visitor's attention would clearly first go to this element.
In the second picture, the hero element is loaded, capturing the customer's attention and being our new (and also final) largest contentful element. Therefore screenshot #2 marks the point in time for our LCP.
The third picture illustrates very nicely how and why LCP is important as an additional, but smaller element loaded. Adding the Shopify badge does not take a user's attention and a visitor will most likely not even realize that this element loaded after the hero section, as their attention was still focused on the largest contentful element.
CLS - Cumulative Layout Shift
The requirements for this metric are very harsh, for good reason as sites with shifting layouts are the most annoying for visitors.
CLS is all about displaying a stable layout as early as possible. I'm sure you experienced the pain of bad CLS yourself. You notice it most ,when you start to read a piece of content and suddenly the layout shifts, leaving you lost on the site. Things get even worse if you tried to interact with a button. Suddenly your click goes to a totally different element that now takes the place of the button you wanted to interact with.
A layout shift is also a huge problem when it comes to our attention. Evolution has primed us to always focus on movement. You can be sure that even the slightest layout shift will take your customer's attention and distract them.
So what does Cumulative Layout Shift look like in practice? I found that typically announcement bars added via JavaScript and hero sections, if none of these have fixed dimensions, are typically the cause for bad CLS.
As we can see in this example, first our layout shifts because we're loading the hero section and there is another layout shift happening in the third frame, when the hamburger menu shifts our logo. Our CLS would therefore be the point in time when the third frame is rendered.
FID - First Input Delay
Okay, let's say our site loads quickly and there is no crazy layout shifting going on. Next our users will want to interact with the site. This is where First Input Delay comes into play. FID measures the time it takes from a user action, which can be a click on a link or button, or just scrolling on the site, until the website reacts to the user action.
In our example a visitor clicks the shopping cart button, but nothing happens in the second frame as the browser is still busy processing other data. Only in the third frame the navigation to the new page happens. The time between the click and the navigation is the First Input Delay.
Resources
If you're interested in learning more about Core Web Vitals I can highly recommend the resources on web.dev where you'll find detailed descriptions as well as articles on how to improve the metrics:
