Should we use lazy loading for the images?

[JohnMcLear]

As they are large animated gifs.

https://web.dev/native-lazy-loading/

[muxator]

Yep, they are.

Yesterday I was thinking about also compress to a different format (like animated WebP or animated PNGs), keeping the original animated GIFs as fallback for older browsers (mainly IE 11) that do not support them.

I guess it's not terribly hard.

My 2 cents:

1. lazy loading
2. serving animated WebP or PNGs to modern browsers (the majority)
3. fall back to GIFs for IExx (with feature detection, no version sniffing)
4. preallocate the size of the image boxes to prevent reflows when loading on slower connections (this might already be there, I did not check the source code)

@seballot what do you think?

[seballot]

Hi ! what are the benefit of going with webP instead of Gif?

I did some test simulating bad 3G connection, and I think the loading is kind of acceptable. Also it's just a static website people will go once and not come back probably. The suggested improvements seems nice, but not sure it worth spending too much time on this !

Personally I would like to pause my contributions to etherpad, I got other projects waiting :)

[muxator]

Hi @seballot, first of all, I completely understand your designer skill are better used on visual design, and not this kind of stuff. Thanks again for all the work you have been doing on Etherpad, I am eager to see your work on other projects (hopefully with a saner code base :smile: ).

Just for the sake of experimenting, let's do some calculations targeting the worst case.

• typical 3G speed (source): 3.1 megabits per second;
• converted in kilobytes per second (you can do this writing "3.1 mbps in kilobytes per second" in Google): 387.5 KB/s
• size of etherpad_demo.gif: 874 KB.

On a typical 3G connection, download time would be ~2.3 s (and also the latency for first frame, becaus gif has to be fully downloaded before display).

Let's convert to webp (default ffmpeg settings, lossy but visually identical):

$ ffmpeg -i etherpad_demo.gif etherpad_demo.webp
[...]
$ ls -lh etherpad_demo.*
-rw-rw-r-- 1 muxator muxator 874K apr 25 11:07 etherpad_demo.gif
-rw-rw-r-- 1 muxator muxator 381K apr 25 11:40 etherpad_demo.webp

File size goes from 874 KB to 381K. It's almost 500 KB less, or 44% the original size.

This means the download time for the animation goes from 2.3 seconds to 1 second, not counting that the latency would probably be less, because i think browsers are able to stream the file.

I've seen that the <picture> element have support for multiple srcset, and probably degrades gracefully to an <img> in ie11.

That, plus loading="lazy" attribute, could make the loading experience way smoother for people with less powerful gear.

All that said, please consider this just an engineer's way of having fun. You are right this is just a basic homepage nobody is going to visit twice. :smile:

[seballot]

Nice ! 56% of size reduction is quite significant, you should go and use the webp file instead of the gif file !

[muxator]

Yep, as soon as 1.8.3 is released, I'll experiment it.

Thanks.

[seballot]

If you are interested, my main other project as volunteer is https://gitlab.adullact.net/pixelhumain/GoGoCarto/-/tree/master

See example at https://transiscope.gogocarto.fr/annuaire or http://presdecheznous.fr

But it's not yet internationalized, only french for now :)