DEV Community

Cover image for Measuring Cumulative Layout Shift (CLS) in WebPageTest

Measuring Cumulative Layout Shift (CLS) in WebPageTest

Rick Viscomi on July 18, 2019

What is CLS? Cumulative Layout Shift (CLS) is a relatively new metric to help you understand the delightfulness of the user experience. ...
Collapse
 
shailenderjain profile image
Shailender Jain

I want to check the value for my site miniimagesvideos.com/
I run the site against developers.google.com/speed/pagesp.... Field value is coming as 0.26, while the lab value is coming as 0.0. I have embed the script in my html pages and keep getting the value as 0. Is there any site which can measure accurately

Collapse
 
rick_viscomi profile image
Rick Viscomi

This is a great question and one of the challenges of measuring CLS in the lab.

Field data is inclusive of all of the actions users take on the website like scrolling and interacting with buttons. CLS may be occurring in these kinds of scenarios that lab tools like WebPageTest and Lighthouse don't currently simulate by default. With CLS gaining popularity as a Core Web Vital metric, I'd love to see lab tools incorporate more user-like behaviors to be comparable with field data.

Collapse
 
imkevdev profile image
Kevin Farrugia

Web Vitals come from CrUX, does this mean that CLS should be tested as a repeat visitor if most traffic is for repeat visitors? The same applies for cookie popups, which only appear on first visit, should WPT be tested with the cookies set (to disable the popup)?

Collapse
 
vamshi profile image
vamshi • Edited

I always check only performance score on the PageSpeed Insights for my websites pdfbar.com, compressjpeg.online and pdftojpg.online After reading this article I also inspect the Cumulative Layout Shift (CLS) values for web and mobile versions of my websites. Thanks for the article.

Collapse
 
jabbar_mughal_ea3cfa760fb profile image
Jabbar Mughal

I used to focus solely on the performance score when checking my websites compressjpg.co, and pngtojpeg-converter.com and more using PageSpeed Insights. However, after reading this enlightening article, I have also started paying attention to the Cumulative Layout Shift (CLS) values for both web and mobile versions of these sites. Thanks for sharing this valuable information!

Collapse
 
dkranker profile image
dkranker

One of the solutions I've been seeing for improving CLS is to use img { aspect-ratio: attr(width) / attr(height);}. However, I'm seeing aspect-ratio as not supported when I inspect in chrome for any use I've tried. Could anyone provide any insight on this?

Collapse
 
garrettn profile image
Garrett Nafzinger

This was quite helpful and well documented. Thank you!

Collapse
 
bobbyiliev profile image
Bobby Iliev

Great tutorial! It helped me a lot today! Well done!

Collapse
 
rick_viscomi profile image
Rick Viscomi

Thanks, I'm glad to hear that!

Collapse
 
vigodnee profile image
Алексей Махметхажиев

Awesome! Thanks!