[Support request] Site sometimes Fails CLS on desktop?

Home Forums Support [Support request] Site sometimes Fails CLS on desktop?

Home Forums Support Site sometimes Fails CLS on desktop?

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2227561
    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.

    #2227627
    David
    Staff
    Customer Support

    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.

    #2235744
    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.

    #2235828
    Leo
    Staff
    Customer Support

    Have you resolved this?

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

    #2236523
    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

    #2236794
    David
    Staff
    Customer Support

    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.

    #2237287
    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?

    #2237363
    Fernando
    Customer Support

    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.

    #2237717
    Hugo

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

    #2238623
    Fernando
    Customer Support

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.