Cumulative Layout Shift: What It Is & How to Improve the Score

Introduction

The Cumulative Layout Shift is a metric incorporated within the initiative of Google’s Core Web Vitals. Whenever a user views your webpage, CLS assesses the amount of unexpected layout shifts that take place.

In this post, you will see what a Cumulative Layout Shift, how to measure it, and how to optimize it for better user experience.

What is Cumulative Layout Shift

Cumulative Layout Shift is part of a Core Web Vitals metric along with the First Input Delay and Largest Contentful Paint. It measures the movement of elements during the rendering and downloading of the page. 

The prevalence of such incidents is higher on buttons, images, and other interactive elements, but they can also be readily identified in the text. 

For instance, if a user opens a webpage and while reading its content, a banner unexpectedly loads. It can cause the page to shift downwards. This would lead to a considerable Cumulative Layout Shift score.

According to Google, a Cumulative Layout Shift is satisfactory if it is below 0.1, but if it exceeds 0.25, it is regarded as poor.

How to Measure Cumulative Layout Shift

There are some tools mentioned below that help you to measure the CLS score of your website.

1) PageSpeed Insights

PageSpeed Insights is an exceptional tool for identifying and assessing Cumulative Layout Shifts. By utilizing the CLS score from field and lab data, the tool enables you to assess both user and controlled data measurements. 

PSI provides information on the potential element that leads to layout shifts.

To evaluate performance using PageSpeed Insights, you need to follow these guidelines:

  • First, you need to input the URL of the desired website into the PSI tool.
  • Now you have to proceed by clicking on the Analyze button.
  • After that evaluate your performance. You can see the option to assess both desktop and mobile performance. It can be toggled by utilizing the navigation located in the top left corner.

After analyzing the page you can get a commendable cumulative layout shift score of 0.001.

2) Chrome DevTools

Chrome DevTools helps you to analyze your performance in below mentioned steps:

  • First, you have to open the Google Chrome browser and simply right-click on any section of a page. Now, proceed with choosing the Inspect option.
  • After that DevTools panel will be visible on the right side of the page.
  • Now click on the Lighthouse tab and choose Analyze page load to create a Lighthouse performance report for the site.

You should not be concerned if you notice an element with a CLS contribution of 0.001. It does not have a significant adverse impact on user experience. If any layout shifts occur on the page, they will be visible in the Diagnostics section of the report.

What causes Cumulative Layout Shift

Google identifies five primary factors that lead to a lower CLS score:

1) Images lacking dimensions

When images on a page lack specific dimensions, the browser may not reserve the necessary space for them. It leads to unexpected layout shifts.

2) Dynamically injected content

Content that is included on a webpage after it has completed loading leads to a layout shift. This happens if the browser requires to adjust the layout to accommodate the new elements.

3) Ads, iframes, and embeds without dimensions

Similar to the images, iframes, advertisements, and embeds that do not have specified dimensions lead to layout shifts. This is because the browser attempts to allocate space for them.

4) Actions waiting for a network response before updating DOM

If a user acts on a webpage, the action requires a network response before updating the Document Object Module. It may lead to the layout shift as the browser waits for the response.

5) Web Fonts causing FOUT / FOIT

Improperly optimized web fonts lead to a Flash of Unstyled Text and a Flash of  Invisible Text. It can cause layout shifts as the fonts are loaded and applied.

How to Optimize Cumulative Layout Shift

To improve the performance of your site and usability, it is essential to optimize the CLS score.

1) Specify Dimensions for Videos and Images 

By specifying the dimensions for videos and images you can easily fix your CLS. Instead of allowing users to determine the width and height of media, it is more effective to specify the dimensions for your media.

By specifying the dimensions you are instructing the browser about the amount of space to reserve, regardless of whether the image has been loaded or not.

2) Reserve Size and Space for Advertisement Slots

To prevent any layout shift issues with ads, it is advisable to follow a set of best practices:

  • First, you have to assign fixed dimensions to the advertisements, ensuring that an adequate amount of space is reserved for the loading.
  • Allocate the largest possible space for the advertisements. You need to use the historical data to determine the most suitable dimensions for each ad slot.
  • You need to avoid collapsing any area related to the viewport. You can do so by keeping all spaces reserved for advertisements that have not been displayed. Instead of that you should consider incorporating a fallback element or placeholder.
  • You should also position non-sticky advertisements in the middle of your page. It should be positioned away from the top of the viewport.

3) Review Dynamic Content

The presence of dynamic content can also contribute to the CLS issue. Websites frequently incorporate dynamic content to engage users and encourage them to perform particular actions. Nevertheless, when new content elements suddenly appear at the bottom or top of the page, it may disrupt the layout. It leads to the displacement of surrounding content.

Thus it is recommended to refrain from inserting dynamic content above the content that is already presented. There are various techniques to assess the dynamically inserted content, such as:

  • To prevent unexpected shifts and ensure a smooth user experience, it is recommended to incorporate a user interaction element. Those elements should activate the loading of new content.
  • To minimize the CLS, loading the content off-screen is an effective strategy. Loading the dynamic content outside the user viewport and utilizing an overlay like a Scroll Up notification, users get encouraged to see the content without affecting the CLS.
  • To prevent any layout disruptions it is recommended to utilize a container with a fixed size. Alternatively, you can opt for a carousel specifically when your dynamic content requires one element with another. You need to make sure that any controls or links patiently wait for the transition, thereby preventing any inadvertent clicks.

Conclusion

With a weightage of 25% in the PageSpeed score, Cumulative Layout Shift holds immense significance. It performs as a highly pertinent metric. 

To generate a better user experience and enhance the performance of your website, it is necessary to fix your CLS score. It is necessary to improve the search engine ranking of your site. Consequently it has the potential to influence your SEO performance as well.