I Have a High Cumulative Layout Shift, What's the Solution

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.

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

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.

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.

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.

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.

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.

You're welcome

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

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. :)

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

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