Archived topic
div#page.site.grid-container.container.hfeed causing CLS
5 replies · Started by William on November 18, 2021
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
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 :)
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
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.
That has helped so much, thank you!
No problem. :)
