[Resolved] div#page.site.grid-container.container.hfeed causing CLS

Home Forums Support [Resolved] div#page.site.grid-container.container.hfeed causing CLS

Home Forums Support div#page.site.grid-container.container.hfeed causing CLS

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2009983
    William

    Hi there,

    I’m looking to fix CLS on my website such as with this post, and notice in Cloudflare insights that there is a lot of CLS that seems to be appearing from “div#page.site.grid-container.container.hfeed”

    I cannot really tell where this is, so might be GP theme-related – what is it, and is there a way to prevent such CLS from occurring?

    Kind regards,

    Will

    #2009997
    Ying
    Staff
    Customer Support

    Hi William,

    I ran a lighthouse report for the post you linked, seems the CLS is not too bad, at least it’s green.
    https://www.screencast.com/t/sGfl05EXB8g

    I don’t think GP itself causes any CLS, have you tried disabling all plugins and remove all the custom scripts, then run another test?

    Let me know ๐Ÿ™‚

    #2016539
    William

    Hi Ying,

    I can’t do that to the live version of the site – just I found Cloudflare for core web vitals to be pretty spot on in general, especially with CLS. So, just wanted to double-check and make sure there was not something going on with that element that was causing some sort of CLS with GP?

    Kind regards,

    Will

    #2016598
    Elvin
    Staff
    Customer Support

    Hi Will,

    To add input:

    div#page.site.grid-container.container.hfeed is pretty broad as it’s a parent element of the entire content area. This flag is like saying “something is shifting the page’s content”.

    I did a bit of investigating and I think the most obvious source of CLS is the <div class="header_advert"> element.

    The contents of this element is shifting everything below it when it loads including div#page.site.grid-container.container.hfeed which is directly below it.

    You may want to consider reserving a min-height for this element so the contents below it doesn’t get shifted down.

    Example:

    .header_advert {
        min-height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    Note: You may have to do this for the rest of the ads on your site.

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

    #2018829
    William

    That has helped so much, thank you!

    #2018832
    Elvin
    Staff
    Customer Support

    No problem. ๐Ÿ™‚

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

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