[Support request] CLS issue on my website

[Adarsha]

Hey.

I recently changed from divi to GP on my live website.
The corewebvitals for my website based on field data was always bad for LCP, FID and CLS with Divi. (Field data for 30 days avg)

After I changed to GP, I ran for validation recheck for all via my google search console. They started on 1st of this month and finally yesterday it has shown as finished. For LCP, FTD it has all improved and turned to green for Field data. But CLS has not changed at all.
CLS in field data shows as FAILED (In console)

https://prnt.sc/UWasQrGGaYvE
https://prnt.sc/NvnKPXSWikQe

Screens of results. When I check via page speed insights for lab data, CLS always shows as 0. It showed as 0 for Divi as well when I did some optimizations. But real data was bad. I assumed GP would solve this, but sadly still continues.

I have attached the website in private area.

[David]

Hi there,

there is very minor CSS on page load, as can be seen a page speed insight test ( under diagnostics ):

its about 0.03 which is well within tolerance, this of course can accumulate over many pages and may present the larger CLS issue.

The reason for that little CLS is the Google Fonts being loaded with the font-display: swap; property, which is a setting that looks to be coming from the Perfmatters plugin. Try setting that to Auto ( and make sure it is also Auto in the Customizer > Typography settings ).

There may be a larger issue that happens after the page has loaded which can’t be measured on page speed insights, things like Pop Ups that are not triggered by a user action can be a CLS problem.

[Adarsha]

Hey. Please do remove the above link. (Hide the website)

I have a pop up coming after 30 seconds for free ebook. You think that causes CLS?
I that the CLS measured was for “above the fold” when page is loaded and there is no CLS there.

How can any pop up in future time as they load cause CLS? Hearing that for first time. Every website usually has such pop up’s.
I don’t even have Ad’s.
Google field data shows close to 0.42 since last month.

I have lazy load images enabled. Will that cause CLS? If so many websites have it aswell.

Nothing else moves after initial load other than these

[David]

Any layout shift on a page that was not the result of a valid user action ( eg. click button to open menu ) can result in a CLS value being recorded by the Browser.

So yes, Pop Ups and Modals can cause CLS, yes I have seen that. Can I say whether your sites pop is causing CLS ? No i cannot without performance testing.

Likewise Lazy Loaders can generate CLS if they DO NOT use a dynamic placeholder image. But the lazy lazy loader you’re using does use a dynamic placeholder.

You should look to fix the Font related shift I mentioned first, as that is a visible issue.

[Adarsha]

But the pop up appears after 30 seconds. How can that be counted for CLS? Please do check what other stuff maybe causing CLS for field data while lab data from pagespeedinsights has no issues.

I did change the swap part just now. Thanks for the advice on that

[Fernando]

Hi Adarsha,

I found this article really helpful in understanding why such issue occurs: https://web.dev/lab-and-field-data-differences/#cls

Specifically, “In the field, CLS considers all unexpected layout shifts that occur throughout the lifespan of the page”.

Since field data considers everything in the “lifespan” of the page, this would mean that if there is CLS caused by a pop up 30 seconds after the page loads, it would definitely be recorded in the field data.

Now, with regards to the Font related shift, as field data is presented on a 28-day cycle, the results of this change most likely wont be apparent now, but only after 28 days.

Hope this clarifies. 🙂

[Author]

Posts