How to Improve Your Cumulative Layout Shift (CLS) Score for Better User Experience

ธ.ค. 30, 2022

Cumulative Layout Shift (CLS) is a metric that measures how much the layout of a webpage changes while it is being loaded. A high CLS score can be a problem because it can cause elements on the page to shift around unexpectedly, leading to a poor user experience.

Cumulative Layout Shift (CLS) is an important metric in website design and development, as it directly impacts user experience. A high CLS score can cause frustration and even drive visitors away, which is why it’s crucial to keep it low. In this article, we’ll provide actionable tips to help you improve your CLS score and enhance your website’s user experience.

Understanding Cumulative Layout Shift

CLS is a metric that measures the visual stability of a website, or how much its content moves around while loading. This movement can cause a user to click on the wrong element, leading to unintended actions and a poor user experience. CLS is calculated by taking into account the distance and area of each layout shift that occurs between the first paint and the time when the page is considered stable.

Factors That Contribute to High CLS Scores

There are several factors that contribute to high CLS scores, including:

  • Images and videos without specified dimensions
  • Dynamic content that causes layout shifts
  • Web fonts causing layout shifts
  • Advertisements and third-party widgets

Improving CLS Scores

Here are several tips to help you improve your CLS score:

Specify Image and Video Dimensions

When adding images and videos to your website, make sure to specify their dimensions in the HTML or CSS. This will prevent layout shifts from occurring as the page loads and ensures that the content remains in place.

Load Dynamic Content Asynchronously

If you have dynamic content on your website, such as advertisements or user-generated content, make sure to load it asynchronously. This will prevent layout shifts from occurring while the content loads, and ensure a stable user experience.

Use font-display with Web Fonts

Web fonts can cause layout shifts as they are being loaded, which can negatively impact CLS scores. To prevent this, use the CSS font-display property to specify how the font should be loaded and displayed.

Minimize the Use of Third-Party Widgets

Third-party widgets, such as advertisements, can cause significant layout shifts, leading to high CLS scores. Minimize their use and carefully consider their impact on user experience.


Improving your CLS score is crucial for providing a positive user experience on your website. By following the tips outlined above, you can reduce layout shifts and enhance the overall stability of your website. With a stable and user-friendly website, you can increase engagement and drive more conversions.

graph LR

A[Specify Image and Video Dimensions] –> B[Stable User Experience]

B –> C[Load Dynamic Content Asynchronously]

C –> D[Use font-display with Web Fonts]

D –> E[Minimize Use of Third-Party Widgets]

E –> F[Improved CLS Score & Enhanced User Experience]

มองหาFor Designers | For Developersเพิ่มเติมอยู่ใช่ไหม ลองดูนี่สิ!