[Support request] I Have a High Cumulative Layout Shift, What’s the Solution

[Shane]

Hi David, switched from online to slow 3G leave the dev tools open and refreshed the page, however, when I reopen the site and go back into the dev tools it still shows as online.
Thanks Shane.

[David]

You have to keep the Dev tools open and refresh the page to see it in a Slow 3G.

[Shane]

Hi there, Im not sure what is happening but each new visit to dev tools still shows the connection as online even after I do as you say.

[Shane]

Hi there, I’m not sure what is happening but each new visit to dev tools still shows the connection as online even after I do as you say.

[Shane]

Hi Support, still working through the issues associated with my initial question to you and I am not sure if this comes under the same ticket but things are now much improved with your help.
An issue now seems to be LCP, GT Metrix shows a result of 1.6 while 1.2 is recommended. Google insights show a result of 3.3

My google search console core web vitals still shows poor URL’s

Thanks Shane.

[David]

Tricky one this – the element being measured for LCP is the featured image of the first post. As they are being served over a CDN ( and i assume lazy loading ) that image is loaded after the rest of the content as loaded.

Not sure about this but i made this function that adds a class of first-feaured-image to that posts image.

add_filter( 'generate_featured_image_output', 'db_first_featured_image_class');

function db_first_featured_image_class($html) {
    global $wp_query;
    if ( !is_single() && 0 == $wp_query->current_post ) {
        $html = sprintf(
            '<div class="post-image">
                %3$s
                <a href="%1$s">
                    %2$s
                </a>
            </div>',
            esc_url( get_permalink() ),
            get_the_post_thumbnail(
                get_the_ID(),
                apply_filters( 'generate_page_header_default_size', 'full' ),
                array(
                    'class' => 'first-feaured-image',
                )
            ),
            apply_filters( 'generate_inside_featured_image_output', '' )
        );
    }
    return $html;
}

I believe smush has the option to exclude images from lazy loading using a CSS Class, which you can set to first-feaured-image.

However, i would recommend you test this on a staging server before applying it to your live site.

[Shane]

Hi David, I have turned of WordPress default lazy loading, and I have disabled the Logo from lazyloading on Smush CDN. Yes, Smush does have the option to exclude images from lazy loading.
I will look at this now, thank you.

[David]

You’re welcome

[Theodore]

How do I effect this to fix a similar Cumulative Layout Shift (CLS) on my site? This seems to be the most annoying problem.

[Elvin]

Hi Theodore,

The cause of CLS is different for every site in general as every site’s content will vary and differ from the other.

I see that you’ve opened a topic for this already. Please see my reply on it. Thank you. 🙂

[Theodore]

Thank you. I have replied to the thread I opened.

[Elvin]

Thanks. Let’s keep the discussion there so this topic opened by Shane doesn’t get derailed or convoluted. 😀

[Author]

Posts