Selectively disable image lazy loading in WP 5.5+ (without plugin)

The Problem

In WordPress 5.5 and above, all images in a post will have a loading=”lazy” attribute by default. You can read this article to learn more about lazy loading in WordPress 5.5 here.

Images that are marked as candidates for lazy-loading require the browser to resolve where the image is positioned on the page which has an impact on the Largest Contentful Paint (LCP) metric as measured in Google Lighthouse.

LCP measures when the largest paint appears on the page. If you use lazy loading and the images are visible “above the fold” (without scrolling) and they are the largest paint on the page then they will be reported as LCP. This can also be the case if just the top of an image is showing.

Brute force solution

To disable lazy loading in WordPress by default, you can add the following code into your functions.php file:

/* Disable native lazy loading for all post images */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

Selective solution using image classes

Rather than disabling lazy loading for all images in a post, a better solution is to only disable lazy loading for selected images, particularly for images which are above the fold and therefore increase the LCP (Largest Contentful Paint) metric.

An easy way to do this is to add a class of ‘no-lazy’ to any image that you don’t want WordPress to add the lazy loading attribute to, and add the following code to your functions.php file:

/**
 * Disable native lazy loading on images with a class of 'no-lazy'.
 * @param mixed $value 
 * @param mixed $image 
 * @param mixed $context 
 * @return mixed 
 */
function remove_lazy_loading_by_class( $value, $image, $context ) {
    if ( 'the_content' === $context ) {
         if ( false !== strpos( $image, 'no-lazy' ) ) {
              return false;
         }
    }
    return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'remove_lazy_loading_by_class', 10, 3 );