Does jQuery Lazy Loading have any real performance gains?

jQuery Lazy Loader does the opposite of preloading images - it delays loading images until they are visible in the browser. This claims to make sites feel "snappier", and images elegantly fade in as the user scrolls down the page.

Mashable was known for using this technique (although I just checked and it appears开发者_运维技巧 they are no longer doing so).

Are there any realistic performance gains from using jQuery lazy loader, or does it just make the user perceive that the website is loading faster?

That depends entirely on what you mean by "performance" and how lazy loading is used.

If you are just using lazy loading to load the same images you would otherwise load, then the same amount of bits are flowing across the stream, but indeed the packaging and IO costs more so from a 'server to client' perspective, it actually costs in 'performance'. It will do that to benefit the user who may indeed start consuming a portion of the content sooner than otherwise and so the user perception is improved, and that too is an element of "performance".

If you are using lazy loading to discriminate what data or images are being downloaded so that you can only bring that which the consumer wants, then you are getting real performance bonuses all around for not streaming undesired content.

How much of an "improvement"? Is it "worth it"? Well that is very subjective and your mileage may vary.

I can describe my experience with lazy loading, which has suited my needs to hide hundreds of images until they are scrolled to.

When there where only 5 or so images off screen, the lazy loading will not be doing anything so no gain there. But the more images added to a single page with normal loading, I could really see my cheap tablet chugging away trying to load that much content along with rendering what was on screen. With lazy loading on, my tablet still took its time loading what was on screen, but when that was finished it was no longer stuttering tyring to load anything. So with just lazy loading the experience has improved for me, the user.

I have been using lazySizes, and one decision you will need to make is whether to commit to what it requires. All of my <img> use the data-src attribute rather than src making it reliant on the user having javascript enabled. If that is not an option for you I'm sure there are fallback options, I am just not aware of them.