WordPress 5.5 Lazy Loading Images: Override loading=eager for LCP Performance

Home » WordPress » WordPress 5.5 Lazy Loading Images: Override loading=eager for LCP Performance
August 15, 2020 WordPress
WordPress 5.5 Lazy Loading Images: Override loading=eager for LCP Performance

Browsers added native support for the loading="lazy" attribute on <img> and <iframe> elements starting with Chrome 76 (July 2019) and Firefox 75 (April 2020). WordPress 5.5 (released August 11, 2020) automatically began adding loading="lazy" to all images output through the_post_thumbnail(), wp_get_attachment_image(), and images inserted via the block editor or the classic TinyMCE editor. Most WordPress sites got free, zero-configuration lazy loading by simply upgrading to 5.5. However, there is an important exception: the browser does not defer images that are already in the viewport when the page loads — but it cannot know that at server render time. The consequence is that your page’s hero image or Largest Contentful Paint (LCP) element may be deferred, hurting Core Web Vitals, if you don’t explicitly override the lazy attribute on those specific images. This article explains how to opt out for above-the-fold images and how to disable the feature globally if needed.

Problem: After upgrading to WordPress 5.5, the hero image (the LCP element) on every page now has loading="lazy", causing the browser to delay loading it and degrading the Largest Contentful Paint score in Core Web Vitals.

Solution: Override loading="eager" on the specific hero image using wp_get_attachment_image()'s $attr parameter, or use the wp_lazy_loading_enabled filter for conditional suppression.

<?php
// ── Override for a specific image ─────────────────────────────────────
// The $attr array is merged with auto-generated attributes — including loading
the_post_thumbnail( 'full', [ 'loading' => 'eager' ] );

// Or with the raw function:
echo wp_get_attachment_image( $attachment_id, 'hero', false, [
    'loading' => 'eager',
    'class'   => 'hero__image',
    'alt'     => get_the_title(),
] );

// ── Disable lazy loading globally ────────────────────────────────────
// Return false to remove loading="lazy" from ALL images.
add_filter( 'wp_lazy_loading_enabled', '__return_false' );

// ── Conditional — disable only for the_post_thumbnail on singular pages
add_filter( 'wp_lazy_loading_enabled', function ( $enabled, $tag_name, $context ) {
    if ( is_singular() && $context === 'the_post_thumbnail' && $tag_name === 'img' ) {
        return false;
    }
    return $enabled;
}, 10, 3 );

Check the final HTML attribute output on a given image:

<?php
// These produce loading="lazy" in WP 5.5+:
the_post_thumbnail( 'large' );
echo wp_get_attachment_image( 42, 'medium' );
echo get_avatar( $user_id, 96 ); // also lazy since WP 5.5

// These produce loading="eager" (explicit override):
the_post_thumbnail( 'hero', [ 'loading' => 'eager' ] );

// fetchpriority="high" hint (browser WP 6.3+, but valid HTML earlier):
the_post_thumbnail( 'hero', [ 'loading' => 'eager', 'fetchpriority' => 'high' ] );

NOTE: loading="lazy" is a hint — browsers apply it only to images outside the initial viewport. Images above the fold are typically loaded eagerly regardless of the attribute, but to be safe (especially for Server-Side Rendering in shared templates), explicitly set loading="eager" on the first visible image on each page template. For optimal Core Web Vitals, combine loading="eager" with fetchpriority="high" on the LCP image.

Related posts