CLS Test: Check your Cumulative Layout Shift

What is CLS?

Cumulative Layout Shift (CLS) is part of Core Web Vitals Metrics and measures the group of layout shift events that happen unexpectedly during a page’s entire lifecycle. It captures the overall impact of these shifts on the user experience.

What is a good CLS?

Good value for CLS is under 0.1 and a poor CLS is over 0.25:

How to reduce CLS?

Here are some key tips to assist you.

1.Reserve Space for Images, Ads, and elements on the page

2. Preload fonts to speed up their display

3. Minimize Animations That Trigger Layout Shifts

4. Use a Font Loading Strategy

5. Watch and monitor CLS with RUM tool

Measure other Web Vitals metrics

Links to help you explore furthers

Cumulative Layout Shift (CLS) on Web.dev

How to validate site speed optimization efforts – Speetals

Test Speetals for 10 days

See how Speetals can transform your Web Performance workflow during 10 days for only 2 $ (no auto-renew)

Web Vitals monitoring

50k page views of Real User Monitoring

Data of 5 countries

Daily data refresh

5 user seats