[Support request] Site Grid Container – Biggest CLS Contributer

Hi there,

For starters, try adding image height and width to your logo img element to address the CLS from the logo.

Here’s the PHP snippet for that on desktop:

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="192" height="60" 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 ) )
	);
}

and here’s the PHP snippet for that on mobile:

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="192" height="60" 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' ) ) )
    );
} );

We then try to address the CLS from the fonts (FOUT).

For the Google fonts, try adding this PHP snippet:

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

As for the GeneratePress font icons, go to Appearance > Customize > General and set the icon type to “SVG” as shown here: https://share.getcloudapp.com/04uAJZBb

As for LSI plugin font icons, please check my answer here: https://generatepress.com/forums/topic/fontello-failed/#post-1717251

As for Elementor font icons, I’m not exactly sure what’s the best practice for that. You’ll have to ask Elementor support for their recommendation.

Do I need to change anything on the code snippets or just copy and paste? Also, I will be using ‘Code Snippets’ plugin to add PHP. Can I add all the code snippets in one or do I need to create separate ones for every code snippet you provided?

Make sure to set the snippet to “Run Snippet everywhere” as shown here:
https://share.getcloudapp.com/d5u1RG59

While all these can run on 1 snippet, I suggest placing them on their own snippet entries separately so you can label each of them. This is quite helpful when debugging as well because we can disable them one by one when they’re separated. 🙂