[Resolved] CLS issue on desktop

Home Forums Support [Resolved] CLS issue on desktop

Home Forums Support CLS issue on desktop

Viewing 13 posts - 31 through 43 (of 43 total)
  • Author
    Posts
  • #1928179
    Elvin
    Staff
    Customer Support

    Hi ETO,

    Looking directly at the site, the most obvious cause of CLS is the ads. Specifically, the ad slot before the entry-content.

    Check this screen capture – https://share.getcloudapp.com/lluoXJ5z

    When I refresh the page, on initial page load, the ad doesn’t immediately load. When it loads, you can see that the content shifts down because it’s being pushed down when the ad fully loads.

    That said, I’d suggest trying to find a way to make the ads load faster. Or at least, try to know the size these ads occupy and load their CSS early so the space for the ads is “reserved” so when they load, they don’t shift the elements around them.

    A wise man once said:
    "Have you cleared your cache?"

    #1928281
    Tom
    Lead Developer
    Lead Developer

    In addition to the above (nice find, Elvin!), if you believe it’s your CSS I would narrow down which part of the CSS is causing the issue (removing bit by bit). That may help really nail down what’s going on.

    #1928320
    ETO

    @Elvin, there is no effect of the ads on the CLS because the ads are delayed and only load on mouse hover. You can see in the video I sent that although I disabled the ad and then tested the page speed, there is no change with the CLS.

    Moreover, I have another live site with the same settings except for the custom additional CSS and there is no CLS issue.

    As far as I can see and you can also see in the videos and links I sent you, the cause of CLS is that I use the left sidebar and when sites load, it first loads the sidebar and then the main content. I am not sure if I expressed it correctly.

    So could you please have a closer look at my additional CSS and think if using a left sidebar cause such an issue.

    #1929570
    Tom
    Lead Developer
    Lead Developer

    Here’s one thing you can try:

    .left-sidebar .site-content {
        justify-content: flex-end;
    }

    Let me know if you notice any difference 🙂

    #1930515
    ETO

    Thanks a lot, Tom. After adding that code, the CLS problem finally disappeared, which proved that I was right about the cause of the problem.

    Will you add this piece of code to the core codes in the next update?

    #1930847
    Tom
    Lead Developer
    Lead Developer

    We’ll need to test this quite a bit to prevent it from causing any issues with existing sites. 3.1 is currently in alpha, so I’m not sure it will make it in this version.

    If not, we’ll be sure to test and implement it in 3.2. You’re 100% safe to keep the custom CSS as is and remove it once we do add something similar to the theme.

    Thanks!

    #1939880
    ETO

    Hi, @Tom
    Now CLS issue appears only on mobile with this warning: <main id="main" class="site-main"> and as far as I can see the CLS problem is only on the homepage, which I created using the GenerateBlocks plugin.

    Could you please have a look at it?

    #1940188
    David
    Staff
    Customer Support

    Hi there,

    i tested the home page on mobile and got this result:

    ie. 0 CLS on Lab Data.

    Things to note. Lab Data results are only measured on Site Loading.
    Field Data is captured from CRUX ( Real User Experience ) so will measure CLS that occurs after the site has loaded and the user is scrolling/navigating the site. Any element that gets injected, removed or expanded that was not Triggered by a valid User input such as clicking a toggle will register CLS. Note: Hover events are not counted as valid user inputs.

    First issue:
    1. The advert that Elvin mentions is loading later and shifting the #main container down.
    2. You have a slide down advert container ( slide up on desktop ) this is registering CLS.

    So on Load there is no CLS, but field data will collect CLS events because of those two events.

    #1940195
    Bas

    I’ve had the same problem, the Google Ads were the problem. Install the Flying Scripts plugin to defer the loading of the Adsense block with a few seconds, see if that helps.

    #1940890
    ETO

    Thank you, David. I see what you mean. Actually, I reserve space for Adsense ads in order to prevent CLS.

    According to this post, I use the codes below:

    <div id="ad-slot" style="min-width: 300px; min-height: 250px;">Adsense code...</div>

    @media screen and (max-width: 960px) {
      #ad-slot {
        min-height: 100px;
      }
    }

    Despite reserving space with the codes above, I do not know if there is anything else I can do to fix the problem caused by the two events you mentioned.

    By the way, would you mind removing my site’s link as I do not want it to be public?

    I’ve had the same problem, the Google Ads were the problem. Install the Flying Scripts plugin to defer the loading of the Adsense block with a few seconds, see if that helps.

    I have already used the Perfmatters plugin to delay ads. Thanks anyway.

    #1941299
    David
    Staff
    Customer Support

    URL removed 🙂
    You can try increasing the min-height of the ad-slot container so there isn’t a noticeable change in height when the advert loads.

    For the slideup/down advert banner – several other users were experiencing high CLS because of them. The only solution was to remove them.

    #1941327
    ETO

    Thanks a lot.

    #1941446
    David
    Staff
    Customer Support
Viewing 13 posts - 31 through 43 (of 43 total)
  • You must be logged in to reply to this topic.