How to reduce CLS Issue for Logo and PageHero

Hi there,

try adding this PHP Snippet to your site:

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" width="156" height="55" 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' ) ) )
    );
} );

Added into the child functions.php. Cleared cache and rechecked. I guess the things improved! Can you have a check please.
Also, is there some more scope of improvement as I have a popup that I think interferes with the speed...

Hi there,

You can try excluding the logo and other images above the fold from being lazyloaded as well. Lazyloaded images that are within the viewport when the page loads are known to cause CLS.

As for the popup, it's quite tricky to improve as the popup contains an iframe which has its own set of CSS and scripts embedded within it. We can't control how that one behaves.

How can I exclude the Logo from being lazy loaded in the mobile site? The plugin author says to add class="skip-lazy" to the mobile logo. How to add the class to mobile logo?

By using a PHP snippet like this -
https://docs.generatepress.com/article/generate_mobile_header_logo_output/#avoid-lazy-loading

Except instead of adding data-no-lazy="1", add class="skip-lazy" to the img tag.