CLS issue still after setting dimensions on site logo

Oops I think I had div padding included in the image dimensions for the images that I specified in the functions.php. I corrected that and I think it has improved the CLS now. :)

Oops again. Noticed one more place where the site logo is NOT having a width and height set and contributing to CLS: sticky-navigation-logo

Is there another add_filter that I can use to explicitly set that one too?

Hi there,

Looks like your sticky navigation logo is the exactly the same as the static logo so you shouldn't have to upload one there.

Can you remove it first and see if that works?

Let me know :)

Tried that...as soon as I removed it, it slid the logo all the way over to the right side of the page
and distorted the image too (see in private info)

In case its useful/related, I have this css set related to my navigation branding img in my child style.css file

.navigation-branding img {
padding: 8px 0 7px 0 !important;
}
.mobile-header-navigation .site-logo {
margin-left: 2px !important;
}
.site-logo.mobile-header-logo img {
padding: 8px 0 7px 0 !important;
}
.gp-icon+.off-canvas-toggle-label {
padding-left: 2px !important;
}

Hi there,

Dimensions have been added to all logos in GPP 2.0, which is currently a release candidate: https://generatepress.com/introducing-the-gp-theme-builder/

However, the screenshot you shared definitely isn't the norm. Does it still appear that way without your custom CSS?

I also have the following custom CSS:
body .offside--right.is-open, body .offside-js--is-right .offside-sliding-element {
-webkit-transform: translate3d(-370px, 0, 0);
-moz-transform: translate3d(-370px, 0, 0);
-ms-transform: translate3d(-370px, 0, 0);
-o-transform: translate3d(-370px, 0, 0);
transform: translate3d(-370px, 0, 0);
}
body .main-navigation.offside {
width: 370px;
}
body .offside--right {
right: -370px;
}
.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
right: 370px !important;
}
.nav-below-header .main-navigation .inside-navigation.grid-container, .nav-above-header .main-navigation .inside-navigation.grid-container {
padding: 0;
}
.main-navigation.offside {
text-align: center;
padding-top: 40px;
}
.slideout-overlay {
background-color: rgba(255, 255, 255, 0.75);
}
.menu-bar-item.slideout-toggle .gp-icon.pro-menu-bars {
display: none !important
}
@media screen and (max-width:768px) {
.menu-bar-item.slideout-toggle{display: unset !important}
}
@media screen and (max-width:1325px) {
#primary-menu {order: 1 !important;}
}

Note especially this:

@media screen and (max-width:1325px) {
#primary-menu {order: 1 !important;}
}

Which I had to add because otherwise the "Sign In or Join" button in the upper right would fall BELOW the main navigation menus, which looked awkward.
I'd rather not have that "hack" though...I'd rather find a "right" way to have the "Sign In or Join" button (which triggers the off-canvas slideout menu) ALWAYS be in the upper right. Is there a better way?

(see image in private info)

If I understand correctly, I'll be able to remove all the width- and height-setting code on the logos from the child functions.php one I'm using GPP 2.0, correct?

That's not causing your CLS issues.

If you expand the area about Layout Shifts, you'll see the majority of your CLS is coming from your ads: https://www.screencast.com/t/B876riJBc

Yes, all GP logos have width and height attributes in GPP 2.0.

Actually, I'm seeing CLS from sticky navigation (see screenshot in private details)

Thought I'd share in case anyone else did not know this: One thing I didn't realize is that CLS is the one Core Web Vital where the Field Data (but not the lab data) is measured over ENTIRE PAGE LIFECYCLE (unfortunately!), which explains why Field CLS scores can often be much worse than lab scores. Google discussing here: https://youtu.be/t8YBZLjL-KU?t=1258
And a stack overflow on how to measure some of this here: https://youtu.be/t8YBZLjL-KU?t=1258

Any thoughts on how to improve the issue with stick nav?

Oops...stack overflow link was wrong. Here it is: https://stackoverflow.com/questions/66691747/cls-issue-only-as-a-part-of-field-data-how-to-diagnose-it/66692021#66692021

We're actually in the process of completely rewriting the sticky navigation feature so it no longer uses scroll events and jQuery. We'll be sure it satisfies Core Web Vitals as well :)

Hi Tom,
I updated to GPP 2.0 . You had mentioned above "Yes, all GP logos have width and height attributes in GPP 2.0"

I removed the custom functions that added height and width from my child functions.php, I cleared all my caches and regenerated my CSS file etc, but not height or width attributes appear on the logo now.

Is there something I need to configure so that my logos will have their height and width set?
Thanks!

Hi there,

check that the Customizer > General -> Structure is set to Flexbox.
Then remove and re-add your logos - which should force the HTML to be regenerated.

Thanks David,
I tried that. Confirmed flexbox. Removed logo then published, then added logo and published again. Cleared all caches etc.

Just to make sure I understand how this is being done: Should the height= and width= attributes be showing on the img element, or is height and width set via a .css class or something?

They should display as attributes in the HTML eg. <img .... width="200" height="60">