How to Enable Lazy Loading for Images in WordPress?
Lazy loading delays the loading of off-screen images until a visitor actually scrolls close to them, instead of forcing the browser to download every image on a page the instant it loads, even the ones at the very bottom that most visitors will never see. On an image-heavy post, this can be the difference between a page that loads in two seconds and one that loads in eight.
The good news is that you very likely don't need a plugin for this at all: WordPress has added native lazy loading to core since version 5.5, and it's been on by default since 5.9. This guide covers how to confirm it's actually working on your site, how to tune or exclude it where the default behavior gets in the way, and when a dedicated plugin is still worth adding on top.
How Native Lazy Loading Works in WordPress
Since WordPress 5.5, core automatically adds loading="lazy" to <img> tags rendered through functions like the_content(), wp_get_attachment_image(), and get_avatar(), using the browser's own native lazy-loading feature rather than any custom JavaScript. loading="lazy" is a standard HTML attribute, supported in every major browser (Chrome, Firefox, Safari, and Edge), that tells the browser to defer fetching that image until it's within a rough distance of the viewport.
This means for most sites, running WordPress 5.5 or newer, lazy loading for content images is already on, without a plugin, a code snippet, or a setting to find in the dashboard.
There's one deliberate exception: WordPress skips adding loading="lazy" to the very first image likely to appear "above the fold" in the main content loop, since lazy-loading an image the visitor sees immediately would actually slow down the perceived load, not speed it up. Core estimates this using a simple counter (currently the first content image encountered), not real viewport detection.
Step 1: Confirm It's Actually Enabled
Don't assume; verify. Right-click any image well below the fold on one of your posts, choose Inspect, and check the <img> tag in the DOM for a loading="lazy" attribute:
<img src="/wp-content/uploads/2026/09/example.jpg" loading="lazy" alt="Example" width="1200" height="630" />
If you don't see it, the most common causes are:
- A caching or optimization plugin is stripping it. Some minification tools rewrite
<img>tags and drop attributes they don't recognize; check the plugin's HTML minification settings for an option to preserve or excludeloadingattributes. - The image is being output by custom theme code that builds its own
<img>tag directly (with raw HTML orecho) rather than going through a WordPress function likewp_get_attachment_image(), bypassing the filter that adds the attribute automatically. - The theme or a plugin has explicitly disabled it, which is covered in the next section.
Step 2: Check Whether Something Has Disabled It
Native lazy loading is controlled by the wp_lazy_loading_enabled filter, and it's common for older SEO or performance plugins (written before core added this feature) to disable it by default to avoid what they assume is a conflict with their own custom lazy-loading implementation. Search your theme's functions.php and any custom plugins for this filter:
grep -r "wp_lazy_loading_enabled" wp-content/
If you find something like this disabling it entirely, you can safely remove it (assuming you don't have a good separate reason to lazy-load a different way):
// Remove this if you find it — it disables native lazy loading site-wide.
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Step 3: Exclude Specific Images From Lazy Loading
The one image you generally don't want lazy-loaded is your Largest Contentful Paint (LCP) element — usually a large hero image or featured image visible immediately on page load. Lazy-loading it delays the very metric Core Web Vitals measures, since the browser now waits to even start requesting it until JavaScript confirms it's in view.
WordPress core already excludes the first detected content image automatically, but if a large hero image sits outside the main content loop (in a template part, for example), you can exclude it explicitly with the wp_img_tag_add_loading_attr filter, matched against the image's src:
add_filter( 'wp_img_tag_add_loading_attr', function ( $value, $image, $context ) {
if ( str_contains( $image, 'hero-banner.jpg' ) ) {
return false;
}
return $value;
}, 10, 3 );
Returning false tells WordPress to skip adding loading="lazy" to that specific <img> tag, leaving it to load immediately the way any critical above-the-fold image should.
For a hero image, going a step further and adding fetchpriority="high" explicitly tells the browser to prioritize it over other resources competing for bandwidth at the start of the page load:
add_filter( 'wp_get_attachment_image_attributes', function ( $attr, $attachment ) {
if ( $attachment->ID === (int) get_theme_mod( 'hero_image_id' ) ) {
$attr['fetchpriority'] = 'high';
unset( $attr['loading'] );
}
return $attr;
}, 10, 2 );
Step 4: Lazy Load Iframes and Embeds Too
Native lazy loading isn't limited to images. WordPress also adds loading="lazy" automatically to <iframe> tags generated through wp_oembed_get() (used for embeds like YouTube videos), but if your theme or a page builder outputs raw <iframe> markup directly (a Google Map embed pasted into a Custom HTML block, for example), it won't get the attribute automatically. Add it yourself:
<iframe
src="https://www.google.com/maps/embed?..."
loading="lazy"
width="600"
height="450"
style="border:0;"
></iframe>
This works exactly the same way as it does on <img> tags: the browser defers loading the iframe's content until it's near the viewport, which matters especially for embeds like maps and video players that pull in a meaningful amount of their own JavaScript and network requests.
When a Lazy Loading Plugin Is Still Worth Using
Native lazy loading covers the basic case well, but a dedicated plugin (like a3 Lazy Load, or the lazy-loading module bundled into an all-in-one performance plugin like WP Rocket) can still add value if you need:
- A blur-up or low-quality placeholder effect while the full image loads in, which native
loading="lazy"doesn't provide on its own since it's just an HTML attribute with no visual transition. - Lazy loading for CSS background images, which the
loadingattribute cannot apply to at all, since it's a property of<img>and<iframe>elements only. A plugin can rewritebackground-imagedeclarations to load via JavaScript once the element scrolls into view. - More aggressive control over the loading threshold (how far from the viewport an image should start loading), where native lazy loading leaves the exact distance up to the browser's own implementation rather than exposing a setting you can tune.
If you're already running a comprehensive caching plugin as part of a broader effort to speed up your WordPress website, check whether it already includes a lazy-loading module before adding a second, separate plugin dedicated to it alone.
Frequently Asked Questions (FAQ) About Lazy Loading in WordPress
No, not for standard content images. WordPress has enabled native lazy loading (loading="lazy") by default since version 5.9, using the browser's built-in feature rather than a plugin. A plugin is only worth adding for extras like blur-up placeholders or lazy-loading CSS background images.
This is intentional. WordPress core skips adding loading="lazy" to the first detected content image, on the assumption that it's likely visible immediately when the page loads, and lazy-loading a visible image would slow down the perceived page load instead of speeding it up.
No, and it can help. Google's crawler executes JavaScript and understands loading="lazy" correctly, so lazy-loaded images are still indexed. Meanwhile, faster page loads directly support your Core Web Vitals scores, which are a ranking factor.
Not with native loading="lazy" — that attribute only applies to img and iframe elements. Lazy-loading CSS background-image declarations requires JavaScript, either custom code or a dedicated lazy-loading plugin that handles this case specifically.
It's most likely being lazy-loaded when it shouldn't be, because it sits outside the area WordPress core auto-detects as the first content image. Use the wp_img_tag_add_loading_attr filter shown above to exclude it explicitly, and consider adding fetchpriority="high" to prioritize it.
Open your browser's DevTools, go to the Network tab, filter by Img, and reload the page without scrolling. You should see only the images near the top of the page requested immediately; the rest should appear in the network list only as you scroll down toward them.
It can, particularly with sliders that show multiple slides in a hidden, off-screen state, since the browser may not realize those images are about to become visible. If a slider's images fail to load when navigating slides, check whether the slider plugin already disables lazy loading for its own images, or exclude them with the filter shown in Step 3.
Conclusion
For the vast majority of WordPress sites, lazy loading for images is already enabled and working correctly without any action on your part, since it's been a core, on-by-default feature since WordPress 5.9. The real work is in verifying it's actually active, making sure nothing (an older plugin, a minifier, custom template code) is silently disabling it, and making a deliberate exception for the one image that should never be lazy-loaded: whatever counts as your page's Largest Contentful Paint element.
Beyond that, native lazy loading handles the common case well enough that a dedicated plugin is only worth adding for specific extras like blur-up placeholders or CSS background image support, not for the core behavior itself.
Here are a few additional resources if you want to go deeper:
- WordPress Developer Reference: wp_lazy_loading_enabled — the filter reference for enabling or disabling lazy loading site-wide.
- web.dev: Browser-level image lazy loading — how native loading="lazy" works under the hood across browsers.
- Google: Optimize Largest Contentful Paint — guidance on identifying and excluding your LCP element from lazy loading.
