CLS

Hi Victor,

From my end, the lab tests are great: https://share.getcloudapp.com/YEukQpZL

It’s the field test CLS that is failing, and the issue seems to stem from your ad. See this screen recording: https://share.getcloudapp.com/jkuXYQLN

The script that determines the height of the Ad is loaded late, pushing down the elements.

Are you using CSS optimization/critical CSS through WP Rocket? Can you try disabling them and we’ll see if this will make the ad’s height load first before others, since it’s also above the fold.

Kindly let us know.

Hello,

I have disabled minify CSS files. It was the only CSS option enabled on the wp rocket CSS optimization area.

https://ibb.co/0BgmtDd

May we know how you’re adding the ad? Is it through a Hook Element?

Right now, the div containing the script has a class of “grid-container”. Can you try adding another class like advert-container, and add this CSS in Appearance > Customize > Additional CSS:

@media (max-width: 768px) {
    .advert-container.grid-container {
        min-height: 325px;
    }
}

@media (min-width: 769px) {
    .advert-container.grid-container {
        min-height: 280px;
    }
}

Kindly let us know once you’ve made the modifications and we’ll take a look.

Hello, through the hook. I have added the code.

Hi there,

you need to edit this HTML:

https://www.screencast.com/t/KDFzkpPT7HW

It should be change to:

https://www.screencast.com/t/hRK39m585E

How can I edit this?

How did you add the Advert to your website ?

How did you add the Advert to your website ?

Hi, added through a hook.

If you edit that hook - do you see the <div class="grid-container"> HTML ?

Yes, I can see it..first line

Simply replace that line with:

<div class="grid-container advert-container">

Hello David,

I have replaced it. Kindly have a look and let me know if the issue has been solved.