Manual talk:$wgNativeImageLazyLoading/Flow

I add $wgNativeImageLazyLoading = true; in LocalSettings.php.

But it still load all images.

Is there a way of disabling lazy loading for content above the fold or at least for the first image? Non lazy loading content "above the fold" can actually improve largest contentful paint times in many instances.

I agree with previous comment = lazy loading of images should not apply to "above the fold" images. Or at least there should be a way to tell that some images should not be lazy loaded, like a list of image classes or other ...

Is this something that is being considered? Or has been discussed at some point?

I agree and reported this at phab:T320762.

For what's worth, here's a bit of code you can add to your LocalSettings.php to lazy-load all but the first image of every page:

$wgThumbCount = 0;
$wgHooks['ThumbnailBeforeProduceHTML'][] = function ( ThumbnailImage $thumbnail, array &$attribs, array &$linkAttribs ) {
	global $wgThumbCount;
	if ( $wgThumbCount > 0 ) {
		$attribs['loading'] = 'lazy';
	}
	$wgThumbCount++;
};

It can be trivially modified to lazy-load the first two images, or whatever. Hope it helps!

Apparently it's not so simple, gallery thumbnails and plain images are processed before image thumbnails, so in order to lazy-load everything but the first image thumbnail, the code would be:

$wgThumbCount = 0;
$wgHooks['ThumbnailBeforeProduceHTML'][] = function ( ThumbnailImage $thumbnail, array &$attribs, array &$linkAttribs ) {
	global $wgThumbCount;
	$class = $attribs['class'] ?? '';
	if ( strpos( $class, 'thumbimage' ) !== false ) {
		$wgThumbCount++;
		if ( $wgThumbCount === 1 ) {
			return;
		}
	}
	$attribs['loading'] = 'lazy';
};

Again, this idea can be easily customized.