Cummulative Layout Shift (CLS) on all my posts

Hi there,

try disabling Lazy loader on the Logo, the featured image and your author image.

All of them are Above the Fold on Desktop. And two of them are on Mobile.

Most lazy loaders have an option to exclude images based on CSS Class or filename.

Hi David,

i disabled the lazyload and yes, now the CLS value is at 0,08. But the LCP is now much too high.
But i must admit, that i completey deactivated the lazyload. I will ask the supplier, how the selective deactivate lazy load for special images.

Maybe you have good ideas for LCP, but you have helped me for the asked question.

Thank you,
David

Which lazy loader plugin are you using?

Hi David,

i am using WP Rocket for speeding up my website.
There is a technical way to exclude images from lazyloading.
That is what the docs saying:
************
If you want to disable LazyLoad on a specific image, you can do so by adding either:

the data-skip-lazy attribute
or the skip-lazy class
to the img HTML tag.

***********

How can i do this for the logo and the other images?

David

Lets see if we can fix the logo first - by adding this PHP Snippet to your site:

add_filter( 'generate_logo_attributes', function( $attr ) {
  $attr['class'] .= ' skip-lazy';

  return $attr;
} );

Then we can recheck to see the best option for the Featured Image.

That PHP Snippet worked.
It reduced the CLS from 0,116 to 0,08.

Lets go ahead to featured image.

(Thank you by the way for the good support)

Are you referring to the featured image in archives or in single posts here?

Or both?

Hello Leo,
I guess „for both „ would be the best choice.
David

Let's give this a shot first:

add_filter( 'generate_featured_image_output', function( $output ) {
    return sprintf( // WPCS: XSS ok.
        '<div class="post-image skip-lazy">
	    <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(
	    'itemprop' => 'image',
             )
         )
    );
} );

After implementing the new script the CLS stays at 0,08.

Let's try everything here...
https://generatepress.com/forums/topic/how-to-fix-low-cls-score-in-google-pagespeed-webmaster-tools/#post-1377604

And under LCS the featured image is the longest content with 4seconds. For a 63 kbyte file.

Make sure you try the full code I linked above:
https://generatepress.com/forums/topic/cummulative-layout-shift-cls-on-all-my-posts/#post-1444538

It "should" cover everything.

Hi Leo and David,

it seems that i cannot get the CLS lower than 0,08 but thats okay from me.
I have another issue now with the LCP, but i will open another ticket, to keep the issue seperated.