Among the many key metrics that Google uses to determine user experience—and therefore affect your website’s ranking—is with the calculation of something called “cumulative layout shift” (CLS). So digital marketers will use your CLS score when determining core web vitals for your site.
In other words, if you have a low CLS score, your digital marketing value suffers. We’ll unpack how a site’s CLS may be calculated and what causes shifting on your site. But first, what is a cumulative layout shift?
A cumulative layout shift is when unexpected movement or size differentials occur upon page downloading. A photo, for example, that inexplicably changes size as a web page loads on your phone is an example of a CLS.
How a CLS Impacts Your Manufacturing or Distributor Website’s SEO Value
A website’s efficiency is among the most important matters for user experience. If a visitor of your site wants to see a product and the fonts or images are bouncing around the mobile version of the product page, they’re not going to stick around. Or, if they do, they’re probably not happy about it.
Google knows this, which is why CLS measurements are now part of Google’s ranking factors. What Google wants is for your potential partner or customer to get the most efficient and coherent response to their search.
So whether it’s a question like “Where can I find a Swiss lathe?” or a statement like “Swiss lathe near me,” Google will be more likely to direct the searching user to the website with a better CLS score. And, subsequently, if your CLS is off, you may lose that potential partner.
What Causes a Cumulative Layout Shift?
A CLS may be caused by various influences. Google identifies the following causes:
- Ads and embeds
- Media (images, videos, etc.) without dimensions
- Web fonts
- Changes in DOM
- Dynamically injected content
As you can see, the causes vary. Subsequently, the solutions to these shifts will also vary. Coding may be at the heart of your issue. Ping your web developer for help if you’ve noticed these shifts on your site.
Calculating CLS & Measuring for Performance
So, how is the cumulative layout shift score calculated? The CLS score is determined by the multiplication of two measurements, impact fraction and distance fraction, which may be measured in the unexpected movement of content on a mobile viewport. To help better explain the scoring elements, we’ll break down the two measured factors.
Impact Fraction
Using an image as an example, determining impact fraction is a matter of dividing the impact region by the viewport space. So, an image moves from one place in a viewport to another place in the viewport, generating a total impact region of 350×500 area pixels. While the viewport itself is 375×700 are pixels.
The impact fraction calculation then is 350×500/375×700 or 175000/262500 giving us an impact fraction of 0.667.
Distance Fraction
Similar to impact fraction, distance fraction looks at the page element (in our example, an image) before and after its shift. However, distance fraction is the measurement of space from the initial place to its final place across the viewport.
Sticking with our above example, we’ll say that the amount of distance moved (or shifted) to generate the impact region of 350×500 was 100 pixels down the page. Because it has moved 100 pixels down the page, we need to divide 100 by the height of the viewport (700). So the calculation for the distance fraction is 100/700, giving us a distance fraction of 0.143.
The Formula for a Cumulative Layout Shift
Let’s put both of our results on the whiteboard and see what we get. We had an impact fraction of 0.667 and a distance fraction of 0.143. To get the CLS we multiply those: 0.667×0.143, generating a CLS score of 0.095.
A Good CLS Score, According to Google
So, is that good? Shifting, in general, isn’t great. But, according to Google’s scoring chart, a good CLS score is anything below 0.1. This means we’re right on the line between “good” and “needs improvement.” A poor score would be greater than 0.25.
A Digital Marketing Team With Decades of Combined B2B Experience
At Snap Agency, our people utilize in-depth knowledge and quality resources to ensure a practical solution for our partners. So, whether we’re designing your new manufacturing website or our developers are tracking down a fix for your site’s glitches, you can trust that we’ve got the moxie to get the job done.
Want to learn more? Give us a call or connect with us online.