UI option to disable Lazyloading for block

[sabrina-zeidan]

What problem does this address?

After 5.5 we have lazyloading for images provided out of the box using the native HTML loading attribute, which is applied to all images. Iframes are lazyloaded since 5.7 too.

Currently, the only way to disable lazy-loading for a specific image is programmatically using wp_img_tag_add_loading_attr filter.

Why disable lazyloading at all? Isn’t it supposed to improve loading times

While lazyloading images (and other assets) brings tremendous improvement to loading times in general, there is a case when lazy-loading harms user experience: when images above the fold are lazyloaded too.

Example when lazy-loading of an image harms loading times:

Here is a typical page with a Cover Block on top (above the fold). To improve loading times we need to show above-the-fold content as soon as possible.

If we lazyload all images user will see a black rectangle first:

If we lazyload all images but! the first one, they will see it sooner:

Links to compare live examples:

First image is lazyloaded (default behaviour)

First image is not lazyloaded (disabled via this option)

What is your proposed solution?

Add a new attribute for blocks to set lazyloading on/off.
This can be applied to: site-logo, image, cover, embed.
And add an option to the Advanced section to disable Lazy-loading:

Behaviour

• When checked: loading="lazy" attribute is removed and lazyloading is disabled for elements inside the block (images or iframes)
• The element is assigned "lazyload-disabled" class to have a mark why it is not lazyloaded
• This won't affect the way the image loads on other pages or on this very page but in a different place, it impacts the specified block only

Why add another UI option instead of using a filter?

• For developers: it’s not handy to use filter every time to specify not only the image that needs to be excluded, but also specific conditions (to exclude it only if it is used on the specific page, but keep it lazyloaded elsewhere).
• For not-developers: this is especially important with upcoming Full Site Editing when not only developers but designers, marketers, and even my mom would have the opportunity to create a new website easily.
  The fact that they don’t code doesn’t mean they don’t want their website to deliver a good user experience as possible.

Use cases

Possible cases when it might be necessary to disable lazy-loading for the elements and UI option for that would be handy:

• prevent lazyloading content above the fold: images (inside Image Block, Cover Block as per this feature or other blocks), iframes etc.

• embeds that use iframe but have issues displaying (e.g. wordpress.org embed)

• iframes from advertising networks might have the same compatibility issues

• Performance note: *
  In terms of above-the-fold images performance: @swissspidy pointed out here preloading might make difference too, maybe be another option for preloading would make sense also.

[carolinan]

Is lazy-loading a term that most users will understand?

[sabrina-zeidan]

Yeah. I was thinking of the Advanced section because of this. I guess it's someone who is comfortable using HTML anchor or CSS classes would know the term lazy-loading too and might find this useful.

[michaelbourne]

This is a good idea. I'd add in decoding="async" as well for even more above the fold render benefits.

[eric-michel]

Most folks probably know this already, but Google has endorsed removing lazy loading from above-the-fold images as a performance boost: https://web.dev/lcp-lazy-loading/.

They've even gone so far as to flag lazily-loaded above-the-fold images in Lighthouse:

See GoogleChrome/lighthouse#12785 for more info.

[swissspidy]

^ yup, which is why WordPress 5.9 has improved its lazy loading accordingly: https://make.wordpress.org/core/2021/12/29/enhanced-lazy-loading-performance-in-5-9/

It should be very rarely needed to override this automatic behavior in WordPress, so I am -1 on adding a UI option for this.

/cc @ThierryA @felixarntz @adamsilverstein for visibility

[westonruter]

As I shared in ampproject/amp-wp#6942 (comment), here's a quick workaround to prevent the image in the Site Logo block from being rendered with loading=lazy:

add_filter(
	'wp_img_tag_add_loading_attr',
	static function ( $value, $image ) {
		if ( false !== strpos( $image, 'custom-logo' ) ) {
			$value = false;
		}
		return $value;
	},
	10,
	2
);

[adamsilverstein]

I tend to agree this UI would be confusing for most users and they might not know when to use it. Certainly something a plugin could offer, but maybe not something we would want as a built in control.