Page MenuHomePhabricator

Don't lazy-load images above the fold when $wgNativeImageLazyLoading is enabled
Closed, DuplicatePublicFeature

Description

When $wgNativeImageLazyLoading is enabled, all images are lazy-loaded. However, images above the fold don't need to be lazy-loaded and in fact shouldn't be, since they will be requested after the layout is established. Non lazy-loading content "above the fold" can actually improve largest contentful paint times in many instances.

Event Timeline

I think that images in the lead section are closely correlated to images above the fold, especially considering that the table of contents usually pushes all other images below the fold. So, not lazy-loading images in the lead section is probably a good way to solve this issue!

Not lazy-loading images in the lead section is probably a good idea, in particular for Wikipedia sites. But maybe it's not that well adapted for other mediawiki sites, where the lead section might be very short and purely textual, and where the first image comes after that (and is still "above the fold", on laptops).
If there is no easy way to automatically identify the "above-the-fold" images, then it might be a good idea to also provide a way to tell mediawiki which images NOT to lazy-load (with a specific class added to the image, for example). I think this can be a useful complement to have, even if you go with your suggested approach.
Another idea could be to not lazy-load the first image found in the page content. But it might not always be a goo idea.
Maybe you could define several ways to select images not to lazy-load, as possible options to use, with parameters for mediawiki website owner to chose which of these ways to apply to his site.

Totally agree. AFAIK, there's no easy way to determine server-side which images will end up above the fold, but since "the perfect is the enemy of the good" we might as well give options to the sysadmins and let them choose the approach that better fits their wiki. To summarize, the three ideas mentioned are:

  1. Don't lazy-load images in the lead section
  2. Don't lazy-load the first image in the page content
  3. Don't lazy-load images with a certain class or in a certain list

Either 1 or 2 would work well for my particular use case (appropedia.org)

For what's worth, here's a bit of code anyone can add to their LocalSettings.php to lazy-load just 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 someone!

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.