Annie Sullivan

I think a lot of people on here follow me because of Core Web Vitals, so I wanted to let people know we're working on clarifying the intent of the Largest Contentful Paint metric (LCP) in https://github.com/w3c/largest-contentful-paint/issues/86

Specifically, we want to clarify that placeholder images are NOT intended to be candidates for LCP, as they're not contentful.

Improve unimportant image heuristic · Issue #86 · w3c/largest-contentful-paint

Currently we use a heuristic to exclude certain images from being considered LCP candidates. For instance, we exclude images that take the full viewport. This heuristic is imperfect as it could exc...

GitHub
Dec 15, 2022 at 8:27pmWeb
Show threadAnnie SullivanDec 15, 2022
Placeholders can provide a quick first paint and reduce layout shift. This is great, but they shouldn't affect Largest Contentful Paint, which aims to measure when the main content is loaded. So we're working on excluding them as candidates for the largest contentful element.
Show threadAnnie SullivanDec 15, 2022

Example filmstrips from WebPageTest:

Left is Chrome stable; you can see a blank white placeholder image highlighted in green is the LCP element.

Right is the same page with a Chrome flag to exclude low content images as LCP candidate; the headline image is the LCP element.

Show threadAnnie SullivanDec 15, 2022

We found that excluding low content images also resulted in other improvements to the accuracy of Largest Contentful Paint.

In the screenshot on the left, there is a background image that's barely visible that ends up being LCP. On the right, the largest contentful image is LCP.

Show threadAnnie SullivanDec 15, 2022

We're looking at excluding images that have an extremely small file size, relative to the number of pixels that are shown to the user. The idea is to measure this in bits per pixel. We're experimenting with values between 0.01 bits per pixel to 0.2, leaning towards the lower end.

If you want to try it out, you can use the Chrome flag like this:

--enable-features=ExcludeLowEntropyImagesFromLCP:min_bpp/0.05

You can adjust min_bpp to different values to understand how it changes the metric.

Show threadAnnie SullivanDec 15, 2022
Or in WebPageTest, here's a screenshot showing how to set a Chrome flag:
Show threadDave Smart Dec 15, 2022
@anniesullie this looks very promising to me, and makes a lot of sense! Also has the benefit of making weird LCP hacks like large transparent images ineffective https://www.webpagetest.org/vitals.php?test=221215_BiDcS2_FQV&run=1
WebPageTest

View this on WebPageTest.org...

WebPageTest