- This topic has 15 replies, 3 voices, and was last updated 3 years, 6 months ago by Leo.
-
AuthorPosts
-
September 14, 2020 at 7:45 am #1442588David
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,
DavidSeptember 14, 2020 at 8:33 am #1442777DavidStaffCustomer SupportHi 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.
September 14, 2020 at 11:05 am #1443001DavidHi 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,
DavidSeptember 14, 2020 at 11:29 am #1443030DavidStaffCustomer SupportWhich lazy loader plugin are you using?
September 15, 2020 at 3:16 am #1443798DavidHi 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
September 15, 2020 at 6:40 am #1444038DavidStaffCustomer SupportLets 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.
September 15, 2020 at 7:17 am #1444100DavidThat 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)
September 15, 2020 at 9:25 am #1444480LeoStaffCustomer SupportAre you referring to the featured image in archives or in single posts here?
Or both?
September 15, 2020 at 9:33 am #1444491DavidHello Leo,
I guess „for both „ would be the best choice.
DavidSeptember 15, 2020 at 9:39 am #1444499LeoStaffCustomer SupportLet’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', ) ) ); } );
September 15, 2020 at 9:55 am #1444535DavidAfter implementing the new script the CLS stays at 0,08.
September 15, 2020 at 10:00 am #1444538LeoStaffCustomer SupportSeptember 15, 2020 at 10:01 am #1444542DavidAnd under LCS the featured image is the longest content with 4seconds. For a 63 kbyte file.
September 15, 2020 at 10:02 am #1444547LeoStaffCustomer SupportMake sure you try the full code I linked above:
https://generatepress.com/forums/topic/cummulative-layout-shift-cls-on-all-my-posts/#post-1444538It “should” cover everything.
September 16, 2020 at 3:31 am #1445412DavidHi 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. -
AuthorPosts
- You must be logged in to reply to this topic.