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

[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

[Ying]

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 🙂

[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

[Elvin]

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.

[William]

That has helped so much, thank you!

[Elvin]

No problem. 🙂

[Author]

Posts