Lazy Loading in WordPress

Lazy loading images is one of the most recommended WordPress speed optimisations. It defers images below the fold until a user scrolls to them, which reduces the initial page payload, speeds up load times, and improves your Core Web Vitals scores.

But here’s the problem nobody was talking about a few years ago: lazy loading the wrong images actively destroys your SEO.

Specifically, if your hero image, featured image, or any image visible without scrolling is being lazy loaded, you are directly sabotaging your Largest Contentful Paint (LCP) score. Research shows that 68% of WordPress sites using lazy loading are applying it incorrectly, which hurts the very Core Web Vitals metric it was supposed to improve. Sites with poor LCP scores rank an average of seven positions lower and see 24% higher bounce rates.

This guide covers what lazy loading actually is, why the “lazy load everything” approach breaks in 2026, exactly which images to exclude, how to configure it correctly with or without a plugin, and the best practices that keep both your performance scores and your SEO rankings in good shape.

What Is Lazy Loading in WordPress?

Lazy loading is a browser technique that delays loading images, videos, and iframes until they are about to enter the user’s visible area (the viewport). Instead of downloading every image on a page the moment someone lands on it, the browser only loads what’s visible above the fold. Images below the fold load as the user scrolls toward them.

The practical effect is significant. A long blog post with twenty images no longer forces the browser to download all twenty images upfront. It downloads the first two or three, and the rest load on demand. Initial page payload drops, the page feels faster, and both users and search engines notice.

Since WordPress 5.5, released in 2020, WordPress automatically adds the loading=”lazy” attribute to images inserted via the block editor. Modern browsers including Chrome, Firefox, Safari, and Edge all support this natively. No plugin and no JavaScript is required for basic lazy loading on any WordPress site running 5.5 or higher.

The problem is that “automatic” doesn’t mean “correct.” WordPress applies lazy loading broadly, and it doesn’t always know which images are critical above-the-fold content that should never be deferred.

Why Lazy Loading the Wrong Images Kills Your LCP Score

This is the most important concept in this entire guide and the one most WordPress sites get wrong.

Your Largest Contentful Paint (LCP) is the time it takes for the largest visible element on your page to fully render. For the vast majority of WordPress sites, that element is the hero image at the top of the page. Your homepage banner. Your blog post featured image. Your product photo at the top of a landing page.

When the browser encounters loading=”lazy” on that image, it deprioritises it. The browser’s preload scanner, which works in parallel with the main HTML parser to fetch critical resources early, skips lazy images completely. So instead of fetching your hero image immediately, the browser finishes downloading HTML, CSS, and JavaScript first, and only then starts fetching the hero image when it “discovers” it’s actually visible.

The result: your most important visual element loads significantly later than it should. LCP jumps from 1.5 seconds to 3.5 seconds or more. You fail the Core Web Vitals assessment. Rankings suffer.

WordPress 5.9 introduced a partial fix that automatically skips lazy loading for the first content image. But this often fails when you’re using page builders like Elementor or Divi, when your LCP element is a background CSS image rather than an HTML img tag, or when your logo or header image appears before the main content image. You cannot rely on WordPress to always identify the right image to exclude.

The rule in 2026 is simple. Lazy load images below the fold. Never lazy load images above the fold.

Which Images Should and Should Not Be Lazy Loaded

Getting this right is the difference between lazy loading helping your site and hurting it.

Never lazy load these images:

Your hero image or homepage banner. The featured image on a blog post when it appears at the top of the page. Your site logo and header image. Any large image that appears before the user needs to scroll. Product images that are the primary visual element on a product or landing page.

All of these are potential LCP elements. They should load with the highest possible priority, not the lowest.

Always lazy load these images:

Images in the body of a blog post that appear after two or more paragraphs of content. Gallery images that appear below the fold. Testimonial photos, team member photos, or author avatars that sit low on a page. Footer images and sponsor logos. Any image the user has to scroll to see.

The test is simple. Open your page, look at what’s visible without any scrolling. Those images should not be lazy loaded. Everything below that invisible line is a candidate for lazy loading.

How WordPress Lazy Loading Works Natively

Since WordPress 5.5, the CMS automatically adds loading=”lazy” to images in your post content. Since WordPress 5.9, it also attempts to skip the first content image from lazy loading. Both of these are handled by the WordPress core with no configuration needed.

For simple blogs with a straightforward layout, this native implementation is often sufficient. The first image (typically your featured image at the top of a post) is excluded from lazy loading, and all subsequent in-content images get deferred.

Where native lazy loading breaks down:

Using Elementor, Divi, Beaver Builder, or any page builder that renders images outside the standard WordPress content area. The page builder outputs its own image markup, which WordPress core doesn’t always process correctly. Your LCP element may still be getting lazy loaded even though WordPress 5.9 tried to exclude it.

Having a custom theme with a hero section that loads the featured image as a background CSS image. WordPress core only applies lazy loading logic to HTML img tags. Background images set via CSS are completely invisible to this logic.

Using a caching plugin or image optimisation plugin that applies its own lazy loading logic, potentially conflicting with or overriding the WordPress core behaviour.

The bottom line: native WordPress lazy loading is a starting point, not a complete solution for any site using a page builder or a performance plugin.

---

How to Add Lazy Load to WordPress Using Plugins

Plugins give you explicit control over which images get lazy loaded and which ones don’t. For most business sites, this is the right approach.

WP Rocket (Recommended for Most Sites)

WP Rocket is the most comprehensive option. It includes lazy loading for images, iframes, and videos as part of a broader performance package that also handles caching, CSS and JavaScript optimisation, and database cleanup.

The critical feature for 2026 is WP Rocket’s “Optimize Critical Images” setting, which uses machine learning to identify above-the-fold content and automatically excludes it from lazy loading. For most sites, this gets the LCP exclusion right without any manual configuration.

To enable it: go to Settings, then WP Rocket, then the Media tab. Enable lazy loading for images and iframes. Enable the Optimize Critical Images option. Save and test.

WP Rocket is a premium plugin starting at around $59 per year for a single site. For a business site where page speed directly affects lead generation and rankings, it pays for itself quickly.

Perfmatters

Perfmatters is a lightweight performance plugin that gives you granular control without the full overhead of WP Rocket. You can exclude specific images from lazy loading by URL, CSS class, or by specifying the number of images to skip from the top of each page.

For a site where WP Rocket feels like more than you need, Perfmatters is a precise, low-footprint alternative.

Smush

Smush is primarily an image compression plugin, but its free tier includes lazy loading. It handles lazy loading for images and videos, with options to exclude specific images.

If you’re already using Smush for image compression, enabling lazy loading there is more efficient than adding a separate plugin. Avoid running both Smush’s lazy loading and WP Rocket’s lazy loading simultaneously. Conflicting lazy loading implementations are one of the most common causes of broken LCP scores.

The “Lazy Load by WP Rocket” Plugin (Free)

This free standalone plugin from WP Rocket handles lazy loading for images, iframes, and videos. It’s lightweight and focused on one job. A good option if you want plugin-based lazy loading without the full WP Rocket package.

How to Enable Lazy Loading Without a Plugin

If you prefer not to add a plugin, or if your site’s native WordPress lazy loading isn’t working correctly for specific images, you can control it directly in the HTML.

Using the Native Loading Attribute

For any img tag in your theme templates or page builder custom code, you control lazy loading with a single attribute.

To lazy load an image below the fold:

html

<img src="image.jpg" loading="lazy" width="800" height="600" alt="Description">

To eagerly load a critical above-the-fold image:

html

<img src="hero-banner.jpg" loading="eager" fetchpriority="high" width="1200" height="800" alt="Description">

Notice the width and height attributes. These are not optional. Defining image dimensions prevents layout shifts by reserving space before the image loads, which keeps your CLS score low. Always include them.

The fetchpriority=”high” attribute tells the browser’s preload scanner to fetch this image as a top priority, even before other non-critical resources. For your LCP hero image, this is the single most impactful HTML change you can make.

Using WordPress Filters to Exclude Specific Images

If you’re comfortable editing your theme’s functions.php file or using a code snippets plugin, you can tell WordPress core to exclude specific images from lazy loading:

php

add_filter( 'wp_lazy_loading_enabled', function( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'the_post_thumbnail' === $context ) {
        return false;
    }
    return $default;
}, 10, 3 );

This example disables lazy loading specifically for featured images displayed via the_post_thumbnail(), which is the most common LCP element on blog post pages.

For more targeted control, you can also add a CSS class like no-lazy to specific images in your page builder and then use a filter to exclude images with that class from lazy loading.

Lazy Loading and Image Formats: What to Serve in 2026

Lazy loading defers when images load. Image format determines how heavy those images are when they do load. Both matter for performance.

AVIF is the gold standard image format in 2026. It offers 30 to 50% smaller file sizes compared to WebP with identical visual quality. Chrome, Firefox, and most modern browsers support it. For any image-heavy site, switching to AVIF for your primary image format produces the largest single improvement in LCP scores.

WebP is the reliable fallback. It’s 25 to 35% smaller than JPEG at similar quality, widely supported across all modern browsers, and the format WordPress generates by default since version 5.8. If you’re not yet serving WebP, that’s the starting point.

JPEG and PNG remain appropriate as final fallbacks for older browsers, but they should not be your primary served format in 2026.

The practical implementation: use an image optimisation plugin like ShortPixel, Imagify, or Smush that automatically converts uploaded images to WebP or AVIF and serves them to supported browsers, with JPEG or PNG fallbacks for browsers that need them. Combine this with lazy loading for below-the-fold images and you’ve addressed the two biggest causes of slow LCP on most WordPress sites.

Always compress images before uploading. A hero image saved at full resolution from a camera (4 to 8MB) should be compressed to under 200KB before it ever touches your media library. Even with lazy loading in place, the images that do load immediately should load fast.

Lazy Loading Videos and Iframes

The same principle applies to embedded videos and iframes. A YouTube or Vimeo embed loaded immediately adds significant page weight because it loads the entire video player JavaScript, thumbnails, and player assets as soon as the page loads, even if the video is at the bottom of the page.

Add loading=”lazy” to iframes the same way you add it to images:

html

<iframe src="https://www.youtube.com/embed/VIDEO_ID" loading="lazy" width="560" height="315"></iframe>

For YouTube embeds specifically, using a “facade” technique is even more effective. Instead of embedding the full YouTube player, you display just the video thumbnail as a static image. When the user clicks it, the real YouTube player loads. This keeps your initial page payload minimal while still making the video accessible. WP Rocket and several dedicated YouTube facade plugins handle this automatically.

How to Test Whether Your Lazy Loading Is Working Correctly

Implementation without testing is guesswork. Here’s how to verify everything is set up correctly.

Check your LCP element first. Open PageSpeed Insights and run your homepage and key landing pages. Look at the LCP diagnostic section. It shows you exactly which element is your LCP and how long it took to load. If your hero image is loading in over 2.5 seconds, and it’s being lazy loaded, that’s the fix.

Check the HTML source. Right-click your hero image and select Inspect in Chrome DevTools. Look at the img tag in the HTML. If you see loading=”lazy” on an above-the-fold image, that needs to change to loading=”eager” with fetchpriority=”high”.

Check Google Search Console. Navigate to Experience, then Core Web Vitals. Look for pages with “Poor” or “Needs Improvement” LCP scores. Those are the pages where your lazy loading configuration needs attention. Search Console uses real CrUX field data over a 28-day rolling window, so changes you make today appear in the report roughly 4 to 6 weeks later.

Scroll through your pages. Images below the fold should have a visible loading delay as you scroll to them. If all images load immediately, lazy loading isn’t active. If above-the-fold images show a delay before appearing, your LCP element is being deferred when it shouldn’t be.

Common Lazy Loading Mistakes That Hurt WordPress SEO

Lazy loading the LCP image. Covered throughout this guide, but worth restating: this is the single most common and most damaging mistake. Check every key page.

Running multiple lazy loading implementations simultaneously. WP Rocket’s lazy loading plus Smush’s lazy loading plus a3 Lazy Load all active at once creates conflicts that produce unpredictable results. Pick one implementation and disable the others.

Not defining image dimensions. Images without explicit width and height attributes cause layout shifts as they load. Every image on your site should have both attributes set. This is not optional for a passing CLS score.

Lazy loading images in the first viewport on mobile. Mobile screens are smaller, which means more images appear above the fold on mobile than on desktop. An image that’s safely below the fold on a 1920px wide desktop might be fully visible on a 375px wide phone. Test lazy loading behaviour on mobile separately.

Using only a Lighthouse score as your benchmark. Lighthouse runs in a controlled lab environment. Google uses real CrUX field data to evaluate your Core Web Vitals for ranking purposes. A 95 Lighthouse score does not guarantee passing Core Web Vitals in Search Console. Always check field data, not lab scores.

Lazy Loading and Its Connection to Your Broader SEO Performance

Lazy loading is one part of a larger page speed and technical SEO picture. It addresses the when of image loading. But the how is equally important.

The fastest lazy loading implementation on an unoptimised site with 5MB uncompressed images, no caching, and slow hosting still won’t pass Core Web Vitals. Each element needs to work together.

Image optimisation handles the weight of individual files. Caching reduces how often the server generates fresh page responses. A content delivery network (CDN) reduces the physical distance between your server and your user. Good hosting ensures the server responds quickly in the first place. And lazy loading ensures below-the-fold images don’t compete with critical above-the-fold content for bandwidth during the initial load.

Our guide on tools to improve WordPress page load time covers the full stack of performance optimisations that work alongside lazy loading. If your Core Web Vitals scores are still struggling after fixing lazy loading, hosting quality and caching configuration are usually the next places to look.

For WordPress sites built for business, page speed directly affects lead generation. A page that loads in under 2 seconds converts measurably better than one loading in 4 seconds, regardless of how good the content or design is. The organic SEO traffic that performance improvements unlock compounds over time: better Core Web Vitals push rankings up, more visibility drives more traffic, and faster pages convert that traffic more efficiently.

Frequently Asked Questions: Lazy loading in wordpress

Getting WordPress performance right requires looking at lazy loading, image formats, caching, and hosting together, not any single fix in isolation. The SEO24 team in Toronto helps WordPress businesses diagnose exactly what’s holding their Core Web Vitals back and fix it systematically. Our WordPress maintenance and support service keeps your site fast, secure, and optimised on an ongoing basis. Start with a free SEO audit to see where your site stands today.