需要帮助：您能识别我的 URL 上的桌面 CLS（累积布局转换）吗？

Question

URL: tinyurl.com/36utmdnc

In Google Search Console, I am seeing thousands of errors for Core Web Vitals, particularly the CLS in Desktop mode. I've made a number of changes, such as removing all ads, tweaking the CSS, HTML and other code. I've been making changes for a year actually, but I've really tried tackling this problem over the past 2-3 months, since "Page Experience" is showing a big reduction in "good URLs" and I believe it's now affecting my traffic volume from Google Search. It's been weeks now and the CLS is not changing in Search Console. I've tried validating for a couple of months now.

The example URL above (a product page) has a CLS score of 0.33 according to Google Search Console / Core Web Vitals. It seems all of the errors are on my product pages like the example above. I've ran tests in PageSpeed Insights, which shows a CLS of "0". I understand the reports shown in Google Search Console are from "Chrome User Experience report", which is different than PageSpeed Insights "lab setting".

Here are things I've done:

• Opened Chrome Developer Tools and clicked the checkbox for "Layout Shift Regions", which flash blue during a layout shift. Also checked the "Core Web Vitals" to enable to overlay that adds up CLS throughout the entire browsing experience.
• Opened the Network Tab and throttled the speed down to "very slow tests" and carefully watched for layout shifts while the page loads slowly.
• Carefully read the guides on web.dev/cls/ , ran Chrome's LightHouse test, ran tests on various sites like webvitals.dev/cls , defaced.dev/tools/layout-shift-gif-generator/ , webpagetest.org/webvitals, etc.
• Manually tested using different screen resolution widths/heights using Chrome Developer Tools (800px width, 1400px width, 8000px height, etc).
• Asked tech-savvy friends/users to also check and help identify the CLS.

I can't find anything that could cause a large CLS of 0.33. The number of CLS errors in Search Console is staying steady, going up and down by about 100 URLs every day, but the same example URL above has been stuck there for months. So I was hoping someone with knowledge could find it or identify the underlying issue.

Thanks

Answer 1

I cannot see a CLS score of 0.33 for that page, and agree that testing it myself shows very little CLS.

You are correct that PageSpeed Insights is lab-based, but it also shows the field-based data at the top, and in this case it is saying it does not have enough field-based data for this URL and so is displaying the origin-level data for all the pages for your site.

Google Search Console also shows field-based data, but groups pages it thinks might be similar and gives them all the same CLS scores. This is done at a bit more lower-level grouping than the whole origin so it may group all your product pages together for example, if it has data for some of them.

This page for example has a hover effect that gives a huge CLS when it's used - though can't quite see why as finding it difficult to trigger manually in dev tools.

It is possible those pages are the ones with the actual CLS issue and they are being lumped in with your good page under the product pages group. I would investigate if you can reduce the CLS on that hover effect.

Separately, I notice you are lazy loading your images but not specifying width and height on them . This can lead CLS if the images are not loaded by the time that area scrolls into view for example this test when linking to a bit at the bottom of the page . It is recommended to always include image dimensions on lazy-loaded images (and in fact on all images!) to avoid this. This could be another reason for your high CLS, which is not as evident in lab-based tools that typically only load the top of the page without lazy-loaded content.

I also recommend you read the Debugging Web Vitals in the Field and also the more advanced Measure and debug performance with Google Analytics 4 and BigQuery for additional information as to how to answer why your field-based metrics may be different than what you can observe.