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

w3c / largest-contentful-paint

Specification for the LargestContentfulPaint API

https://w3c.github.io/largest-contentful-paint/

Other

88 stars 16 forks source link

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

Open yoavweiss opened 1 year ago

yoavweiss commented 1 year ago

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 commented 1 year ago

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

ksylor commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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 commented 1 year ago

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 commented 6 months ago

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

yoavweiss commented 6 months ago

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

Coiven commented 5 months ago

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