search

w3c / largest-contentful-paint

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

How to handle ties? #69

Closed jonsneyers closed 1 year ago

jonsneyers commented 3 years ago

There can be multiple elements above the fold that happen to be the largest one. For example, in an e-commerce product gallery, or e.g. the YouTube home page, there are multiple elements that all have exactly the same size. Which one is the LCP? The first one to load? The last one?

The LCP can change as the page loads, in case a new element loads that is larger than the previous LCP-candidate. How ties are handled will depend on if 'larger' is to be interpreted as '>' or as '≥'. If it's '>', then the first-ready of these same-sized elements will be the LCP, if its '≥' then the last one will count.

Another option could be to resolve ties by taking the average of all the same-sized LCPs.

A potential source of cheating could be that on pages like these, you would make one element one pixel larger than the others, e.g. the one that is expected to load first. Then that one becomes the LCP and the others no longer matter. A potential counter-measure could be to relax the criterion for "ties" from new_lcp_area > current_lcp_area or new_lcp_area >= current_lcp_area to new_lcp_area > 0.99 * current_lcp_area...

npm1 commented 3 years ago

Currently ties are handled using '>'. I think in the case of ties it's OK to use the faster-loading one, as the API is based on size-based heuristic so it wouldn't know which is the more important one (average would work too, it just adds a lot of complexity to the question "what is my LCP?").

clelland commented 1 year ago

I agree that picking the faster element is an acceptable tradeoff here; LCP should ideally be a single element, and if there are a number of equally-important images on the page, then selecting the first one available as LCP seems reasonable.

The text in step 17 of Potentially add LargestContentfulPaint entry makes this clear:

If size is less than or equal to document’s largest contentful paint size, return.