Lazy loading for large images

[msurguy]

When there are many images on the page, they are all loaded without taking consideration whether the user ever reaches the images by scrolling.

To improve the user experience, lazy loading of images should be added.

[gohai]

I don't believe this is necessary. It's a static page, so the browser can just as well be smart when it loads the resources that it might need. (And most type of optimization on the web tends to be obsolete after a very short time, so IMHO not worth the time.)

[msurguy]

@gohai thanks for your comment! I understand from your point of view it might be too early for this optimization.

I should've mentioned that I implemented image lazy loading on many of my projects before, including on NBC News, so it wasn't a big lift to try it out here as well (only took a few minutes) and I implemented it as a part of tutorial framework in these two commits a couple weeks ago: https://github.com/processing/processing-pi-website/commit/e47f4f8e91f6d938d0f63890ffda584d2edc885b and https://github.com/processing/processing-pi-website/commit/84d4032cedceaae948941b8f4a2e1cd864c98d7d.

I ran some tests in the latest version of Chrome and the findings are:

• with lazyload.js, the images only load when they are approaching the view, saving the bandwidth and making the page appear almost instantly
• without lazyload.js, all images are loaded at once as soon as the page is loaded (default behavior of Chrome, Firefox, Safari and other browsers), regardless of where the user scrolls

Here's a Network chart from Developer tools:

Without Lazyload (total bytes transferred at page load ~900kb):

With Lazyload (total bytes transferred at page load ~300 Kb):

The major drawback of this method is that the image tags that need to be lazily loaded have to have data-src attribute instead of src attribute, which some search engines used to not understand (not the case anymore though). More details on that are here: https://seo-gold.com/lazy-load-images-to-improve-seo-performance-and-usability/

Let me know what your thoughts are, should we keep it or revert the changes? Thanks!

[gohai]

Thanks for the explanation. I was thinking of just squashing your PR and merging it - so while I wouldn't want to cause extra work (since you have already implemented it), it's probably not so good too have an unrelated change go in in the same commit. I would suggest removing it at least from the PR (or reducing the PR to one commit that contains the tutorial, and one that contains the lazy loading) - or altogether

[msurguy]

@gohai cool, I removed the Lazyload from the tutorial PR and will create another PR when the tutorial is live to re-implement it: https://github.com/processing/processing-pi-website/commit/db44406db61a27c00829a3e118f04aa94cf9c101

Let's keep this issue open so that I don't forget to re-make it.

Thanks!