Making WordPress.org

Opened 4 years ago

Last modified 12 months ago

#5190 new defect (bug)

Plugin images/screenshots should be lazy-loaded

Reported by: jonoaldersonwp's profile jonoaldersonwp Owned by:
Milestone: Priority: high
Component: Plugin Directory Keywords: seo performance
Cc:

Description

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.

Attachments (1)

5190.diff (3.2 KB) - added by dd32 4 years ago.

Download all attachments as: .zip

Change History (10)

#1 @jonoaldersonwp
4 years ago

  • Component changed from General to Plugin Directory

@dd32
4 years ago

#2 follow-up: @dd32
4 years ago

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

#3 in reply to: ↑ 2 @dd32
4 years ago

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.

#4 @jonoaldersonwp
4 years ago

Ouch. Want a separate ticket for that?

#5 @jonoaldersonwp
3 years ago

  • Priority changed from normal to high

#6 follow-up: @smit08
2 years ago

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.

#7 in reply to: ↑ 6 @rafiahmedd
2 years ago

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.

#8 @jonoaldersonwp
12 months ago

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)?

#9 @dd32
12 months ago

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.

Note: See TracTickets for help on using tickets.