What is Cumulative Layout Shift and How to improve CLS score?

Cumulative Layout Shift is the Core Web Vital metric with LCP and FID. CLS is used to measure the unexpected layout shift experienced while a page is loading.

When a user clicks on your page, elements like Ads, sign-up buttons, or important links move or suddenly jump, causing the user to click on something unintended because of a layout shift.

Layout shift can cause users to leave your site and move on to a different one if your page doesn’t load properly. This user behavior sends a signal to Google indicating a low page experience.

Optimizing user experience and match Google standards for core web vitals need experience and expertise in development, you can try page speed and core web vitals professional services to optimize the website for CLS and other core web vitals factors.

Now we have understood CLS, let’s talk about how CLS affects SEO.

Is CLS a ranking factor?

Google announced in 2021 that Core Web Vitals, including Cumulative Layout Shift, are one of the top ranking signals.

Providing a quality page experience to users has always been a top priority of Google while ranking websites. Hence, it’s vital to improve your page performance to prevent providing a poor user experience to your users and stay on top of SERP results.

Since most users are using mobile devices nowadays, optimizing layout shifts for mobile has become more critical than ever.

What is an ideal CLS score?

Image Reference:https://web.dev/cls/

The target to have a good CLS score is 0.1 or lower. Google came up with three thresholds to score your site’s layout shift – Good, Needs Improvement & Bad.

If 75% of your site meets the ‘Good’ threshold, it provides a high-quality user experience.
The UX is poor if 75% of your site meets the ‘Bad’ threshold.

Good: <=0.1

Needs Improvement: 0.1 to 0.25

Bad : >0.25

How to measure CLS score?

CLS can be measured using tools that provide both Lab and Field data.

While Field data is collected from

Real User Monitoring, Lab data is generated when a website is analyzed in a

synthetic(restricted) environment.

Here are the top three tools to improve your CLS score

Lighthouse

An automated tool that is designed to improve the quality of your webpage. Lighthouse audits your site performance by prioritizing the number of layout shifts occurring while the page is rendering.

Lighthouse provides a visual representation of the CLS report to identify what is causing the layout shift and how to fix it.

PageSpeed Insights

Page Speed Insights is considered one of the best tools to measure your CLS. PageSpeed Insights provides deeper insights on elements causing the layout shift in the diagnostic area. Each element is scored based on the shift’s gravity affecting the user experience.

Google Search Console

While Search Console measures your overall web performance, it also measures the unexpected layout shift affecting the user experience on both the devices mobile and desktop.

What are the causes of the layout shift, and how to improve the CLS score?

Set height and width attributes for image and video

Media assets play a significant role in e-commerce websites like Amazon since online shoppers rely on decision-making based on the pictures of the products they are willing to buy.

Having multiple web pages with tons of images and videos can cause slow down your entire web page when height and width size attributes are not set.

Previously, by setting the <img> tag, height and width attributes were set to communicate with the browser to allot space while fetching images and videos during loading time.

Since websites started implementing the Responsive Web Design(RWD) approach to adapt to devices of all sizes, the static attribution had to change.

For responsive images and videos, modern CSS approaches can help to lower your CLS score to 0. Browsers can automatically calculate the image’s height by setting max-width alone.

Img {

height: auto;

max-width: 100%;

}

By adding the above CSS to your stylesheet, the browser knows how to handle images and videos.

Set dimensions for ads, embeds, and iframes.

Ads tend to gain higher click-through rates when they are significant. But they also affect the user experience when they are not optimized for CLS.

Layout shifts for Ads occur when the aspect ratio is not set correctly. To reduce that, slot size in the content flow is allocated when placing ads. Styling a slightly large container and placing the ads at the center of the viewport can prevent layout shifts.

Regarding embeds and iframes, browsers do not know how much space to allot as they can contain images, videos, or texts. You can extract the height of iframes and embeds with the help of developer tools and update the size sufficient to fit them in placeholders.

Handle dynamic content

Dynamic content is nothing but news-paper sign-ups, pop-up boxes, chat-bots, etc., that appear based on user behavior. They also majorly contribute to causing layout shifts. Reserve space in advance using a placeholder so there’s no unexpected shift.

Also, while replacing or adding new dynamic content, place it below the existing content so that they don’t jump or push the content down.

Preload web fonts

Web fonts may seem like the least of your concerns, but once optimized can bring a huge difference in your CLS score. Visitors can experience a “Flash Of Invisible Text” (FOIT) or “Flash Of Unstyled Text” (FOUT) when web fonts take time to fetch and render.

Flash Of Invisible Text: A blank page is displayed when a new font is rendered into the page.
Flash Of Unstyled Text: Fallback font is displayed first until the style font renders into the page.

In both these instances, browsers render the web page twice, causing a layout shift.

Previously preloading web fonts using <link rel=preload> was implemented, but it either took too much time to load or ended up with a black page after exceeding the time limit.

Instead, font-display: optional that gives you a font block period to show up on the first-page view. After downloading, it caches the page view and uses it for the next page.

Conclusion

Lower the chances of layout shift by implementing the above best practices during website development itself. CLS should always be at the top of your checklist when auditing your website.

Whenever you add new elements to your website, make sure you use the debugging tools to improve your CLS score and your SERP rankings.