Hover-based user input is often used for "zoom widgets", skewing LCP results

[yoavweiss]

Many e-commerce sites use hover based zoom widgets (searching for "hover zoom widget" in your favorite search engine will reveal many results).

The desktop LCP scores for such sites can be heavily influenced by this use of zoom widgets, as hover is not a user interaction that stops LCP from being counted. As such, the site loads, users hover over the product image, and a larger image is then loaded, counting as an LCP candidate.

It'd be great to modify LCP to take that into account:

• If a mouseover event is triggered over an LCP candidate, then future loaded resources will be discounted for LCP purposes.
  • It remains to be seen if there are zoom widgets that are triggered by hovering over images that are not an LCP candidate (e.g. thumbnails). If so, we may need to adapt the heuristic.
• Current Chromium implementation is using a timer, but we could also use Task Attribution for better accuracy.

I'm planning to experiment with such heuristics.

[yoavweiss]

A pending CL would enable experimentation with that heuristic with the --enable-features=LCPMouseoverHeuristics Chrome CLI flag.

[ksylor]

There's also a possibility of loading and/or autoplaying a video on hover.

We're currently running this as an experiment on our search results page - the placement of the current implementation is not one that would be the LCP element, but as an example of the behavior since I've seen autoplay video on hover grow as a pattern on other ecommerce sites.

To see the implementation go to https://www.etsy.com/search?q=Kantha+quilt&features=ranking%2Fsearch.experience.search_lc_video_rerun%3Aon and scroll down to the third row of results

[tunetheweb]

So looking at the Amazon example there two types. Take for example this page

• We have a hover on the main image, which loads a zoom in. That does trigger a new LCP image. And I agree it shouldn't as it's a user action.
• There is another hover on the left images, which replaces the LCP image with the new image. Luckily this replaces the current LCP image (or maybe replaces it with one the exact same size - I've not looked too closely), so does NOT trigger a new LCP image. However would that always the case? Because if not, it wouldn't be captured by current heuristic. Maybe "replacing the current LCP element image size" should be added to heuristic? I dunno if that's a likely case, but thought I'd mention just in case.

[siakaramalegos]

Dropping some example links in case they are helpful:

• Example of changing the LCP image based on thumbnail hover https://www.homedepot.com/p/RYOBI-ONE-18V-Cordless-High-Pressure-Inflator-with-Digital-Gauge-Tool-Only-P737D/307627867
• Hover creates a new item that might replace LCP https://www.amazon.com/Anker-Ultra-Compact-High-Speed-VoltageBoost-Technology/dp/B07QXV6N1B/?_encoding=UTF8&pd_rd_w=4RInj&content-id=amzn1.sym.64be5821-f651-4b0b-8dd3-4f9b884f10e5&pf_rd_p=64be5821-f651-4b0b-8dd3-4f9b884f10e5&pf_rd_r=M3NBYN0KZRPJR1BYGTCF&pd_rd_wg=5pPNA&pd_rd_r=0f13d08e-a23b-4807-bbc8-6db9f9d7c255&ref_=pd_gw_crs_zg_bs_2335752011
• Don't have a handy one for zoom on hover yet. Most are on click only. Will come back here and add it when I find one.

[rockeynebhwani]

@siakaramalegos - Here is example for zoom on hover on desktop - https://direct.asda.com/george/women/nightwear-slippers/grey-spot-print-pyjama-bottoms/GEM971664,default,pd.html. In this example zoom image becomes LCP on hover.

[gilbertococchi]

I cannot reproduce the LCP new entry issues on direct.asda.com nor on homedepot.com. For what it concerns amazon.com we've already verified that the change behind the flag would fix that case.

Thanks!

[pablomercadolibre]

I'd like to share another example of thumbnails that trigger LCP https://www.mercadolibre.com.uy/apple-iphone-12-64-gb-productred/p/MLU16163651, in our case hover in the thumbnail replaces the main image which trigger a new LCP image and hovering the replaced main image also trigger a new LCP.

[Santas]

https://finviz.com - hovering over tickers which show a chart preview triggers LCP

[yoavweiss]

^^ @clelland - any updates on efforts on that front?

[Coiven]

--enable-features=LCPMouseoverHeuristics flag doesn't work for me, is it expired?

[krzksz]

Hi, just wanted to share another situation where this issue often appears – megamenus.

I described everything in this Chrome bug, but the gist of it is that ecommerce menu drawers often contain images that can hijack the LCP from the main content.

I tried testing my example with the --enable-features=LCPMouseoverHeuristics flag but a new entry is still reported.