search

w3c / jlreq

Text Layout Requirements for Japanese
https://w3c.github.io/jlreq/
Other
101 stars 17 forks source link

Optimize the images #218

Open xfq opened 4 years ago

xfq commented 4 years ago

It often takes tens of seconds to open jlreq, so IMHO it would be useful to improve the performance by:

since over 90% of the bytes downloaded are images.

himorin commented 4 years ago

I'm not sure whether we may have such configuration, but I think adding loading=lazy is the option. (with respec processed html file, "completed=7.04, DOMContentLoaded=5.70, load=7.05 sec" to "completed=2.17, DOMContentLoaded=1.65, load=1.79" on Firefox)

For image files, size of current English files is:

and I don't think we can get large improvement by changing the image format.

xfq commented 4 years ago

and I don't think we can get large improvement by changing the image format.

To me, this is already a lot of improvement (note that we have both English and Japanese images).

We should also see if (optimized) SVG is better (or at least not worse).

r12a commented 4 years ago

I ran ImageOptim on the first 10 files in my directory and reduced the size of all of them by around 50%. I'll run the others through that too.

himorin commented 4 years ago

We should also see if (optimized) SVG is better (or at least not worse).

In JL-TF, as in simple-ruby, we usually put outlined SVG image for those who don't have Japanese font. So size of image files could be larger than bitmap images.

r12a commented 4 years ago

Ok. I ran ImageOptim on all the images in /images and /images_ja. Both were around 8.2 Mb each to start with. Now they are 3.8 and 3.7 Mb respectively. Updated files have been committed to GH.

kidayasuo commented 4 years ago

I believe adding loading=lazy would make it significantly faster. How about adding it before considering optimizing images? As we unified English and Japanese documents, we are loading twice as many images than actually needed. “loading=lazy” will mitigate that penalty. When #126 is fixed the option will make the amount of image load even smaller.