Have you ever accidentally clicked a useless ad on a website because the layout suddenly moved or an ad appeared? This sudden movement on the web pages is called the layout shift. We are sure, you’ll agree it’s one of the most frustrating user experiences.
These movements are called Cumulative Layout Shift (CLS). It’s a Core Web Vitals metric calculated by summing all layout shifts that aren’t caused by user interaction. Usually, these movements happen because of asynchronous load of resources or DOM elements that get dynamically added to the page above the existing content.
Common Causes of CLS
- Images without dimensions,
- Ads, embeds, and iframes without dimensions,
- Dynamically injected content,
- Web fonts causing FOIT/FOUT (Flash of Invisible Text and Flash of Unstyled Text),
- Actions waiting for a network response before updating the DOM.
Why CLS is a Problem
CLS has become a ranking factor since August 2021 according to Google’s Page Experience Update. It means that CLS score now affects SEO. Although it’ll be a minor factor, CLS score may impact organic traffic you get from Google and other search engines.
Moreover, a high CLS score means users have a bad experience visiting your website. Cumulative Layout Shifts lead not only to annoyance because of clicking an ad. Sometimes, users can accidently purchase the wrong product because the needed button shifted away. This problem seems to be more crucial as it results in bad reviews and decrease in customer loyalty. Once a user will find themselves in that situation, they will never return to the site.
Source: Google’s Page Experience Update
Make customers come back to your store by boosting UX
How CLS is Calculated
The calculation involves two metrics, which are impact fraction and distance fraction.
Impact Fraction is a measurement of how much space an unstable element takes up on the screen. For example, an element occupies 50 % of the screen and then drops by another 25 %. When added together, we get 75 % value, which is called Impact Fraction and expressed as a score of 0.75.
Distance Fraction is the amount of space the page element has moved from the original position to the final one. In the example above, the page element moved by 25 %. Knowing that, we can calculate the CLS score by multiplying the Impact fraction by the Distance Fraction: 0.75 x 0.25 = 0.1875
What’s a Good CLS Score
Official CLS scores used by Google:
- Good – CLS below 0.1;
- Needs improvement – CLS between 0.1 and 0.25;
- Poor – CLS above 0.25.
The lower your score, the more stable your layout is. Google recommends that you keep your CLS score under 0.1.
You can measure your CLS both in a lab or using real user data. To measure lab data, you can use performance tools like Lighthouse or ChromeDevTools. Real User Data is data based on real user interactions. It’s gathered by Google and other third parties and allows you to see the bigger picture. You can access this data via Google’s BigQuery, Google Data Studio, PageSpeed Insights, Google Search Console.
How You Can Improve Your CLS Score
1.Use font:display values and link rel=preload. When browsers download the fonts from the server, it often displays blank space until the custom font loads. After downloading and displaying the font, the layout usually moves quite a lot. If you want to avoid it, use font:display values such as auto, swap, block, fallback, and optional. You can also preload font files using <link rel=preload> for better results.
2.Include width and height elements for videos and images. Aspect ratio allows browsers to calculate the space needed to display media content, reducing risks of layout shift.
3.Optimize dynamic content and CSS. Dynamically injected content should never appear above content that’s already loaded. You can also try to disable CSS merging. However, it’d be better to optimize the code as merging allows loading web pages faster.
Need a help to fix CLS?
