Plugin images/screenshots should be lazy-loaded

[jonoaldersonwp]

Plugin images/screenshots (those in the 'Screenshots' section on pages like ​https://wordpress.org/plugins/google-language-translator/) load slowly and inefficiently (and often unnecessarily), causing delays in page loads and speeds.

To combat this, a loading="lazy" attribute should be added to the respective <img> tags.

[dd32]

5190.diff​ is where I got here, for some reason I can't get React to actually render the loading="lazy" attribute.

[dd32]

Replying to dd32:

5190.diff​ is where I got here, for some reason I can't get React to actually render the loading="lazy" attribute.

Turns out React doesn't support custom HTML attributes until React 16, so in order to add that we'll need to upgrade first - which is likely to raise deprecation warnings from other relied upon components.

[jonoaldersonwp]

Ouch. Want a separate ticket for that?

[smit08]

Hi @dd32

Yes, you are right we can't add a direct lazy loading attribute in img tag. But can we use this library (URL: ​https://www.npmjs.com/package/react-lazy-load-image-component) for the lazy loading? I think this will work.

[rafiahmedd]

I think we can create a js module for this. Adding a new library for this isn't a proper solution I guess. And I think now we can use the loading="lazy".

Replying to smit08:

Hi @dd32

Yes, you are right we can't add a direct lazy loading attribute in img tag. But can we use this library (URL: ​https://www.npmjs.com/package/react-lazy-load-image-component) for the lazy loading? I think this will work.

[jonoaldersonwp]

Any updates on this?

Also noticing that the thumbnails are in fact loading the full size image; wonder if we might be able to switch out the src for an appropriately (re)sized version (via the CDN resizing functionality)?

[dd32]

If anyone^[1] wishes to upgrade ​https://github.com/WordPress/wordpress.org/tree/trunk/wordpress.org/public_html/wp-content/themes/pub/wporg-plugins/client/screenshots to support a more modern React that supports lazy loading, we can look at it.

Unfortunately there's an entire plugin-directory interface written in react there that we don't use, so it probably would require removing a lot of dead code as part of getting it upgraded.

[1]: I don't know of any current contributors who have the available bandwidth at present.

[thilinah]

In 14950:

Plugin Directory: server-render screenshots gallery + Gallery Lightbox Enhancements polyfill

Props alexodiy, thilinah, dd32, bor0.
Closes ​https://github.com/WordPress/wordpress.org/pull/622.
Fixes #2273, #8083, #8204, #5190, #7878.

[jonoaldersonwp]

It seems that images are now set to loading="eager", which is very much the opposite of the desired behaviour.

These are outside of the initial viewport, and should thus set loading="lazy" (and shouldn't set a fetchpriority).

[tusharaddweb]

Tested on Google Language Translator plugin

Inspected HTML of screenshot images:

Found:
loading="eager"
fetchpriority="high"

Issue:
Should be loading="lazy" not loading="eager"

Result:
Images load immediately on page load NOT lazy loading on scroll Performance NOT improved Opposite of what ticket requests

Lazy loading not working.

Status: Still broken. Reopened correctly.