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

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Debasis]

Ok, I disable the WP Rocket plugin.

[David]

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 );

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Debasis]

Thanks, I also disable it.

[Debasis]

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

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Debasis]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Debasis]

I tried but still, I get the same speed…

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts