Stop lazy loading of content images above the fold to improve LCP

[adamwoodnz]

Partially fixes #45

Content images which are above the fold shouldn't be lazy loaded as it affects the Largest Contentful Paint of the page, a key performance metric.

This PR adds a filter to skip X number of images as outlined on https://make.wordpress.org/core/2021/12/29/enhanced-lazy-loading-performance-in-5-9/, however the filter doesn't fire, @tellyworth suggested perhaps related to the content being in a pattern. Not sure if this being page content rather than post content makes a difference either.

The image in question is actually the first content image in the page, so if I understand correctly it should not be lazy loaded by default. It seems we're doing something differently to the way this optimization expects.

Screenshots

Before	After
image	image

How to test the changes in this Pull Request:

[adamwoodnz]

Draft value

[ryelle]

The first issue I ran into is that the lazy attribute is only added to images on the current site, so my local site wasn't adding it because it was pulled from main-test. I had to add it to my local site & swap the pattern code. In case anyone else runs into that :)

I tracked how that threshold value is used, and it's only used if the image is in the content, otherwise it defaults to lazy. In our case, context is false, so we return before even trying the threshold.

// Only elements with 'the_content' or 'the_post_thumbnail' context have special handling.
if ( 'the_content' !== $context && 'the_post_thumbnail' !== $context ) {
	return 'lazy';
}

(source)

So instead, I tried filtering the attribute itself when it's added, with wp_img_tag_add_loading_attr. This doesn't give us any context, so instead I'm checking for the file name and disabling lazy-loading for this specific image. We could check for other things, like the class name, but then that would affect all cover blocks…

The value of $image is just the image tag (whitespace added for readability).

<img
	width="2560"
	height="1305"
	class="wp-block-cover__image-background wp-image-9084"
	alt=""
	src="http://localhost:8888/wp-content/uploads/2022/08/editor-bg-scaled-1.webp"
	data-object-fit="cover"
	srcset="
		http://localhost:8888/wp-content/uploads/2022/08/editor-bg-scaled-1.webp           2560w,
		http://localhost:8888/wp-content/uploads/2022/08/editor-bg-scaled-1-300x153.webp    300w,
		http://localhost:8888/wp-content/uploads/2022/08/editor-bg-scaled-1-1024x522.webp  1024w,
		http://localhost:8888/wp-content/uploads/2022/08/editor-bg-scaled-1-768x392.webp    768w,
		http://localhost:8888/wp-content/uploads/2022/08/editor-bg-scaled-1-1536x783.webp  1536w,
		http://localhost:8888/wp-content/uploads/2022/08/editor-bg-scaled-1-2048x1044.webp 2048w
	"
	sizes="(max-width: 2560px) 100vw, 2560px"
/>

Anyway, I think e7a6e65 is a workaround we can launch with, and we can think about a future-safe solution later.

[ryelle]

Lighthouse says the Largest Contentful Paint is now another section, and it doesn't flag it.

[tellyworth]

So instead, I tried filtering the attribute itself when it's added, with wp_img_tag_add_loading_attr. This doesn't give us any context, so instead I'm checking for the file name and disabling lazy-loading for this specific image.

Nice one Kelly! That's exactly where I was trying to get to, I hadn't found that particular filter though.

This is a good workaround for now, @adamwoodnz let's merge it if it works.

As a more flexible solution going forward, instead of string-matching the file name, could we use something like a special classname or other attribute on the image to trigger it? That way it could be more explicitly controlled in the template rather than hidden away in a magic filter. Definitely not a blocker for merging though.

[adamwoodnz]

This is a good workaround for now, @adamwoodnz let's merge it if it works.

👍 testing in progress

[adamwoodnz]

LGTM, couldn't get a local image working, but tested in Sandbox

[adamwoodnz]

could we use something like a special classname or other attribute on the image to trigger it

I think we could apply a image-no-lazy or similar class to the image in the pattern, but it's not possible to add a class directly to the image through the editor as far as I can see. Couldn't get this to work in my sandbox as the pattern files don't see to get used like they do locally.