Re: LCP determination bug with low-res/hi-res image loads

[Barry Pollard]

This conversation is probably better suited to the web vitals feedback group, as it's more a metric question and not a CrUX issue. Adding that in as a CC.

This is similar to the progressive use case: https://github.com/w3c/largest-contentful-paint/issues/71.

The problem has been that we've been unable to get confirmation as whether these placeholders are actually good UX patterns, and how to decide what is "good enough". While the images in this example both look similarly contentful to my old eyes, doing that programatically is much more difficult.

On Monday, June 10, 2024 at 5:27:14 PM UTC+1 e...@shirim.com wrote:

Hello, 

We've identified situations where a hero image will load initially with a low resolution version well before the hi-res image is loaded and painted.  This is frequently visible in a "data-old-hires" attribute in the paint event.  

In these cases, LCP is determined as being the later, hi-res paint.  In terms of user experience, we think that the low res version should be determined as the LCP paint, and that maybe this can be considered a bug in LCP determination?

For example, looking at this webpage test run:  https://www.webpagetest.org/result/240610_AiDc6G_C65/

You can see these entries in the LargestPaints block:

{

"event": "LargestImagePaint",

"time": 3041,

"size": 79200,

"DOMNodeId": 194,

"nodeInfo": {

"nodeType": "IMG",

"attributes": {

"alt": "Zebra Pen Z-Grip Retractable Ballpoint Pen, Medium Point, 1.0mm, Black Ink, 24 Pack (Packaging may vary)",

"src": "https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX425_.jpg",

"data-old-hires": "https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SL1500_.jpg",

"onload": "markFeatureRenderForImageBlock(); if(this.width\/this.height > 1.0){this.className += ' a-stretch-horizontal'}else{this.className += ' a-stretch-vertical'};this.onload='';setCSMReq('af');if(typeof addlongPoleTag === 'function'){ addlongPoleTag('af','desktop-image-atf-marker');};setCSMReq('cf')",

"data-a-image-name": "landingImage",

"class": "a-dynamic-image a-stretch-vertical",

"id": "landingImage",

"data-a-dynamic-image": "{\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX466_.jpg\":[526,466],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX569_.jpg\":[642,569],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SY355_.jpg\":[355,315],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX425_.jpg\":[480,425],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX522_.jpg\":[589,522],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SY450_.jpg\":[450,399],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX679_.jpg\":[766,679]}",

"style": "max-width: 360.8px; max-height: 410px;"

},

"sourceURL": "https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX425_.jpg",

"bounds": [

86.515625,

219,

360.765625,

410

],

"styles": {

"background-image": "none"

}

}

},

{

"event": "LargestImagePaint",

"time": 7374,

"size": 147600,

"DOMNodeId": 194,

"nodeInfo": {

"nodeType": "IMG",

"attributes": {

"alt": "Zebra Pen Z-Grip Retractable Ballpoint Pen, Medium Point, 1.0mm, Black Ink, 24 Pack (Packaging may vary)",

"src": "https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX425_.jpg",

"data-old-hires": "https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SL1500_.jpg",

"onload": "markFeatureRenderForImageBlock(); if(this.width\/this.height > 1.0){this.className += ' a-stretch-horizontal'}else{this.className += ' a-stretch-vertical'};this.onload='';setCSMReq('af');if(typeof addlongPoleTag === 'function'){ addlongPoleTag('af','desktop-image-atf-marker');};setCSMReq('cf')",

"data-a-image-name": "landingImage",

"class": "a-dynamic-image a-stretch-vertical",

"id": "landingImage",

"data-a-dynamic-image": "{\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX466_.jpg\":[526,466],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX569_.jpg\":[642,569],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SY355_.jpg\":[355,315],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX425_.jpg\":[480,425],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX522_.jpg\":[589,522],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SY450_.jpg\":[450,399],\"https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX679_.jpg\":[766,679]}",

"style": "max-width: 360.8px; max-height: 410px;"

},

"sourceURL": "https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX425_.jpg",

"bounds": [

86.515625,

219,

360.765625,

410

],

"styles": {

"background-image": "none"

}

}

},

"LargestContentfulPaintType": "image",

"LargestContentfulPaintNodeType": "IMG",

"LargestContentfulPaintImageURL": "https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SX425_.jpg",

Perhaps the LCP PaintImageURL should be the low res instead? "https:\/\/m.media-amazon.com\/images\/I\/815utxl-96L._AC_SL1500_.jpg"