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

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

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

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1361638
    ustar

    Hi, GP team!

    I have noticed that my site has problem “CLS issue: more than 0.25 (mobile)” in GSC.
    All of product pages only.

    GSC snapshot

    All Typography settings are in “System Stack” Font family already long time.
    What else i can do to fix this issue?
    Thanks in advance!

    Regards, Sergey.

    #1361686
    ustar

    … and can it be due the logo size in the Customizing/Layout/Header/Logo?
    I have now 125×125 pixels.
    What size of this logo do you recommend to use?

    Thanks. Sergey.

    #1361688
    David
    Staff
    Customer Support

    Hi there,

    its most likely the lazy loader. Can you exclude the logo images from the lazyloader ?

    #1361695
    ustar

    I put image link
    https://u-star.cz/favicon_u-star_eshop_black_circle-2/
    to the Lazy-load exclusions in the Autoptimize Settings.
    Did i all correct?
    How to check that it will help?

    #1361705
    David
    Staff
    Customer Support

    Can you disable the lazy load option in Autoptimize. Then let me know

    #1361722
    ustar

    Done.

    #1361735
    David
    Staff
    Customer Support

    Ok so that proves the logo lazy load is a problem.
    Add 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" class="no-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' ) ) )
        );
    } );

    Then in Autoptimize you can add the no-lazy class to exclude the logo.

    #1361752
    ustar

    I added the code to the functions.php of the child theme and added no-lazy to the Lazy-load exclusions in the Autoptimize Settings. Am i correct?

    #1361760
    David
    Staff
    Customer Support

    Yes, thats correct. And that code is working. And your CLS is scores is reporting 0

    #1380180
    ustar

    Thank you very much, David!

    Cool!
    But after that images on pages with products listing are not showing.
    I could give you a permition to the admin section if you need to check.

    Regards, Sergey.

    #1380197
    ustar

    * on mobile devices only. Sorry, i forgot to write this.

    #1380220
    ustar

    I removed no-lazy from Autoptimize, saved settings, added again and saved again.
    Please, check from your side, is it ok now or not.

    Thanks.

    Sergey.

    #1380374
    David
    Staff
    Customer Support

    Logo and images are all working for me 🙂

    #1402283
    ustar

    Thanks, David!

    #1402432
    David
    Staff
    Customer Support

    You’re welcome

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