What happens when you're trying to click the 'Shop Now' button, but an ad suddenly jumps at you, and for the next 4 seconds, you are stuck in another Tetris lookalike?
That definitely is a pointer for terrible customer experience. If customers didn't already make up their minds, they might close your website altogether!
When your website's content is unstable and seems to jump ever so often, you've got yourself a poor CLS.
Cumulative Layout Shift, aka CLS, is one of the google metrics that rates how good customer experience is on your store. Furthermore, CLS affects speed!
It is a two-way road; on one hand, we have low Google rankings, and on the other, poor page speed. Ultimately, the destination is the same; poor sales!
For the same reasons, Shopify speed optimization should be targeted towards making your page as stable as possible.
What is CLS, and Why is it Important?
What use is an awesome copy if you lose half of your customers before they get to read it?
As earlier mentioned, Cumulative Layout Shift is a measure of the visual stability of your website. It is a metric that quantifies how often the content of your webpage changes positions without being told to.
If you have a high CLS score, your site's content is highly unstable! This does your SEO and copy a disservice because no one will keep chasing your content around the screen.
CLS isn't a new metric. So why is everyone suddenly talking about it?
With the update of the Google Core Web Vitals, three new metrics were defined as what would shape the world of eCommerce. They are Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS).
This announcement has brought CLS into the spotlight, along with its counterparts, LCP and FID.
This is your golden chance to get it right with google and expand your audience!
What Should My CLS Score be?
Firstly, you should note that your CLS is a cumulative score. It takes into account every single content swerve or jump. Your score is calculated based on that.
According to Google's Performance Tools, this is how CLS scores should be interpreted;
- Good; anywhere from 0 to 0.1
- Average; between 0.1 and 0.25
- Poor; 0.25 and above
If your CLS score is 0.25 and above, then you are badly in need of an expert Shopify optimization agency!
How is CLS Calculated?
What matters and what doesn't? to calculate CLS, Google makes use of two parameters;
- Impact fraction and
- Distance fraction
But before we go into the nitty-gritty, let's define some terms
- Impact region- this is the area affected by the layout shift
- Viewport- the part of the screen that can be seen without scrolling.
- Move distance- the distance moved by affected part
- Session windows- the period within which CLS is calculated.
As we go forward, we'll say more about these, but this is all we need to keep going for now.
- Impact fraction
This parameter compares the former area of your content to the new area it now occupies. The downside to this was that larger elements were not properly accounted for. Large elements may only move a little, giving a small change in the overall Impact fraction.
To calculate this, two figures are needed; the Impact region and the area of the viewport.
For a dynamic content with impact region (340*500) and a viewport size of (375*600), the Impact Fraction can be calculated as;
Impact Fraction= Impact region/Area of Viewport= (340*500)/(375*600)= 0.76
For this page, the impact fraction is 0.76.
- Distance Fraction
Because the change in area was not sufficient to judge layout shifts, this parameter was introduced. The distance fraction measures how much each element moved. It does not take into consideration the size of the elements.
To calculate Distance Fraction, divide the maximum distance moved by the layout by the viewport's height.
For a layout that moved 135 and a viewport height of 600, the distance fraction is;
Distance fraction= 135/600= 0.225.
What Next after Impact fraction and Distance fraction?
Impact fraction * Distance fraction= CLS
That isn't all! The Impact Fraction and Distance Fraction make up the CLS, but remember that CLS is a cumulative value. The actual CLS is calculated by adding all the impact fractions and distance fractions within a session window together.
A while ago, the CLS would have been calculated without considering a session or time frame. However, Google realized that that method caused a lot of unfairness and discrepancies. A site with 4 layout shifts in 2 seconds would be judged the same as one with 3 layout shifts in 5 seconds.
This led to the introduction of session windows.
Here's how it works; when one layout shift occurs, a session begins. If no other shift occurs after a second, the session ends. A session window can be kept open for as long as 5 seconds if layout shifts keep occurring.
At the end of each session window, the Layout Shifts for each instance is calculated, then added up to give the CLS.
The good thing about this metric is that each session window is independent!
What Causes Poor CLS?
Here's what Google accuses of causing a poor CLS score;
- Images without dimensions
- Ads, embeds and iframes without dimensions
- Dynamically injected context
- Web fonts causing FOIT/FOUT
- Actions waiting for a network response before updating DOM.
These are obviously coding errors that can be fixed by cleaning up your code. On the plus side, having a good CLS score sets your store up for more conversions and sales.
How do I improve my CLS Score?
Spontaneity is good, but not on my Shopify page!
Improve your CLS score and overall Shopify website speed by engaging the best Shopify optimization agency there is, Ecomexperts!
Ecomexperts is a speed optimization agency that removes redundancies in codes. The same ones causing your site speed to falter. We are 100% foolproof! There's only one result when you work with us; premium satisfaction.