search

GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.
https://developer.chrome.com/docs/lighthouse/overview/
Apache License 2.0
28.43k stars 9.39k forks source link

Offscreen image audit incorrectly reporting lazy-loaded images #6677

Closed mdiblasio closed 4 years ago

mdiblasio commented 5 years ago

Provide the steps to reproduce

  1. Run LH on https://oldnavy.gap.com/
  2. View "Defer offscreen images" audit

What is the current behavior?

https://oldnavy.gap.com/ lazy-loads below-the-fold ("BTF") images (example BTF image that is lazy-loaded on homepage).

The following LH reports incorrectly show lazy-loaded images in "defer offscreen images" audit. In addition, the above-the-fold images do not appear to render in timeline:

However, when run in CDT (v.3.0.3) and via WebpageTest (v.4.0.0-alpha.2-3.2.1), this audit passes and ATF images render.

The same audit discrepancy exists for https://pwa.www.1800flowers.com/ when run from web.dev vs. WPT.

I did notice that a change was made to offscreen images audit in v4.0.0-alpha.1.

What is the expected behavior?

Offscreen images audit should pass as BTF images are lazy-loaded.

h3d0 commented 5 years ago

I'd like to confirm the problem.

The report ran for https://alpha.floralle.com.ua/:

Defer offscreen images lists a group of images. However when the same page is inspected using Chrome Dev Tools:

The only images that are loaded, are:

image

The solution uses Intersection Observer and would not show any images until they emerge on the screen.

bkowalk commented 5 years ago

Seeing the same Lighthouse issue on our site, and Pagespeed Insights won't recognize the lazy load as well, since it uses the same library. Definitely concerning since our Google AdWords rep is under the impression that Pagespeed Insights is now a weighted factor in search ranking! Hoping this can be fixed in Lighthouse as well as PI soon...

andreasantonsson commented 5 years ago

I can confirm this as well. I've tried different solutions, both with and without Intersection Observer.

johanlantz commented 5 years ago

I think I am seeing something similar. I have just updated a Prestashop store and the new theme is using lazy loading but lighthouse says to defer images which are using lazy loading.

For instance, on this page on our giftshop website there are 3 images in large format and 3 in small format and at least from what I can see in the code they are using a lazy loading plugin but Lighthouse says to defer them.

ShacharAgam commented 5 years ago

currently still seeing it on a site im working on

vastolf commented 5 years ago

Currently seeing this happening as well. Maybe my lazyloading scripts are loading/triggered before the Time To Interactive (TTI) event? https://developers.google.com/web/tools/lighthouse/audits/offscreen-images

simonlayfield commented 5 years ago

I've stumbled across this issue too, and hoping for a solution.

Julianatwave commented 5 years ago

Getting this on a WordPress site that uses WP Rocket plugin for lazy load. I can see that lazy load is working by looking in the Chrome Network tab, but Audit says no.

rmertens commented 5 years ago

We're experiencing this as well.

MatTeague commented 5 years ago

We are also having the same issue. I hope a fix will happen soon

CKMacLeod commented 4 years ago

Yep - same here - still. Since this problem has been around for a year, I'm wondering if we'll just have to consider it may-never-fix and another thing to explain to clients inclined to treat Lighthouse/Page Speed Insights as definitive.

tobidot commented 4 years ago

This is still the case, correct? The test is mostly correct for me, but some images show up as failed seemingly randomly. Restarting the test, 3 times out wich 1 time it showed an image that is lazy-loaded.

patrickhulce commented 4 years ago

This is still the case in 5.6.0 but we intend to loosen this to 3 viewports in 6.0.0 (https://github.com/GoogleChrome/lighthouse/issues/10471)

Monique011114 commented 4 years ago

I'm seeing the same issue. Lighthouse is mostly correct for me too but this issue is giving me a bad performance score even though my images clearly are lazy-loaded. I wonder when this will be resolved.

connorjclark commented 4 years ago

We're working on it. #10643

jaxita47 commented 4 years ago

That is great news this issue is being worked on! Do you have any idea yet as to when a fix might be released?

rshackleton commented 4 years ago

Still seeing this issue on our site. An off-screen image is being reported, but only one of them, even though they're all deferred.

Has the #10643 PR been deployed so PSI is now using the updated checks or is it still in progress?

patrickhulce commented 4 years ago

@rshackleton no it has not. Should happen later this month.

rshackleton commented 4 years ago

@patrickhulce thanks for confirming, it will help us set expectations for clients on our side.

panablue commented 4 years ago

Any good current examples of unrecognized lazy loading to see in action?

Gigamick commented 4 years ago

Any good current examples of unrecognized lazy loading to see in action?

@panablue - 2 images continue to be flagged on https://songbox.rocks despite them being appropriately setup for lazy loading.

panablue commented 4 years ago

Thank you @GigaMick.

As established, PSI and the browser seem to disagree on the viewport threshold.

What's the relationship of this issue with loading="lazy" vs IntersectionObserver and rootMargin settings? Any current pure IntersectionObserver lazy loading setups with the same false positive to compare?

I haven't found this issue on well optimized and high-scoring pages, so I wonder if there's a correlation there. Could it only be triggered when there are appreciable other opportunities for optimization?

Menark commented 4 years ago

@patrickhulce Has the #10643 PR been deployed so PSI is now using the updated checks or is it still in progress? Thanks in advance.

patrickhulce commented 4 years ago

v6 with this fix is being officially released imminently. Keep your eye out for posts about the PSI deployment timeline :)

violuke commented 4 years ago

@patrickhulce Do you know how imminently? We're still getting false positives on this. Thanks for your help.

patrickhulce commented 4 years ago

It was released minutes after my comment.

PSI timeline is mentioned in the post https://web.dev/lighthouse-whats-new-6.0/

Other Google services that leverage Lighthouse will get the update by the end of the month

violuke commented 4 years ago

Thanks @patrickhulce, sorry I didn't know where to check the depoyment timeline. In that case:

  1. There's still a pointer to this bug at https://web.dev/offscreen-images/ - just in case removing that has been forgotten.
  2. When I check our homepage - I'm warned about some images which are lazy loaded via loading="lazy". Can you help as to why? As an example static2.viovet.co.uk/opt/s=kr,width=680,height=640/banners/1587565188-4463.png.webp is listed on PageSpeed Insights but in the source of our page it does have the loading="lazy" tag. It's loaded via srcset so maybe that's related? Or maybe we're doing something wrong in which case any help you can offer would be very much appreciated. Here's the snippet as-per viewing source in a web browser:
<img class="_desktop-visible _no-padding" loading="lazy" src="//static2.viovet.co.uk/opt/s=kr,width=340,height=320/banners/1587565188-4463.png.webp" srcset="//static2.viovet.co.uk/opt/s=kr,width=340,height=320/banners/1587565188-4463.png.webp 1x, //static2.viovet.co.uk/opt/s=kr,width=680,height=640/banners/1587565188-4463.png.webp 2x " alt="SL 25% off VioPet Food 2kg">

Thanks for your help.

patrickhulce commented 4 years ago

PSI has not been updated yet.

Other Google services that leverage Lighthouse will get the update by the end of the month

It's still May 26. If it's still happening June 1 feel free to bug the PSI team ;)

violuke commented 4 years ago

Sorry for the misunderstanding. Thanks 👍

johncarlson21 commented 4 years ago

This is broken again, please re-open.

patrickhulce commented 4 years ago

Please file a new bug report with repro steps and environment information then @johncarlson21. We have no idea if you're using the version of Lighthouse in which this should be fixed or if it's even the same root cause when that's all you say.