Jetpack: Lazy Load: Images not lazy loading within Related Posts

[ntpixels]

Summary
A user reached out after noticing that Jetpack's lazyload classes aren't being applied to their related posts sections. After testing this on our own sites, we are experiencing the same: lazyload is being applied to images in the post body (single images, galleries), but not to related post images.

Steps to Reproduce

1. Enable Jetpack's Lazy Load functionality
2. Enable Jetpack's Related Posts, and related post feature image, functionality
3. Activate a default theme, like Twenty Nineteen
4. Inspect the related post featured images. They are missing the jetpack-lazy-image and jetpack-lazy-image--handled classes.

JP v 7.5.2:

JP v 7.1.1:

Tested with

• All plugins except Jetpack, Akismet, and VaultPress disabled
• Jetpack v 7.1.1 and v 7.5.2
• Default themes: Twenty Nineteen and Seventeen
• Reinstalling and reconnecting Jetpack
• Toggling the relevant Jetpack settings
• Confirmed that there are no console errors
• This works fine with the OceanWP theme, although we suspect that it's using its own Related Posts markup.

[rsamborski]

I am experiencing the same issue.
Additionally the problem appears for lists of posts and main page (which in my case is basically a list of posts) - there is no lazy loading for images besides the ones inside particular post.

Examples:
https://karieranaobcasach.com
https://karieranaobcasach.com/category/project-management/
https://karieranaobcasach.com/2016/04/design-thinking/ ("you might also like" section)

[ADAPTiveBen]

I'm also experiencing this issue where images within the Jetpack related posts module are not being lazy-loaded.

Is there any update to this?

A possible solution would be to lazy load the entire module rather than just the images.

[jeherve]

Is there any update to this?

Not yet, but we'll update this issue once we make progress on this.

[rilwis]

I'm having the same issue with Autoptimize's lazyload. I open a thread on Autoptimize's support forum and after a discussion, I realized that Jetpack uses JS to insert the related posts into the DOM dynamically.

Is there any workaround to make it statically? So Lazyload plugins can filter the output?

[jeherve]

Is there any workaround to make it statically? So Lazyload plugins can filter the output?

Yes, you can use this method to output your own Related Posts, using the index of posts prepared by Jetpack:
https://jetpack.com/support/related-posts/customize-related-posts/#raw

[Squazz]

As this is still open, could we then at lead get loading="lazy" implemented
That way at least all supporting browses would handle this for you. https://caniuse.com/#feat=loading-lazy-attr

I'd guess it should be added around here: https://github.com/Automattic/jetpack/blob/771f691a72715db3e8c5de604d3b94b86cdb3509/modules/related-posts/related-posts.js#L157

[jeherve]

could we then at lead get loading="lazy" implemented

Noting that this feature will be added to WordPress itself in version 5.5:
https://make.wordpress.org/core/2020/02/25/lazy-loading-update/

Jetpack will consequently be updated accordingly.

[stale[bot]]

This issue has been marked as stale. This happened because:

• It has been inactive in the past 6 months.
• It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

[samafroxy22]

Even after WordPress latest update, it is still hard to get lazy load on jetpack related posts images...