Lazy Loading in WordPress — Complete Guide

When I audit WordPress sites for performance, one of the first things I check is whether lazy loading is working correctly. The concept is simple: instead of loading every image, iframe, and video on the page at once, you only load them when the user scrolls them into view. On a typical blog post with 10+ images, this can reduce initial page weight by 50-70% and dramatically improve load times.

WordPress has had native lazy loading since version 5.5, which was a huge step forward. But the built-in solution has limitations. In this guide, I'll cover everything: how native lazy loading works, when you need a plugin for more control, the best lazy loading plugins compared, how to test if it's working, and the common mistakes that actually hurt performance instead of helping it.

What Is Lazy Loading?

Lazy loading is a technique where images, iframes (like embedded YouTube videos), and other heavy resources are only loaded when they're about to become visible in the browser viewport. Instead of the browser downloading all 15 images on a page the moment it loads, it only downloads the 2-3 images visible "above the fold." As the user scrolls down, the remaining images load just before they come into view.

The performance benefits are significant. Fewer initial HTTP requests, less bandwidth consumed, faster Core Web Vitals scores, and a snappier experience — especially on mobile connections. Google explicitly recommends lazy loading as a performance best practice, and it's one of the most common recommendations in PageSpeed Insights audits.

WordPress Native Lazy Loading (Since WP 5.5)

Starting with WordPress 5.5 (released in August 2020), WordPress automatically adds the loading="lazy" attribute to all <img> tags in your post content. This is a native browser feature — no JavaScript required, no plugins needed. The browser handles everything.

Here's what WordPress does by default:

• Adds loading="lazy" to images in post and page content
• Adds loading="lazy" to images in comment sections
• Adds loading="lazy" to avatar images (Gravatars)
• Since WordPress 5.9, it skips the first content image — this is important because you don't want to lazy load above-the-fold images (more on this later)

The native approach works well for basic sites. If you run a simple blog with images in your posts, the built-in lazy loading is probably sufficient. You don't need to install anything — it just works.

However, native lazy loading has several limitations:

• No iframe support: WordPress doesn't add loading="lazy" to iframes (YouTube embeds, Google Maps, etc.) by default
• No video support: Native lazy loading doesn't handle <video> elements
• No background images: CSS background images can't be lazy loaded with the loading attribute
• No placeholder/blur-up effect: Images simply appear when loaded — no smooth fade-in or low-quality placeholder
• No threshold control: You can't configure how far in advance images start loading before they enter the viewport
• Theme images may be skipped: Images added directly by your theme (header images, widget images) might not get the lazy loading attribute

When You Need a Lazy Loading Plugin

If any of the following apply to your site, a dedicated lazy loading plugin is worth installing:

• You embed YouTube videos or Google Maps — iframes are heavy. A single YouTube embed loads 1-2MB of data even if the visitor never clicks play. A good lazy loading plugin replaces the iframe with a lightweight placeholder (thumbnail + play button) until the user clicks.
• Your theme uses CSS background images — hero sections, sliders, and parallax effects often use background-image in CSS. Only JavaScript-based lazy loading can handle these.
• You want visual placeholders — a blur-up effect or colored placeholder while images load provides a better user experience than a blank space suddenly being filled.
• You need more control over which images are excluded — sometimes you need to exclude specific images from lazy loading (logos, above-the-fold hero images, critical product images).
• You have a media-heavy site — portfolio sites, photography blogs, or WooCommerce stores with dozens of product images per page benefit significantly from more aggressive lazy loading.

Best Lazy Loading Plugins for WordPress

I've tested all the major lazy loading plugins over the years. Here are the three I recommend, depending on your needs and budget:

a3 Lazy Load — Best Free Option

a3 Lazy Load is the most comprehensive free lazy loading plugin. It handles images, iframes, videos, and even CSS background images. Setup takes about two minutes: install it, go to Settings → a3 Lazy Load, and the defaults are sensible. The plugin uses the Intersection Observer API, which is well-supported in all modern browsers.

I recommend enabling these settings:

• Lazy Load Images: On
• Lazy Load Videos: On
• Lazy Load iframes: On
• Skip images with class "no-lazy": This lets you exclude specific images by adding the CSS class no-lazy to them
• Effect: Choose "fadein" for a smooth appearance transition

Perfmatters — Best Lightweight Paid Option

Perfmatters ($24.95/year) is a performance-focused plugin that includes lazy loading plus dozens of other optimizations (disable unused scripts, DNS prefetching, local Google Analytics, script manager). If you want an all-in-one performance toolkit beyond just lazy loading, Perfmatters is excellent value.

Its lazy loading implementation is clean and uses the native loading="lazy" attribute where possible, falling back to JavaScript only when needed. The YouTube facade feature is particularly nice — it replaces YouTube iframes with a static thumbnail and play button, saving 1-2MB per embed.

WP Rocket — If You're Already Using It

If you already use WP Rocket as your caching plugin, don't install a separate lazy loading plugin. WP Rocket includes lazy loading for images and iframes, plus a YouTube facade feature. Go to WP Rocket → Media and enable "LazyLoad for images" and "LazyLoad for iframes and videos". Check the "Replace YouTube iframe with preview image" option to save bandwidth on YouTube embeds.

How to Test If Lazy Loading Is Working

After setting up lazy loading, you need to verify it's actually working. Here are three methods I use:

Method 1: Browser DevTools Network Tab

Open your site in Chrome or Firefox. Press F12 to open DevTools. Click the "Network" tab. Filter by "Img" to see only image requests. Now reload the page. You should see that only the above-the-fold images load initially. As you scroll down, new image requests should appear in the Network tab as each image enters the viewport.

Method 2: View Page Source

Right-click on your page and select "View Page Source". Search for loading="lazy". You should find this attribute on your image tags (except the first content image, which should not be lazy loaded). If you're using a JavaScript-based plugin like a3 Lazy Load, look for data-src attributes instead of regular src attributes on images below the fold.

Method 3: PageSpeed Insights

Run your page through PageSpeed Insights (pagespeed.web.dev). Look for the audit called "Defer offscreen images". If lazy loading is working correctly, this audit should show a green checkmark. If it still shows a warning, some images below the fold aren't being lazy loaded — usually theme images or images added via custom HTML that bypass the lazy loading mechanism.

Common Lazy Loading Mistakes (And How to Fix Them)

Lazy loading can actually hurt performance if implemented incorrectly. Here are the most common mistakes I see:

Mistake 1: Lazy Loading Above-the-Fold Images (Kills LCP)

This is the number one lazy loading mistake. If you lazy load your hero image, featured image, or any image that's visible when the page first loads (without scrolling), you're directly harming your Largest Contentful Paint (LCP) score. LCP measures how long it takes for the largest visible element to render — and that's often your hero image.

When you lazy load an above-the-fold image, the browser waits until the page is partially rendered, then the lazy loading script detects the image is in view, and then it starts downloading. This adds unnecessary delay to what should be a priority resource.

The fix: Exclude above-the-fold images from lazy loading. WordPress 5.9+ does this automatically for the first content image, but your theme's header image, logo, or hero banner may not be excluded. In a3 Lazy Load, add the CSS class no-lazy to these images. In WP Rocket, add data-no-lazy="1" as an attribute. Better yet, add fetchpriority="high" to your LCP image to tell the browser to prioritize it.

Mistake 2: Layout Shifts from Missing Dimensions

When a lazy-loaded image finally loads, it can push content around on the page — this is called a layout shift, and it hurts your Cumulative Layout Shift (CLS) score. This happens when your images don't have explicit width and height attributes.

The fix: Always set width and height attributes on your <img> tags. WordPress does this automatically when you insert images through the media library, but images added via custom HTML or page builders sometimes lack these attributes. When the browser knows the image dimensions in advance, it reserves the correct space even before the image loads, preventing layout shifts.

Mistake 3: Lazy Loading Critical JavaScript-Dependent Content

Some plugins and themes load images via JavaScript (sliders, galleries, lightboxes). If your lazy loading plugin tries to modify these images, it can conflict with the gallery plugin's own loading mechanism, resulting in broken images or double-loading.

The fix: Exclude JavaScript-powered galleries and sliders from lazy loading. Most lazy loading plugins let you exclude images by CSS class or by parent container. In a3 Lazy Load, you can specify exclusion classes under the settings. In WP Rocket, you can exclude entire page sections.

Mistake 4: Using Multiple Lazy Loading Solutions

If you're running WordPress 5.5+ (which adds native lazy loading), plus a caching plugin with lazy loading, plus a dedicated lazy loading plugin — you've got three systems trying to modify the same images. This can cause conflicts, broken images, or unnecessary JavaScript overhead.

The fix: Pick one lazy loading solution and disable the others. If you use WP Rocket, use its built-in lazy loading and don't install a3 Lazy Load. If you want the most control, use a3 Lazy Load and disable lazy loading in your caching plugin. WordPress's native lazy loading works alongside plugins because it uses the browser's built-in loading attribute, which doesn't conflict with JavaScript-based solutions.

Frequently Asked Questions

Does lazy loading affect SEO?

No. Google fully supports the loading="lazy" attribute and JavaScript-based lazy loading. Googlebot renders pages and scrolls through content, so lazy-loaded images are still indexed. The one caveat: make sure your images have proper alt attributes and that they're in standard <img> tags (not loaded exclusively via JavaScript without any HTML fallback). If Googlebot can find the image URL in the HTML, it will index it.

Should I lazy load all images?

No. Exclude your above-the-fold images — the ones visible without scrolling. This typically includes your site logo, header image, hero banner, and the featured image if it appears at the top of posts. Lazy loading these critical images delays their rendering and hurts your LCP score. Only lazy load images that are below the fold — the ones users have to scroll to see.

Does lazy loading work on mobile?

Yes, and it's even more important on mobile. Mobile connections are typically slower than desktop, so deferring offscreen images has a bigger impact on load times. The native loading="lazy" attribute is supported by all major mobile browsers (Chrome, Safari, Firefox, Samsung Internet). JavaScript-based lazy loading solutions like a3 Lazy Load also work perfectly on mobile devices.

Lazy loading is one of the simplest and most effective WordPress speed optimizations you can make. Get the implementation right — especially the above-the-fold exclusion — and you'll see immediate improvements in both load times and Core Web Vitals scores. For more performance wins, check out my guides on caching plugins and image optimization.