This June, Google announced that they’re changing the way they measure Cumulative Layout Shift (CLS). CLS is one of the key metrics in Google’s Core Web Vitals, a set of factors that all website owners are encouraged to track.
Since the measurement of CLS will be altered from here on out, it’s important to learn about the impacts this update will have on your online store. This brief guide will explain what CLS is and why it will matter so much throughout the rest of 2021.
What is CLS?
CLS can best be explained as “the unexpected shifting of web page elements while the page is still downloading.” Poor CLS can cause images, forms, videos, buttons, and other types of web elements to shift around while the user is trying to navigate the page.
According to Google, there are 5 main reasons why CLS occurs:
- Images without defined HTML dimensions.
- Ads, embeds, and iFrames without defined HTML dimensions.
- Dynamic content injected over existing content.
- Web fonts that render larger or smaller than expected.
- 3rd party ads or widgets resizing themselves.
How the CLS Metric Changed
The team at Google realized that pages that were kept open for longer periods of time weren’t being accurately measured for CLS. Developers who carefully designed their pages to be CLS-friendly could have their efforts thwarted by users who kept their page open for several hours or days, so Google set some new guidelines in place.
Great CLS is identified when all web elements on a page can move into the correct place and stop moving around within 100 milliseconds or less. Google has also specified that the metric would be measured by the maximum session window with 1 second gap, capped at 5 seconds.
If you’d like to test this metric yourself, you can check out these 3 field tools:
For lab tools, these options can help:
Why CLS Matters
We know what CLS is and how it’s measured, but you might be wondering why it even matters. Can these CLS updates really impact your site, and should you care about monitoring this metric?
Based on our findings, we argue that online retailers should remain vigilant about any changes made to Google’s Core Web Vitals. Those who take a proactive approach and start monitoring CLS now will benefit due to the following reasons:
- CLS impacts your Google rankings. If you specify image sizes and dimensions, your page will be able to load faster. Since Google prefers pages with fast loading times, you can improve your SEO while decreasing annoying CLS issues.
- CLS is part of the Core Web Vitals ranking factors. As mentioned before, CLS is 1 of the 3 components of the Core Web Vitals set. Not paying attention to CLS would be ignoring approximately 33% of the most important metrics for your website!
CLS improves UX — especially on mobile! If you want to deliver a better experience for your customers, decreasing CLS is an easy first step. When users don’t have to worry about accidentally clicking on the incorrect link or form, they’ll be able to fully enjoy your site and pay attention to the amazing products you have to offer.
