Cumulative Layout Shift: how to adjust

Hosta Blanca

1 year ago

Cumulative Layout Shift (CLS) is a critical performance metric that measures how much content shifts or moves around on a web page as it loads. This movement can be frustrating for users, as it can cause them to accidentally click on the wrong elements or lose their place on the page. Google has also recently announced that CLS will become a ranking factor in May 2021, making it more important than ever for website owners to optimize their pages for this metric. In this article, we will discuss what CLS is, how it affects user experience and SEO, and the best ways to adjust CLS to improve your website’s performance.

What is Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) is a metric that measures how much the layout of a page shifts as it loads. This shift can be caused by a variety of factors, including images and videos that load late or elements that are dynamically resized as the page loads. CLS is calculated by multiplying the distance that a layout element has moved by its size. Then summing these values for all layout shifts that occur during page load. The result is a score between 0 and 1, with a lower score indicating less layout shift.

Why is CLS Important?

Cumulative Layout Shift is an important metric for two main reasons: user experience and SEO. From a user experience standpoint, a page with a high CLS can be frustrating and confusing for users. When elements on the page move or shift around unexpectedly, users can lose their place on the page or accidentally click on the wrong elements. This can lead to a poor user experience and cause users to leave your site.

From an SEO standpoint, Google has announced that CLS will become a ranking factor in May 2021. This means that pages with a high CLS score may be penalized in search rankings, while pages with a low CLS score may see a boost in rankings. Therefore, optimizing for CLS is crucial if you want to improve your website’s search engine visibility.

How to Measure Cumulative Layout Shift?

To measure Cumulative Layout Shift on your website, you can use Google’s PageSpeed Insights tool or Chrome DevTools. Both tools will provide you with a score between 0 and 1, as well as a breakdown of the causes of any layout shifts that occurred during page load. You can also use a tool like WebPageTest to measure CLS and other performance metrics for your website.

How to Adjust CLS?

Here are some steps you can take to adjust your CLS:

Optimize images. Large or unoptimized images can cause layout shifts as they load. Make sure images are properly sized and compressed to reduce their impact on CLS.
Use aspect ratios for media elements. When you use an aspect ratio for an image or video, the browser knows how much space it will take up before it loads. This can help prevent layout shifts caused by media elements.
Reserve space for ads and embeds: Ads and embeds often load asynchronously, which can cause layout shifts. By reserving space for them in your layout, you can prevent these shifts.
Avoid dynamically injected content. Content that’s injected into the page after it loads, such as pop-ups or chat boxes, can cause layout shifts. Try to avoid using this type of content. Make sure it’s loaded in a way that doesn’t impact the layout.
Load fonts asynchronously. If you’re using custom fonts on your website, loading them asynchronously can help prevent layout shifts caused by font loading.
Use a preloader. A preloader is a screen that appears while your website is loading. It can help prevent layout shifts by giving the user something to look at while the page is loading.

By taking these steps, you can help reduce the impact of layout shifts on your website and improve the user experience. We recomend Hosta Blanca Shared hosting or VPS server for your web projects.