[Support request] Site sometimes Fails CLS on desktop?

[Hugo]

Hi there,

So I’m monetising my site with Ezoic and it’s failing CLS on desptop at the moment, but when I test it using Google site speed test, and also Ezoic’s site speed checker, sometimes they report a really good score, and every 3rd or 4th time they report a very poor CLS score. Where the page content loads, then the ezoic ads push the content much lower down after the initial content loads.

This doesn’t always happen however. I know this is a question for Ezoic also, but I felt it was worth asking. If there’s an easy fix for Ezoic’s ad space to not push content down at randon intervals?

I hope that makes sense, feel free to ask for more information.

Cheers.

[David]

Hi there,

Ezoic is adding placeholders containers for its adverts that have a minimum height set using CSS – for example we see here one of them is set to 90px:

.ezoic-ad.box-2220 {
    display: block;
    float: none;
    line-height: 0;
    margin-bottom: 15px!important;
    margin-left: auto!important;
    margin-right: auto!important;
    margin-top: 15px!important;
    max-width: 100%!important;
    min-height: 90px;
    min-width: 728px;
    padding: 0;
    text-align: center!important;
    width: 100%;
}

One would assume the script loading the advert would therefore limit the adverts it displays to maximum height of 90px.
If CLS is occurring then that cannot be the case. And its only something Ezoic can address.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hugo]

Hey David,

Well I’ve disabled Ezoic ads on desktop yet I’m still getting this CLS issue on desktop which is causing me to fail CWV.

It’s weird because mobile is fine and everything else on desktop loads fine as well.

[Leo]

Have you resolved this?

Just ran a Lighthouse test and the result is very good:
https://www.screencast.com/t/uc4uysIT

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hugo]

Hey Leo,

You need to run the page speed multiple times and you’ll get the issue. For some reason sometimes google page speed shows the issue, and other times it does not.

It’s something to do with Generate Press as you can see here.

https://ibb.co/5MtsCjq
https://ibb.co/vdJPWjt

[David]

When Google lists the elements under layout shifts those are the elements being shifted. Aside from Images or other media elements that are missing width and height attributes, the elements listed are simply HTML and cannot themselves cause CLS.

CLS will generally occur if there is a change in styles AFTER the page is first rendered.
The main cause of this is any Optimizations being run on the site, such as Ezoic Leap or WP Rocket etc.
Test the page without any optimizations/caches running to see if they are causing an issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Hugo]

Hey David,

Ok that’s good to know, so you think those page speed fixes where they adjust how the page loads could be causing this issue?

[Fernando]

Hi Hugo,

Yes, optimization plugins are useful tools, but they may also cause issues if implemented improperly.

An example wherein optimization plugins affect page loading and in turn, sometimes causes CLS, is lazy-loading. Reference: https://web.dev/lazy-loading-best-practices/#wrong-layout-shifting

Lazy-loading assets above the fold are ill advised as well as these are critical assets.

Sometimes, how Critical CSS is implemented by Optimization plugins also causes CLS issues.

Combination/Merging of CSS or JS files may also cause issues.

As mentioned by David, if you try disabling all Caching/Optimization plugins, you would see if these are causing the issue. If not, it could be another plugin causing it.

As a first step of debugging, we usually advice doing #1 here: https://docs.generatepress.com/article/debugging-tips/

Hope this clarifies.

[Hugo]

Thank you Fernando and Dave, that worked. When I disabled the CSS optimizations via Ezoic I can’t recreate the CLS issue now.

[Fernando]

You’re welcome Hugo! We’re glad to be of assistance!

[Author]

Posts