I have been trying to figure out CLS on a site and I have been using the Web Vitals Chrome extension based on Web.dev’s recommendation (Web Vitals). However, I can change the width of a test page and get wildly different results. Some widths will get a CLS score of zero. Other widths return a result over .4. As an example, below are some screenshots of the web.dev/cls page showing different results based on width (which I found ironic).
So my question about webpagetest.org’s results is what width do they use for a site? Do they check multiple widths and average the score? How do we get a consistent score to know the site’s true CLS? Better yet, how will Google judge on their search score?
Is there a reliable tool that can tell us what our site truly scores so we can accurately measure and fix sites accordingly? Help, please!
WebPageTest defaults to 1024x768 in desktop mode (should probably bite the bullet and finally switch it to a 16:9 resolution) but you can set arbitrary dimensions with a script. Mobile uses whatever the phone screen resolution is.
Google will use the data from the chrome user experience report (CrUX) which is field data measured by Chrome from the users that visit your site. If the site shifts layouts with different resolutions then it is going to be a mix of what the users see.
Patrick, thank you very much for your response on the topic. I read through the documentation and missed that Google would use the experience report. Now if anyone looks at those numbers, I know where to investigate.
Also, thank you for a target resolution on web page test. I can use this in any questions to show how screen width affects the numbers with a consistent baseline example. I am not the lone developer so I do not have sole control on how the numbers are affected.
