Common LCP element IMG not resulting in single preload LINK #1896
Description
Bug Description
In looking at my site, I have tried populating all the URL Metrics for the homepage to the point where a common LCP element was reported for all viewports (via OD Admin UI) (disregard the erroneous phablet label for tablet):
Nevertheless, when I looked at the first post's IMG (the LCP element), I saw unexpectedly that fetchpriority="high" was not added:
<img
data-od-removed-fetchpriority="high"
data-od-replaced-sizes="(max-width: 1200px) 100vw, 1200px"
data-od-xpath="/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[2][self::DIV]/*[1][self::UL]/*[1][self::LI]/*[1][self::DIV]/*[1][self::FIGURE]/*[1][self::A]/*[1][self::IMG]"
width="1200"
height="675"
src="https://weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond-1200x675.png"
class="attachment-post-thumbnail size-post-thumbnail wp-post-image"
alt="Boosting Performance with Optimization Detective"
style="width: 100%; height: 100%; object-fit: cover"
decoding="async"
srcset="
https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=1200%2C675&ssl=1 1200w,
https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=300%2C169&ssl=1 300w,
https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=700%2C394&ssl=1 700w,
https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=768%2C432&ssl=1 768w,
https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=1536%2C864&ssl=1 1536w,
https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=2048%2C1152&ssl=1 2048w,
https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=1980%2C1114&ssl=1 1980w,
https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=150%2C84&ssl=1 150w
"
sizes="(width <= 480px) 300px, (480px < width <= 600px) 455px, (600px < width <= 782px) 644px, (782px < width) 645px"
>However, I see that two preload links were added which were identical except for the viewport ranges:
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond-1200x675.png" imagesrcset="https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=1200%2C675&ssl=1 1200w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=300%2C169&ssl=1 300w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=700%2C394&ssl=1 700w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=768%2C432&ssl=1 768w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=1536%2C864&ssl=1 1536w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=2048%2C1152&ssl=1 2048w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=1980%2C1114&ssl=1 1980w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=150%2C84&ssl=1 150w" imagesizes="(width <= 480px) 300px, (480px < width <= 600px) 455px, (600px < width <= 782px) 644px, (782px < width) 645px" media="screen and (width <= 600px)">
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond-1200x675.png" imagesrcset="https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=1200%2C675&ssl=1 1200w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=300%2C169&ssl=1 300w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=700%2C394&ssl=1 700w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=768%2C432&ssl=1 768w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=1536%2C864&ssl=1 1536w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=2048%2C1152&ssl=1 2048w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=1980%2C1114&ssl=1 1980w, https://i0.wp.com/weston.ruter.net/wp-content/uploads/2025/02/weston-ruter-beyond.png?resize=150%2C84&ssl=1 150w" imagesizes="(width <= 480px) 300px, (480px < width <= 600px) 455px, (600px < width <= 782px) 644px, (782px < width) 645px" media="screen and (782px < width)">The two ranges are:
width <= 600px(i.e.max-width: 600px)782px < width(i.e.min-width: 782px)
So there seems to be a missing preload link for the tablet viewport width.
When looking at all of the URL Metrics, they all have /HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[2][self::DIV]/*[1][self::UL]/*[1][self::LI]/*[1][self::DIV]/*[1][self::FIGURE]/*[1][self::A]/*[1][self::IMG] with isLCP: true, except for one:
{
"url": "https://weston.ruter.net/",
"viewport": {
"width": 763,
"height": 662
},
"elements": [
{
"isLCP": true,
"isLCPCandidate": true,
"xpath": "/*[1][self::HTML]/*[2][self::BODY]/*[4][self::MAIN]/*[1][self::ARTICLE]/*[2][self::FIGURE]/*[1][self::DIV]/*[1][self::IMG]",
...This is for the tablet viewport (600px – 782px) and there is one other URL Metric for this viewport:
{
"url": "https://weston.ruter.net/",
"viewport": {
"width": 763,
"height": 1451
},
"elements": [
{
"isLCP": true,
"isLCPCandidate": true,
"xpath": "/HTML/BODY/DIV[@class='wp-site-blocks']/*[2][self::MAIN]/*[2][self::DIV]/*[1][self::UL]/*[1][self::LI]/*[1][self::DIV]/*[1][self::FIGURE]/*[1][self::A]/*[1][self::IMG]",
"intersectionRatio": 1
...This seems to explain why tablet is missing a preload link. Nevertheless, I'm confused why both \OD_URL_Metric_Group_Collection::get_common_lcp_element() and \OD_URL_Metric_Group::get_lcp_element() are returning the same element for all viewport groups, when seemingly \Image_Prioritizer_Img_Tag_Visitor::add_image_preload_link_for_lcp_element_groups() is behaving differently. Maybe it has has to do something with \OD_URL_Metric_Group_Collection::get_groups_by_lcp_element() but this needs further investigation.
Steps to reproduce
- Fully populate the homepage of a site with URL metrics running the Twenty Twenty theme, where there is a post with featured image that is the LCP element.
- Switch the theme to something else (e.g. Twenty Twenty-Five) so the XPath differ.
- Fully populate the URL Metrics for mobile, phablet, and desktop and only one of phablet.
- See unexpected results (hopefully).
Metadata
Metadata
Assignees
Labels
Type
Projects
Status