Add lazy loading and async decoding to images

[lb-]

Overview

• To speed up the loading experience in Wagtail docs, it would be good to adopt two img tag features loading='lazy' and decoding='async'.

Details

• Similar to Add lazy loading and async decoding to images wagtail#8598
• Not sure how to do this with MySt parser or Sphinx or where in the system this needs to be added, but it should be opt out (by default all images add these attributes).
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-decoding
• We may not want to do this for the logo and the image in the Wagtail space banner - but maybe these images could be added via background css (if not already done)

[mohammadareeb95]

I'm starting to work on this issue

[lb-]

Awesome

[lb-]

Some nuance here - only images that are non-critical to the Docs interface should be lazily loaded.

Example - tutorial screenshots about clicking a button in the admin interface - this can be lazy.
Example - core logo for the header - this should not be lazy & show straight away.

I am not sure how we will do this yet, my guess is it will be something at the myst-parser or sphinx config level.

Maybe google 'Sphinx default image attributes lazy load' or 'myst-parser default image attributes' or something like that.

@mohammadareeb95

[mohammadareeb95]

@lb- Thanks for the context, I'm trying to figure this out.

[lb-]

Some research, a lot of this is new to me also

• MyST Parser converts markdown to ReST https://myst-parser.readthedocs.io/en/latest/index.html
• Sphinx docs uses the docutils directives under the hood - https://stackoverflow.com/a/2441159
• Docutils has a config for image lazy loading https://docutils.sourceforge.io/docs/user/config.html#image-loading
• Unsure if we can just use that config in our docs config though but worth a try

Note: This may end up being one of those things that we have to solve in the theme here and also on the Wagtail usage of the theme if it's a config thing.

Anyway - those links could be a dead end but hopefully that helps.