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.18k stars 9.34k forks source link

Handling lazy loaded images #3508

Closed midzer closed 6 years ago

midzer commented 6 years ago

Hi all, using LH v2.5 lazy loaded images above the fold are reported as "Properly size images" with 100% saving opportunity right now. I think this is misleading (or a bug) because those images are in correct dimension/size.

Furthermore those images result in a rather bad PSI pushing down overall performance rating. I read its value is calculated with all layout changes being done after initial page load. Maybe lazy loading elements above the fold has no point at all performance-wise? On the other hand, using lazy loading every heavy element FMP, FI and CI are fine :+1:

Here is an example site showing the issue https://feuerwehr-eisolzried.de/

Thanks for this awesome tool and have a nice day midzer

philipwalton commented 6 years ago

A similar issue showed up in this run: https://googlechrome.github.io/lighthouse/viewer/?gist=0e5447778147e6854e13023232bfcbac

Images were on-screen but not shown, and they were listed in the "properly size images" and "offscreen images" reports as 100% potential savings.

screen shot 2017-10-23 at 6 41 03 pm

This is definitely an issue, but probably needs a better name. Maybe something like "non-visible images" rather than "offscreen images".

patrickhulce commented 6 years ago

Thanks for verifying @philipwalton. I believe we originally threw around the idea of calling this "invisible images" but thought that would be even more confusing šŸ˜† we'll have to dig into some of theses edges and decide how we should handle them.

tomayac commented 6 years ago

This causes a lot of confusion, we need to rename this urgently. How about being very clear and just say ā€œimages that were loaded, but that arenā€™t being used on the pageā€?

dtomaszewski commented 6 years ago

I think it caused additional problem see on https://memoteka.pl/ that lazy loaded images are marked as "offscreen"

neodigm commented 6 years ago

I too am seeing the issue with lazy loaded images being categorized as off screen. Also seeing the same images as improperly sized: I've explicitly defined the width / height of each image. I tried delaying the lazy load by as much as 18 seconds without success.

kenhoward commented 6 years ago

Like @neodigm, I set the lazy load to an absurd amount of time without change in results. I'm targeting the correct images that are in question.

patrickhulce commented 6 years ago

@kenhoward are you still seeing problems with 3.0.0-beta? If so, please file a new issue with repro steps :)

neodigm commented 6 years ago

I am no longer seeing this issue in the extension.