LCP discrepancies (potentially affecting millions of sites)

256 views
Skip to first unread message

Ivailo Hristov

unread,
Aug 31, 2021, 11:44:18 AM8/31/21
to web-vitals-feedback

Hi all,

A Twitter thread (https://twitter.com/geekybiz/status/1429746730258427911/) recently pointed out an issue with measuring LCP which got our company curious, so we dug into it and we found that measuring LCP appears to be unreliable in some image lazy loading scenarios.

The author of the thread created a very basic image lazy loading simulation which however causes LCP to be measured incorrectly. Because the demo pages of the author are no-longer accessible, we created a replica, showcasing the issue. You can find it here - https://highperformanceweb.com/img_test.html

The case here is that the image element has an empty inlined image as a placeholder at the beginning. In this case LCP is measured as soon as loading the empty image completes.

We tested this in multiple browser versions and this behavior appears to have been added in Chrome 88, while older versions detect LCP more accurately. Potentially related changelog - https://github.com/chromium/chromium/blob/master/docs/speed/metrics_changelog/lcp.md

Here is a screenshot from an older version of Chrome where LCP appears to be measured correctly

LCP_correct.png

And here is the same page evaluated with the latest version of Chrome (currently 92)

LCP_incorrect.png


We also tested some of the top plugins for site speed optimization in WordPress and they all use this method for image lazy loading meaning that millions of sites are potentially affected by this and report incorrect values for LCP in CRUX.

Affected plugins:

  • WP Rocket - 1.8M+ sites
  • LiteSpeed Cache - 2M+ sites
  • Autoptimize - 1M+ sites
  • NitroPack - 80K+ sites

*Other plugins might be affected as well, but these are the ones we tested.

Is this an intended behavior or an issue that needs to be resolved?

Regards,
Ivailo

Ian Clelland

unread,
Oct 27, 2021, 3:31:36 PM10/27/21
to web-vitals-feedback
Hi Ivalio,

This is definitely an issue with the metric definition, and one that our team considers to be a bug in the metric. There are a few open issues on GitHub around transparent SVGs and other invisible images that we're looking to address. This one might be slightly different, so feel free to open a new issue at https://github.com/WICG/largest-contentful-paint/issues/. It's representative of a class of hacks that try to improve LCP by painting something large-but-not-actually-contentful first. We're exploring ways to properly reject these sorts of LCP candidates, and will likely be tweaking the metric to handle this better in the future.

Thanks,
Ian Clelland
Chrome Speed Metrics

Reply all
Reply to author
Forward
0 new messages