Offscreen image audit incorrectly reporting lazy-loaded images

[mdiblasio]

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:

• PageSpeed Insights (current version)
• web.dev (v4.0.0-alpha.1)

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]

I'd like to confirm the problem.

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

• https://builder-dot-lighthouse-ci.appspot.com/report.1547472388154.html

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:

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

[bkowalk]

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]

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

[johanlantz]

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]

currently still seeing it on a site im working on

[vastolf]

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]

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

[Julianatwave]

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]

We're experiencing this as well.

[MatTeague]

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

[CKMacLeod]

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]

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]

This is still the case in 5.6.0 but we intend to loosen this to 3 viewports in 6.0.0 (#10471)

[Monique011114]

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]

We're working on it. #10643

[jaxita47]

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]

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]

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

[rshackleton]

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

[panablue]

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

[Gigamick]

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]

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]

@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]

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

[violuke]

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

[patrickhulce]

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]

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]

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]

Sorry for the misunderstanding. Thanks 👍

[johncarlson21]

This is broken again, please re-open.

[patrickhulce]

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.