[Support request] How to Fix LOW CLS Score in Google Pagespeed & Webmaster tools

Home Forums Support How to Fix LOW CLS Score in Google Pagespeed & Webmaster tools

  • This topic has 10 replies, 2 voices, and was last updated 2 months ago by David.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1377558
    Debasis

    Lots of my posts and pages are facing Poor CLS Score in Google Pagespeed & Webmaster tools. I don’t have any knowledge to fix this. Please help me.

    #1377572
    David
    Staff
    Customer Support

    Hi there,

    the main issue is the Lazy Loader plugin. Can you temporarily disable it so we can see if that is the only issue.

    #1377584
    Debasis

    Ok, I disable the WP Rocket plugin.

    #1377604
    David
    Staff
    Customer Support

    You also have Jetpack installed which is adding its lazy loader
    And add this PHP to your site:

    // Add skip-lazy class to mobile logo
    add_filter( 'generate_mobile_header_logo_output', function( $output ) {
        if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
            return $output;
        }
      
        $settings = wp_parse_args(
            get_option( 'generate_menu_plus_settings', array() ),
            generate_menu_plus_get_defaults()
        );
      
        return sprintf(
            '<div class="site-logo mobile-header-logo">
                <a href="%1$s" title="%2$s" rel="home">
                    <img src="%3$s" class="skip-lazy" alt="%4$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_mobile_header_logo', $settings['mobile_header_logo'] ) ),
            esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
        );
    } );
      
    // Add skip-lazy class to navigation logo
    add_filter( 'generate_logo_attributes', function( $attr ) {
        $attr['class'] .= ' skip-lazy';
        
        return $attr;
    } );
    
    // Add skip-lazy class to featured image
    
    add_filter( 'wp_get_attachment_image_attributes', function( $attr, $attachment ) {
        if ( $attachment->ID === get_post_thumbnail_id() ) {
            $attr['class'] .= ' skip-lazy';
        }
    
        return $attr;
    }, 10, 2 );
    #1377643
    Debasis

    Thanks, I also disable it.

    #1377681
    Debasis

    Thanks, I added it to functions.php in my child theme.

    #1377700
    David
    Staff
    Customer Support
    #1378303
    Debasis

    but my mobile page speed is going down, Now how i can improve it?

    #1378480
    David
    Staff
    Customer Support

    You can re-enable the WP Rocket for your optimizations.
    That code should eliminate the lazy loading on logos and featured images.

    #1378567
    Debasis

    I tried but still, I get the same speed…

    #1378882
    David
    Staff
    Customer Support

    You’re CLS score has significantly improved from 1.73 to 0.074.
    Mobile speed is 75 with an LCP of 2.2 seconds which is good.

    The last few CLS issues are:

    1. The breadcrumb shadow box styles is applied after initial load. Remove the styling.
    2. Optimize your fonts:
    https://docs.wp-rocket.me/article/1312-optimize-google-fonts

    The fully loaded time or Time to Interactive is very poor.
    Google can only assume your site is fully interactive when all HTML, CSS and scripts are loaded. And your site is requesting a lot of 3rd party Advert Scripts. Those you cannot do anything about aside from reduce the number of them.

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