Chrome is making a change on how Largest Contentful Paint (LCP) core web vital (CWV) is being calculated in order to avoid abuse. The abuse is that people cheat by putting a fake "hero" image (imagine a stretched out 1x1 transparent gif) and have this counted as a sooner LCP event.
Chrome is fighting this by checking how much data is found in each pixel, a.k.a. image entropy, a.k.a. bits per pixel (BPP). And if the number is lower than 0.05, this image is not considered LCP worthy.
How can you tell your BPP/Enthropy
Option #1: drop your image to Tim's tool to test images from your filesystem
Option #2: use this quick JavaScript snippet in you console to test against a live site
console.table(
[...document.images].map(
img =>
[
img.currentSrc,
performance.getEntriesByName(img.currentSrc)[0]?.encodedBodySize * 8 / (img.width * img.height)
]
)
)
Note: you'll get 0s for third-party images as their sizes are not reported by the performance API
And one more thing
Test the actual LCP change in WebPageTest.org, Annie shows us how.
Here's the important bit for copy-pasting:
--enable-features=ExcludeLowEntropyImagesFromLCP:min_bpp/0.05
Comments? Find me on BlueSky, Mastodon, LinkedIn, Threads, Twitter
