[Resolved] CLS issue: more than 0.25 (mobile)

[purnima banik]

Hi GP Team,
I started getting the ” CLS issue: more than 0.25 (mobile)” errors in my search console. What could be the cause of this error? Please suggest.

[Tom]

Hi there,

CLS is your layout shifting while the page loads, which can be:

1. Ads, even Google ads.
2. Fonts as they load (text suddenly appearing once the font has loaded).
3. Anything else that moves the page around as it loads.

In your case, I’m willing to bet it’s the ad above the content area.

[purnima banik]

Ok, I got it. Thank you for the response.

[Tom]

No problem 🙂

[Marin]

I’m getting same CLS issue: more than 0.25 (mobile) for https://shop.vkn.hr/
Do you mind having a look?

[David]

Hi there,

you have a lazy loaded that is affecting the Logo.
Look for the exclude image options in the lazy loader plugin.

Another other issue is your Slider in the Page Hero is taking its time to load. You may be able to get around this by giving the page hero a minimum height using some CSS:

.page-hero {
    min-height: 480px;
}

You may need to adjust the min-height.

[Marin]

I have tried advised but same issue persisted. In search console, there is quite a lot pages with same issue so my conclusion there should be something else causing CLS flag.

Some pages have page hero (example https://shop.vkn.hr/kategorija-proizvoda/hygiene/pistolji-i-crijeva-za-vodu/), some don’t (example https://shop.vkn.hr/kategorija-proizvoda/hygiene/pjenomati/). And both version have same CLS.

p.s. I have excluded logo from lazy loading

[David]

Logo is working well now.

Some GP related things – go to Customizer > General –> Icon Type – change this to SVG. This will remove the need to load an icon font.

Testing those two pages reports 0 or very little CLS.

But other potential issues i can see:

Above the fold images are being affected by Lazy Loaded. Exclude them.
Improve Font loading performance by removing unused font variants:
https://docs.generatepress.com/article/google-font-variants/ or consider a System Stack Font.
Other than that you have a lot of 3rd party scripts that will cause render blocking which in turn effects performance

[Marin]

System stack font did the trick! CLS is 0, and load time improved. Thanks for help.

[David]

Glad to be of help

[Sunita]

Hi GP Team, a have issue in google webmaster tools about

CLS issue: more than 0.25 (mobile) (and current avg cls is 35)
CLS issue: more than 0.25 (desktop) (and current avg cls is 28)

my blog is http://www.examsedu.in

how I can solve it please help me.

[David]

Hi there,

The one issue i can see in Page Speed Insights loading thumbnails is your logo is missing on initial load. This is because its being lazy loaded.

Lazy Loader plugins generally have an option to exclude the images by file name. Exclude the logo to resolve that issue.

Please note: when running a google test you want to check the Lab Data value – not the Field Data.

[Buenaventura]

Hi GP team,
I have 30 url with this issue (more 2,5s.(movil)
My web is https://setascanarias.com/
Could you give me any information to solve it?
Thank you
Ventura

[David]

Hi there,

you may want to check with your host, if your run a test on GT Metrix you and check the WaterFall report you will see long Waiting times ( purple bars ) this is the time the request is waiting to be fulfilled by your server.

[Buenaventura]

Thank you David

[Author]

Posts