- This topic has 12 replies, 3 voices, and was last updated 1 day, 11 hours ago by
Leo.
-
AuthorPosts
-
October 16, 2020 at 9:19 am #1492241
Bernhard
Hello,
is it possible to exclude the featured images from lazy loading?
WP Fastest Cache has an attribute
data-skip-lazy="1"
and give a sample
<img src="sample.jpg" data-skip-lazy="1" alt="" width="100" width="100" />
but I don’t know how to address the featured images.October 16, 2020 at 9:29 am #1492249Leo
StaffCustomer SupportHi there,
Are you referring to the featured images on the blog page or single posts?
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 16, 2020 at 10:05 am #1492322Bernhard
Hi Leo,
single posts and pages.October 16, 2020 at 10:53 am #1492395Leo
StaffCustomer SupportCan you give this a shot?
add_filter( 'wp_get_attachment_image_attributes', function( $attrs ) { if ( is_single() || is_page() ) { $attrs['data-skip-lazy'] = '1'; } return $attrs; } );
Adding PHP: https://docs.generatepress.com/article/adding-php/
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 16, 2020 at 1:50 pm #1492534Bernhard
Hi Leo,
I inserted the code and it seems to work. Page Speed Inside gives me now CLS=0.
Can you please verify from your side if it is ok.
Thank you.October 16, 2020 at 3:10 pm #1492594Leo
StaffCustomer SupportDon’t think you’ve provided the site link but I assume it’s all good π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 16, 2020 at 4:31 pm #1492639Bernhard
Oh sorry, the site is https://www.tourist-in-rom.com/en/ , thank you π .
October 17, 2020 at 8:04 am #1493333Bernhard
Looking into the waterfall, the featured images on posts are immediately loaded but on pages are after the blank.gif
Post: https://test.tourist-in-rom.com/en/rome-december/
Page: https://test.tourist-in-rom.com/en/October 17, 2020 at 9:29 am #1493406Leo
StaffCustomer SupportNot sure if I fully understand,
This page doesn’t have a featured image.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 17, 2020 at 10:14 am #1493452Bernhard
You’re right, sorry. The featured image is defined as background image of the page hero.
https://test.tourist-in-rom.com/wp-content/uploads/2020/06/Tourist-in-Rom-Piazza-del-Popolo-100518.jpgOctober 17, 2020 at 2:51 pm #1493661Leo
StaffCustomer SupportSo we are all good now?
I don’t believe you can add a data attribute to background images.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/March 3, 2021 at 11:30 am #1680834acela
@Leo β thanks for this snippet!
The only place on my site that Featured Images (post thumbnails) are displayed is on archive and index (home) pages… So, I tweaked the snippet a bit to force loading only on the first Featured Image on the page, but then leave the rest to be lazy loaded:
add_filter( 'wp_get_attachment_image_attributes', function( $attrs ) { global $wp_query; if ( $wp_query->current_post === 0 ) $attrs['data-skip-lazy'] = '1'; return $attrs; } );
If you want to disable lazy loading on more than just the first one, then you could just change the conditional in the snippet (e.g.,
< 3
to load the first three on the page, instead of=== 0
to load only the first).March 3, 2021 at 1:42 pm #1680961Leo
StaffCustomer SupportThanks for sharing!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.