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.

[westonruter]

I just put together a prototype in #1872 (comment) for how this could be implemented while we wait for the HTML API to be able to remove tags.

<?php
add_action( 'od_register_tag_visitors', function ( OD_Tag_Visitor_Registry $registry ) {
	$registry->register( 'native-lazy-loading', function ( OD_Tag_Visitor_Context $context ) {
		$processor = $context->processor;
		if ( $processor->get_tag() !== 'IMG' || ! $processor->has_class( 'lazyload' ) ) {
			return; // Tag is not relevant for this tag visitor.
		}

		$src    = $processor->get_attribute( 'data-src' );
		$srcset = $processor->get_attribute( 'data-srcset' );

		if ( ! is_string( $src ) && ! is_string( $srcset ) ) {
			return;
		}

		// Replace the src attribute with the data-src attribute.
		if ( is_string( $src ) ) {
			$processor->set_attribute( 'src', $src );
			$processor->remove_attribute( 'data-src' );
		}

		// Replace the srcset attribute with the data-srcset attribute.
		if ( is_string( $srcset ) ) {
			$processor->set_attribute( 'srcset', $srcset );
			$processor->remove_attribute( 'data-srcset' );
		}

		$processor->remove_class( 'lazyload' );

		if ( $processor->next_tag() && $processor->get_tag() === 'NOSCRIPT' ) {
			if ( method_exists( $processor, 'remove_tag' ) ) {
				// Note: This is not yet supported by the HTML API! But this is how the NOSCRIPT could in theory be removed in the future.
				$processor->remove_tag();
			} elseif ( $processor->next_tag() && $processor->get_tag() === 'IMG' ) {
				// This alternative prevents the duplicate NOSCRIPT > IMG from being shown.
				$processor->remove_attribute( 'src' ); // Prevent loading the image.
				$processor->remove_attribute( 'srcset' ); // Prevent loading the image.
				$processor->set_attribute( 'hidden', true ); // Prevent the image from being rendered twice.
			}
		}
	} );
} );

Naturally the method_exists( $processor, 'remove_tag' ) condition wouldn't be needed if this code is adapted for a PR, but I include it here to show what could be used in the future.

Importantly, this tag visitor is expecting to be run before Image Prioritizer does its optimizations, to actually apply loading=lazy based on whether the image is visible. Since we didn't really settle on a way to mark tag visitors as dependent on others (#1419), this code should be incorporated into existing tag visitors in Image Prioritizer to run at the right time.