Hello all,
Currently, all images inserted by users in the page content are loaded eagerly.
This means that images are creating network activities even when they are not within the visible viewport.
As a consequence, pages with a lot of text and images (e.g., https://extensions.xwiki.org/xwiki/bin/view/Extension/CKEditor%20Integration/) are more network intensive than they could, as users usually only read a few sections they are interested in.
To address this issue, it is possible to add a loading='lazy' attributes on img elements.
When this attribute is defined, images are only loaded when they are close to be within the viewport, based on browser specific heuristics.
To give some rough estimates, I manually made images from the CKEditor Integration page linked above lazy, and measured the network activity of the page. It went from 20.12MB to 18.84MB.
Therefore, I think it would be beneficial to improve our html rendering to make img elements lazy by default.
Different options are possible:
- make all images lazy, as it does not seem to have drawbacks according to the documentations.
- define a threshold, e.g., only make the Nth image lazy (assuming the one before that are likely to be within viewport)
- some other heuristic?
Before discussing implementation details, what do you think of the general idea?
Thanks
PS: other image specific attributes such as src-set are also interesting to lower the network use of images, I plan to propose them in separate discussions.
Resources:
- https://design.xwiki.org/xwiki/bin/view/Proposal/SustainableImageAssets
- Lazy loading via attribute for images & iframes | Can I use... Support tables for HTML5, CSS3, etc
- HTML Standard
- Browser-level image lazy loading for the web | Articles | web.dev
- <img>: The Image Embed element - HTML: HyperText Markup Language | MDN
4 posts - 3 participants