Archived topic

CLS

9 replies · Started by Nicole on February 27, 2022

Viewing posts 1–10 of 10

February 27, 2022 at 11:47 pm #2136153

I am trying to get rid of my CLS shift but nothing seems to solve the problem. It looks like all the issues are related to the navigation menu. I made it open on click only (even though I would prefer hover) but it didn't help. These are the things that still seem to be causing a shift:

<header class="site-header grid-container has-inline-mobile-toggle" id="masthead" aria-label="Site" itemtype="https://schema.org/WPHeader" itemscope="">
0.39

February 28, 2022 at 12:07 am #2136175

Hi Nicole,

I tried testing your website on 3 different platforms.

GTmetrix: https://share.getcloudapp.com/RBuygAJD

Lighthouse: https://share.getcloudapp.com/6quEjoJD

PageSpeed Insights: https://share.getcloudapp.com/WnuqQ8p4

As shown, I couldn’t seem to replicate the issue on multiple tests. It seems that the CLS issue no longer exists. With that said, may I know if you’ve already resolved this?

Hope to hear from you soon. :)

February 28, 2022 at 12:47 am #2136210

Thank you for checking that out. I checked again and the mobile doesn't have a CLS issue but the desktop still does.

I added a link to the page that I am working on where the CLS issue seems to be more of an issue which is strange since the navigation should affect all pages equally.

February 28, 2022 at 1:11 am #2136225

No problem Nicole! I can see the CLS in the link you sent. It appears that the cause of the CLS/movement of the elements specified in the tests are the advertisements.

Specifically, once they load, they push the specified elements in GTmetrix out of place.

This isn’t a theme related issue but here are some tips I found which could assist you regarding this:

https://wp-rocket.me/google-core-web-vitals-wordpress/improve-cumulative-layout-shift/#:~:text=the%20dedicated%20section!-,Ads%2C%20Embeds%2C%20and%20Iframes%20Without%20Dimensions,-The%20same%20%E2%80%9Cdimension

Also see: https://wp-rocket.me/google-core-web-vitals-wordpress/improve-cumulative-layout-shift/#manage-space-size-ads

Hope this helps! :)

February 28, 2022 at 1:24 am #2136242

Thanks so much!

February 28, 2022 at 1:51 am #2136262

You’re welcome Nicole! Glad to be of assistance! Feel free to reach out anytime if you’ll need assistance with anything else. :)

February 28, 2022 at 7:18 am #2136579

It is possible to make the section on the top a set height (higher than the ad) and then the ad won't make a difference?

I am referring to the banner on the top of the navigation bar. If that section is 100 pixels high no matter what ad is there then I assume that that will solve the problem. That is what I had in my previous theme but I don't know how to do it with Generatepress.

February 28, 2022 at 8:49 am #2136822

Hi there,

you can try adding some CSS:

#AdThrive_Header_1_desktop {
    min-height: 90px;
}

February 28, 2022 at 11:48 am #2137017

Thanks very much!

March 1, 2022 at 3:47 am #2137640

You're welcome

This archived topic is closed to new replies.

Start building better websites today.