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

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

Home Forums Support CLS issues (CLS issue: more than 0.25)

Viewing 15 posts - 1 through 15 (of 25 total)
  • Author
    Posts
  • #2355980
    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…

    #2356668
    Ying
    Staff
    Customer Support

    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;
    }
    #2357159
    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?

    #2357286
    Ravi Saive

    Hi Ying,

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

    #2357941
    Ying
    Staff
    Customer Support

    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.

    #2358361
    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?

    #2359145
    Ying
    Staff
    Customer Support

    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!

    #2359460
    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.

    #2359956
    Ying
    Staff
    Customer Support

    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

    #2360216
    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…

    #2360760
    Ying
    Staff
    Customer Support

    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.

    #2361126
    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…

    #2361773
    Ying
    Staff
    Customer Support

    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.

    #2362190
    Ravi Saive

    Thank you so much Ying, everything is fixed now…

    #2363001
    Ying
    Staff
    Customer Support

    You are welcome! Glad to hear that 🙂

Viewing 15 posts - 1 through 15 (of 25 total)
  • You must be logged in to reply to this topic.