[Resolved] CLS issues (CLS issue: more than 0.25)

[Ravi Saive]

I am getting a “CLS issue: more than 0.25 (desktop)” error on Google Search Console for 2653 URLs for my website, due to this the traffic has dropped after the last Google algorithm update…

Also, I am getting “Content wider than screen” for mobile for 320 Urls on Google Search Console…

[Ying]

Hi Ravi,

Can you try adding this CSS:

@media (min-width: 1400px) {
nav#secondary-navigation, nav#site-navigation {
    max-height: 60px;
}
header#masthead {
    min-height: 186px;
}
}
body {
    overflow-x:hidden;
}

[Ravi Saive]

Hi Ying,

What does this CSS code do? could you explain? will it fix the “CLS issue: more than 0.25 (desktop)” and “Content wider than screen” errors?

[Ravi Saive]

Hi Ying,

I have added the provided CSS code, but still, I am seeing a high CLS score on all pages…

[Ying]

The CSS is to reserve space for the header/secondary navigation, and stop the horizontal scroll on mobile.

I just run a lighthouse test for a link, the CLS gets a better score after adding the CSS:
https://www.screencast.com/t/zsRcgY8hmB

Can you try adding width and height to this image? Try 340px for width and 77px for height.
https://www.screencast.com/t/nvKQaVTIx

And your site logo doesn’t have width/height as well, can you go to customizer > site identity, remove the current logo, save, clear cache, then add the logo back, adjust its width use the slider, save, clear cache.

Let me know once it’s done, I can check back to see if the width/height has been added.

[Ravi Saive]

Hi Ying,

Yes, it seems the CLS is fixed, but in Google Search Console it is still showing 2.7k URLs affected…

I have set the width and height to this image – https://www.screencast.com/t/nvKQaVTIx

Also, I have set the width 300px to the logo in the customizer –> site identity as you suggested.

Could you please check and let me know what other things are needed to fix the mobile usability issue?

[Ying]

1. The logo width/height is still not added to its HTML. Can you try adding this PHP snippet?

add_filter( 'generate_logo_output','tu_logo_atts', 10, 2 ); 
function tu_logo_atts( $output, $logo ) {
	printf(
		'<div class="site-logo">
			<a href="%1$s" title="%2$s" rel="home">
				<img width="300" height="100" class="header-image" src="%3$s" alt="%2$s" title="%2$s" />
			</a>
		</div>',
		esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
		esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
		esc_url( apply_filters( 'generate_logo', $logo ) )
	);
}

Adding PHP: https://docs.generatepress.com/article/adding-php/

2. Can you go to customizer > general > Icon Type, and change the Fonts to SVG? So it will reduce one request before page load.

3. You are using Google fonts, can you go to customizer > typography > font manager, and remove all the variants that you do not use? So the site doesn’t have to load all of them.

Also, I am getting “Content wider than screen” for mobile for 320 Urls on Google Search Console…

This should’ve been fixed by the CSS, is this still the case?

Let me know!

[Ravi Saive]

Hi Ying,

I have added the provided PHP code to the child theme’s functions.php file, could you check and confirm?

I have changed Fonts to SVG in customizer > general > Icon Type.

I can’t find font manager under customizer > typography. I am using GP theme 3.1.3 and GP Premium 2.1.2.

[Ying]

The PHP is working, I can see the width and height attributes being added to the logo.

I think you are still using the old typography system, it can be switched to the dynamic typography system at customizer > general.
https://docs.generatepress.com/article/switching-to-dynamic-typography/

And can you change the CSS I provide here:
https://generatepress.com/forums/topic/cls-issues-cls-issue-more-than-0-25-2/#post-2356668

to:

@media (min-width: 1150px) {
nav#secondary-navigation {
    max-height: 60px;
}
header#masthead {
    min-height: 186px;
}
nav#site-navigation {
    max-height:120px;
    min-height:60px;
}
}
body {
    overflow-x:hidden;
}

I ran a GTmetrix test, it looks like the CLS issue is fixed for now:
https://www.screencast.com/t/dzdqI3ysxx

[Ravi Saive]

Hi Ying,

I have switched to dynamic typography, and I am using only two fonts – see the screenshot here – https://i.postimg.cc/dQd4jV9s/typography.png

Do I need to make any changes in Typography?

I have updated the given CSS, but still, I am seeing the error “Content wider than screen” on 322 URLs…

Let me know what other things are needed to fix this mobile usability issue…

Yes, the CLS issue is fixed…

[Ying]

Do I need to make any changes in Typography?

Yes. In the font manager, if you click on one of the fonts, it will show all the variants (font-weight) the font has, remove the variants that you don’t use, this will reduce the request file size to Google.

I have updated the given CSS, but still, I am seeing the error “Content wider than screen” on 322 URLs…

Google Search Console uses the 28 days data, so even if you’ve fixed an issue, it takes time for Google to re-evaluate.

The below content is provided by Google:
When you've fixed a specific issue in all of your URLs, you can confirm whether you fixed the issue for all URLs. Click Start Tracking to start a 28-day monitoring session to check for instances of this issue in your site. If this issue is not present in any URLs on your site during the 28-day window, the issue is considered fixed. The presence of that issue in any URL is enough to mark the issue as not fixed; however the status of individual URLs continue to be evaluated for the entire 28 days, regardless of issue status.

[Ravi Saive]

Hi Ying,

I can’t find any variants, see the screenshot – https://i.postimg.cc/j532TqtD/Screenshot-2022-10-03-12-34-20.png

Now only 3 URLs are giving the error, the rest seems to be fixed…

Yes, it takes 28 days for google to validate all URLs…

[Ying]

In the font manager, if you click on one of the fonts, it will show all the variants (font-weight) the font has, remove the variants that you don’t use, this will reduce the request file size to Google.

I checked the 3 URLs, but don’t see the issue.

[Ravi Saive]

Thank you so much Ying, everything is fixed now…

[Ying]

You are welcome! Glad to hear that 🙂

[Author]

Posts