How to Lazy Load Images in WordPress: Complete Guide

Knowing how to lazy load images in WordPress is one of the most impactful performance optimisations you can make to your website. By deferring the loading of off-screen images until a visitor actually scrolls to them, you can dramatically cut initial page load time, reduce bandwidth consumption, and improve your Google Core Web Vitals scores — all without sacrificing a single pixel of visual quality.

What Is Lazy Loading and Why Does It Matter?

Lazy loading is a technique that delays the loading of non-critical resources — particularly images and videos — until they are needed. Instead of downloading every image on a page the moment a user arrives, the browser only loads the images that are currently visible in the viewport. Additional images are fetched as the user scrolls down the page.

This approach matters for several key reasons:

• Faster Time to First Contentful Paint (FCP): The browser has fewer resources to download before rendering the visible page.
• Improved Largest Contentful Paint (LCP): A crucial Core Web Vitals metric that directly impacts your Google Search ranking.
• Reduced data usage: Visitors who never scroll below the fold never download images they never see.
• Lower server load: Fewer simultaneous requests means less strain on your hosting infrastructure.
• Better mobile experience: Mobile users on limited data plans benefit significantly from deferred image loading.

Google has made page experience a ranking factor, and lazy loading is one of the quickest wins available to any WordPress site owner.

Method 1: Use the Native HTML Loading Attribute (Built-In WordPress)

Since WordPress 5.5, the platform automatically adds the loading="lazy" attribute to all images inserted through the media library, post editor, or template functions like the_post_thumbnail(). This means many WordPress sites already benefit from native browser-level lazy loading without any plugin required.

How to Verify Native Lazy Loading Is Active

1. Open your WordPress website in a browser.
2. Right-click on any image below the fold and select Inspect Element.
3. Look for the loading="lazy" attribute inside the <img> tag.
4. If the attribute is present, native lazy loading is already working.
5. If it is missing, your theme or a plugin may be stripping it — see the troubleshooting section below.

How to Add the Loading Attribute Manually via PHP

If you need to apply lazy loading to images that are output by custom theme code or legacy templates, you can add the attribute programmatically. Add the following snippet to your theme's functions.php file or a site-specific plugin:

// Force lazy loading on all WordPress images via filter
function wpai_add_lazy_loading_to_images( $attr, $attachment, $size ) {
    if ( ! isset( $attr['loading'] ) ) {
        $attr['loading'] = 'lazy';
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpai_add_lazy_loading_to_images', 10, 3 );

This filter hooks into WordPress's image rendering pipeline and ensures every attachment image carries the loading="lazy" attribute. Save the file and verify the change using browser developer tools.

Method 2: Use a Caching or Performance Plugin

For most WordPress users, the easiest and most comprehensive way to implement lazy loading — including for background images and iframes — is through a dedicated performance plugin. Several well-maintained options are available in the official WordPress plugin repository.

Option A: WP Rocket (Premium)

WP Rocket is widely regarded as the most user-friendly performance plugin for WordPress. Its lazy loading implementation covers images, iframes, and YouTube video thumbnails.

1. Purchase and download WP Rocket from wp-rocket.me.
2. In your WordPress dashboard, navigate to Plugins > Add New > Upload Plugin.
3. Upload the zip file and click Install Now, then Activate.
4. Go to Settings > WP Rocket.
5. Click the Media tab.
6. Toggle on Enable for images and Enable for iframes and videos.
7. Click Save Changes.

Option B: Smush (Free & Pro)

Smush by WPMU DEV is a popular free image optimisation plugin that includes lazy loading as a core feature.

1. Navigate to Plugins > Add New in your WordPress admin.
2. Search for Smush and click Install Now, then Activate.
3. The setup wizard will launch automatically — follow the on-screen prompts.
4. Once setup is complete, go to Smush > Lazy Load.
5. Toggle Activate Lazy Load to the on position.
6. Choose whether to include or exclude specific image types using the available checkboxes.
7. Click Save Changes.

Option C: a3 Lazy Load (Free, Lightweight)

For users who want lazy loading without a full performance suite, a3 Lazy Load is a lightweight, focused plugin that handles images, videos, and iframes. Install and activate it from the plugin repository, then visit Settings > a3 Lazy Load to configure which content types to defer.

Method 3: Implement Lazy Loading via WP-CLI

If you manage WordPress from the command line — common in staging and production workflows — you can verify and bulk-update image attributes using WP-CLI. The following command regenerates all thumbnail sizes for your media library, which triggers WordPress's built-in loading="lazy" injection for any images processed before WordPress 5.5:

wp media regenerate --yes

To confirm that a specific attachment has the correct attributes, you can query the database and inspect the rendered HTML output:

wp eval 'echo wp_get_attachment_image( 42, "large" );'

Replace 42 with the actual attachment ID. The output should include loading="lazy" in the <img> tag. This is particularly useful in CI/CD pipelines and automated deployment scripts where you want to programmatically verify performance settings after a deployment.

Method 4: Exclude Specific Images from Lazy Loading

Lazy loading every image on a page can actually hurt performance in certain scenarios. The Largest Contentful Paint element — typically your hero image or above-the-fold banner — should never be lazy loaded. Delaying its load actively worsens your LCP score and can trigger a Core Web Vitals failure.

Excluding Images in the Block Editor

1. Click on the image block you want to exclude in the WordPress block editor.
2. In the right-hand Block panel, scroll to the Advanced section.
3. In the Additional CSS class(es) field, type no-lazy (or whichever class your plugin uses for exclusions).
4. Publish or update the post.
5. Configure your lazy load plugin to skip images with that CSS class.

Excluding Images via PHP

To programmatically set the hero image to load eagerly, modify the image attributes in your theme template:

// Set the featured image to eager loading for LCP optimisation
function wpai_set_hero_image_eager( $attr, $attachment, $size ) {
    if ( is_singular() && has_post_thumbnail() ) {
        $thumbnail_id = get_post_thumbnail_id();
        if ( $attachment->ID === $thumbnail_id ) {
            $attr['loading'] = 'eager';
            $attr['fetchpriority'] = 'high';
        }
    }
    return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'wpai_set_hero_image_eager', 10, 3 );

The fetchpriority="high" attribute signals to the browser that this image is critical and should be downloaded with maximum priority, further improving your LCP score.

Troubleshooting Common Lazy Loading Issues

Even after implementing lazy loading correctly, you may encounter problems. Here are the most frequent issues and how to resolve them.

Images Are Not Being Lazy Loaded

• Theme overriding attributes: Some themes use custom image output functions that bypass WordPress's default pipeline. Check your theme's template files for hardcoded <img> tags and add the loading="lazy" attribute manually.
• Plugin conflict: Another plugin may be removing the attribute via a filter. Deactivate plugins one by one to identify the culprit, then consult its documentation for a compatibility setting.
• Old WordPress version: Ensure you are running WordPress 5.5 or higher. Navigate to Dashboard > Updates to check.

Lazy Loading Is Hurting LCP Score

• Your hero or banner image is likely being lazy loaded. Follow the exclusion steps above to set it to loading="eager" and add fetchpriority="high".
• Run a Google PageSpeed Insights test to identify which image is the LCP element, then exclude it explicitly.

Images Flash or Jump When Scrolling

• This is caused by missing width and height attributes on your <img> tags. Without defined dimensions, the browser cannot reserve space for the image before it loads, causing layout shifts. WordPress automatically adds these attributes for images inserted via the media library — ensure your theme is using wp_get_attachment_image() or similar functions rather than raw HTML.

Background Images Are Not Lazy Loading

• The native loading attribute only works on <img> and <iframe> elements. CSS background images require JavaScript-based lazy loading. Use a plugin like WP Rocket or a3 Lazy Load, which include JavaScript-powered solutions for background images.

Frequently Asked Questions

Does lazy loading images in WordPress hurt SEO?

No — when implemented correctly, lazy loading images in WordPress improves SEO by boosting your Core Web Vitals scores, particularly LCP and FID. Google's crawlers are capable of rendering JavaScript and can index lazy-loaded images. However, ensure your above-the-fold hero image is set to loading="eager" to avoid an LCP penalty.

Does WordPress automatically lazy load images?

Yes. Since WordPress 5.5, the loading="lazy" attribute is automatically added to images inserted through the block editor, classic editor, and core template functions like get_the_post_thumbnail(). You do not need a plugin for basic image lazy loading on modern WordPress installations.

What is the best free plugin to lazy load images in WordPress?

Smush by WPMU DEV and a3 Lazy Load are both excellent free options. Smush is ideal if you also want image compression and optimisation, while a3 Lazy Load is a lightweight choice focused purely on deferring images, iframes, and videos without adding bloat.

Should I lazy load all images on my WordPress site?

No — you should exclude above-the-fold images, especially your hero banner or featured image, from lazy loading. These images are often the Largest Contentful Paint element, and delaying their load will hurt your LCP score and overall page experience. Only defer images that appear below the visible viewport on initial page load.

Lazy loading images in WordPress is a straightforward but powerful technique that pays dividends in speed, user experience, and search rankings. Whether you opt for the built-in native attribute, a performance plugin, or a custom PHP filter, the steps above will guide you to a faster, leaner website. If you prefer to manage performance tasks like this without diving into code or plugin settings, WP AI Agent is a tool that lets you handle WordPress optimisations — including lazy loading configuration — through simple natural-language AI chat, making advanced site management accessible to everyone.