Add loading="lazy" to the images inserted into CKE

[cb2004]

This is a must for any offscreen images and getting a good Lighthouse score.

[jmartsch]

You could achieve this with a custom Textformatter. You could use https://processwire.com/modules/textformatter-process-images/ as a starting point.

[cb2004]

Sounds good, but I really think this is something that should now be on by default on the <img> tag, and you can switch this off if you wish. I don't want to add another module and a hook for an optimisation that every site I think will benefit from.

[jacmaes]

I second cb2004's request. It's an essential feature, it should be on by default. I believe it's safe to assume that pretty much all CKeditor fields will appear below the fold on the frontend.

BTW, I find it just as essential as preserving the height attribute on images, which seems to be stripped (leaving just the width attribute), to avoid layout shifts.

[jlahijani]

I agree with both the ability to set the "loading" attribute of an image (to "lazy" or "eager") and with the inserted image also including the height attribute.

[cb2004]

@ryancramerdesign any input on this one would be appreciated?

[teppokoivula]

This may be old news to everyone here, but just wanted to point out that images that are loaded initially (e.g. located high in the page structure, or "above the fold") should never get loading="lazy" applied, or it will in fact have negative impact. As such, if this is implemented for CKEditor (or more likely TinyMCE), it should be an option like hidpi or caption.

"Eager" is not needed, since it's the default. But a built-in option to add loading="lazy" would be nice addition indeed.

Here's one article with a more in-depth look into issues with lazy loading: https://web.dev/lcp-lazy-loading/

[jacmaes]

The HTML validator also throws a warning with inserted images (at least in CKEditor) because a trailing slash is needlessly included:

Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 69, column 2609; to line 69, column 2704

…"><img alt="" src="/site/assets/files/8195/lideresas.jpg" width="1200" /></a>…

[ryancramerdesign]

@cb2004 This loading=lazy option has been added, but must be enabled in the field settings for those that want it.

[jacmaes]

Thanks, @ryancramerdesign! Have you considered the two related improvements mentioned earlier in this thread?

1. Adding the height attribute to avoid a layout shift.
2. Removing the unnecessary trailing slash.