[Resolved] Cummulative Layout Shift (CLS) on all my posts

Home Forums Support Cummulative Layout Shift (CLS) on all my posts

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1442588
    David

    Hi,

    the Google Webmaster Console tells me, that all of my posts have a high CLS. It was around 0,3, but i reduced it to 0,12 by disabling some plugins.

    The next blocking elements seems to be the post image. It was reported by lighhouse and when i decrease the speed of my internet to 100kb/s in the chrome developer tools, i really can see the shift, when the image is resized to mobile size.

    The issue only orrurs on mobile devices, desktop has fine metrics.

    What can i do, to fix the cls for resizing the mobile article image.

    This is a good URL to test:
    https://sinnstiften.biz/flipchart-gestalten/

    thank you,
    David

    #1442777
    David
    Staff
    Customer Support

    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.

    #1443001
    David

    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

    #1443030
    David
    Staff
    Customer Support

    Which lazy loader plugin are you using?

    #1443798
    David

    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

    #1444038
    David
    Staff
    Customer Support

    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.

    #1444100
    David

    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)

    #1444480
    Leo
    Staff
    Customer Support

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

    Or both?

    #1444491
    David

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

    #1444499
    Leo
    Staff
    Customer Support

    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',
                 )
             )
        );
    } );
    #1444535
    David

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

    #1444538
    Leo
    Staff
    Customer Support
    #1444542
    David

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

    #1444547
    Leo
    Staff
    Customer Support
    #1445412
    David

    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.

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