JS-based lazy-loaded images should be replaced with native lazy-loading

[westonruter]

See #1745:

In a future PR we could consider undoing such JS-based lazy-loading, rewriting data-src to src, data-srcset back to srcset and so on, and then to process the IMG as normal. This would have a dramatic improvement to LCP especially when the such JS-based lazy-loading is being done for images in the initial viewport, especially for an IMG which is the LCP element.

For example, Image Prioritizer should take the following from the Avada theme (code ref):

<img
	src="https://example.com/foo.webp"
	data-orig-src="https://example.com/foo.webp"
	width="1000"
	height="800"
	class="lazyload wp-image-1"
	srcset="data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%271000%27%20height%3D%27800%27%20viewBox%3D%270%200%201000%20800%27%3E%3Crect%20width%3D%271000%27%20height%3D%27800%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E"
	data-srcset="https://example.com/foo-200x91.webp 200w, https://example.com/foo-300x136.webp 300w, https://example.com/foo-400x181.webp 400w, https://example.com/foo-600x272.webp 600w, https://example.com/foo-768x348.webp 768w, https://example.com/foo-800x362.webp 800w, https://example.com/foo-1024x463.webp 1024w, https://example.com/foo-1200x543.webp 1200w, https://example.com/foo-1536x695.webp 1536w, https://example.com/foo.webp 1920w"
	data-sizes="auto"
	data-orig-sizes="(max-width: 767px) 100vw, 1920px"
>

And transform it into:

<img
	src="https://example.com/foo.webp"
	width="1000"
	height="800"
	class="wp-image-1"
	srcset="https://example.com/foo-200x91.webp 200w, https://example.com/foo-300x136.webp 300w, https://example.com/foo-400x181.webp 400w, https://example.com/foo-600x272.webp 600w, https://example.com/foo-768x348.webp 768w, https://example.com/foo-800x362.webp 800w, https://example.com/foo-1024x463.webp 1024w, https://example.com/foo-1200x543.webp 1200w, https://example.com/foo-1536x695.webp 1536w, https://example.com/foo.webp 1920w"
	sizes="(max-width: 767px) 100vw, 1920px"
	loading="lazy"
>

And the following from Speed Optimizer from SiteGround (code ref):

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="https://example.com/bar.jpg" data-srcset="https://example.com/bar-large.jpg 1000w, https://example.com/bar-large.jpg 1000w" sizes="(max-width: 556px) 100vw, 556px" alt="Bar" class="attachment-large size-large wp-image-2 has-transparency lazyload" width="500" height="300">
<noscript>
	<img src="https://example.com/bar.jpg" srcset="https://example.com/bar-large.jpg 1000w, https://example.com/bar-large.jpg 1000w" sizes="(max-width: 556px) 100vw, 556px" alt="Bar" class="attachment-large size-large wp-image-2 has-transparency lazyload" width="500" height="300">
</noscript>

Should be converted into:

<img src="https://example.com/bar.jpg" data-srcset="https://example.com/bar-large.jpg 1000w, https://example.com/bar-large.jpg 1000w" sizes="(max-width: 556px) 100vw, 556px" alt="Bar" class="attachment-large size-large wp-image-2 has-transparency" width="500" height="300" loading="lazy">

Then Image Prioritizer's enhancements can apply as expected, with removing loading=lazy if the IMG is in an initial viewport and also to add preloading as appropriate when it is the LCP element.

There are many implementations of JS-based lazy-loading, however, so this should prioritize what is most popular (e.g. LazySizes). On the other hand, plugins which use JS-based lazy-loading could rather be engaged with to use native lazy-loading instead.

[SohamPatel46]

Hello, I am trying to work on this issue. Let me know for any suggestions and area of work, while I try to replicate/enhance the issue. Thanks !

[westonruter]

@SohamPatel46 thanks! I did open a PR to start addressing part of this in #1785 but not to undo the lazy loading. The PR is more to fix handling of applying optimizations erroneously to JS lazy-loaded images.

An issue I see at the moment is that I don't believe HTML Tag Processor is maybe suitable yet to do what is needed. Namely, if we need to remove a NOSCRIPT tag then this isn't currently supported. This may depend on using the HTML Processor instead since it provides a superset of the capabilities of the HTML Tag Processor. I opened #1546 to start exploring that, but I got stuck due to some bugs which haven't yet all been fixed in core. Also, I don't believe HTML Processor yet directly supports removing entire tags.

Then there is the question of to what degree we should go about undoing JS-based lazy loading. We should identify that the most common libraries are that do it. My impression is that LazySizes is the most popular and Gemini concurs. Nevertheless, I did find at least one other implementation in Avada when working on #1785.

Lastly, there's the question if this should be in scope for Image Prioritizer in the first place. I recall @felixarntz has doubts, so we should make sure we're all on the same page.