Making WordPress.org

Opened 15 months ago

Last modified 14 months ago

#6617 new enhancement

Replace plugin page banner markup

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

Description (last modified by jonoaldersonwp)

The hero banner image on plugin pages uses suboptimal markup, which has a negative impact on performance and SEO. The following minor changes should significantly benefit end-users.

  • Remove the inline <style> tag (which sets the image as the background of the banner container).
  • Remove all styling applied to .plugin-banner, except for the existing margin attribute(s).
  • Add CSS targeting .plugin-banner img to set object-fit: cover; width: 100%;
  • Add an <img> inside .plugin-banner, using the markup below.

Image markup

<img decoding="async" fetchpriority="high" src="%path-to-image%" width="930" height="304">

When a 1544x500 version is available, add a srcset attribute, to produce a result as follows:

<img decoding="async" fetchpriority="high" srcset="%path-to-2x-image% 2x" src="%path-to-image%" width="930" height="304">

Change History (6)

#1 @jonoaldersonwp
15 months ago

  • Description modified (diff)

#2 @jonoaldersonwp
15 months ago

  • Description modified (diff)

#3 @jonoaldersonwp
15 months ago

  • Description modified (diff)

#4 @dd32
15 months ago

FWIW I think the existing markup choice was due to the previous design where the Plugin Name text was overlaid on the image.

Can you validate the HMTL returned through the API and displayed within the iframe inside WordPress for plugin details too? That still uses the text-overlay design it appears. Ie. wp-admin/plugin-install.php?tab=plugin-information&plugin=wordpress-seo.

#5 @jonoaldersonwp
15 months ago

Ah, interesting!
We can do something similar here, I think, and just move the background into an <img> el in the existing structure.

  • Remove the inline <style> tag (which sets the image as the background of #plugin-information-title.with-banner).
  • Add CSS targeting .vignette > img to set min-width: 100%; object-fit: cover; object-position: top center;.
  • Add an <img> inside .vignette, using the markup below.

Image markup

<img decoding="async" fetchpriority="high" src="%path-to-image%" width="755" height="250">

When a 1544x500 version is available, add a srcset attribute, to produce a result as follows:

<img decoding="async" fetchpriority="high" srcset="%path-to-2x-image% 2x" src="%path-to-image%" width="755" height="250">

This ticket was mentioned in Slack in #meta by tellyworth. View the logs.


14 months ago

Note: See TracTickets for help on using tickets.