w3c / largest-contentful-paint

Specification for the LargestContentfulPaint API
https://w3c.github.io/largest-contentful-paint/
Other
88 stars 16 forks source link

Elements using CSS image-set() for background should be considered LCP candidates #116

Open ryantownsend opened 1 year ago

ryantownsend commented 1 year ago

As per web.dev, elements with background images are considered LCP candidates, but only when using url():

An element with a background image loaded via the [url()](https://developer.mozilla.org/docs/Web/CSS/url()) function (as opposed to a CSS gradient)

However, we now have image-set() and the upcoming image() (hat-tip @schepp) which are alternative methods of loading background images with additional functionality (e.g. content-type selection), so the LCP spec should be updated to consider these as valid candidates also.

I have two test pages to demonstrate the behaviour by simply swapping url() for image-set() in the CSS:

Update: I've logged a parallel Chromium bug to address the implementation

clelland commented 1 year ago

I think that WICG/element-timing might be the place to fix this, since LCP (mostly) builds on top of that spec, and an image with elementtiming set which happens to use this directive should report the correct timing info there as well.

yoavweiss commented 1 year ago

I think that WICG/element-timing might be the place to fix this, since LCP (mostly) builds on top of that spec, and an image with elementtiming set which happens to use this directive should report the correct timing info there as well.

We need to merge the two specs, tbh.. We'll discuss that at TPAC.