Image Prioritizer fails to preload LCP images for picture elements #1312
Labels
[Plugin] Image Prioritizer
Issues for the Image Prioritizer plugin (dependent on Optimization Detective)
[Plugin] Modern Image Formats
Issues for the Modern Image Formats plugin (formerly WebP Uploads)
[Plugin] Optimization Detective
Issues for the Optimization Detective plugin
[Type] Bug
An existing feature is broken
Milestone
The Image Prioritizer plugin adds a preload
link
tag withfetchpriority=high
for the URL contained in thesrc
attribute of theimg
. When the Modern Image Formats plugin is active and the "Use<picture>
element" option is enabled, then theimg
is wrapped inpicture
with othersource
elements for WebP and AVIF image formats. Because of this, the preload link will usually be wrong because the actual URL being used for the LCP image will be the WebP or AVIF image, not the JPEG fallback.For example, a page containing this LCP element:
Is getting this preload link:
In this specific example, the LCP element is the same across all breakpoints, so the
fetchpriority=high
on theimg
itself is sufficient and the preload link is not required. Nevertheless, if the LCP element is not the same across all breakpoints, thefetchpriority=high
attribute cannot be added to theimg
or else it will get loaded with high priority for some breakpoints for which it is not the LCP image. This basically uncovers a performance problem with using<picture>
as it cannot be reliably loaded with high priority to improve LCP. This is essentially a known issue per GoogleChrome/web.dev#6150.For Image Prioritizer, the preload link needs to be omitted when the related LCP element is a
picture
element. It can still addfetchpriority=high
to theimg
as it does now when all breakpoints share it as the LCP element.Cheers to @aaemnnosttv for talking this through with me at WCEU.
The text was updated successfully, but these errors were encountered: