WordPress Lazy Loading: How to Speed Up Your Site by Deferring Images and Iframes

Every image and iframe on a WordPress page has to be fetched from a server before it can display. For pages with a lot of media — product galleries, image-heavy blog posts, embedded videos — loading everything at once wastes bandwidth and slows down the initial page render. Users end up waiting for content they may never scroll to.

Lazy loading solves this by deferring the loading of off-screen elements until the user scrolls near them. It’s one of the simplest performance wins available, and WordPress ships with it enabled by default.

This guide covers how lazy loading works in WordPress, what it affects, common pitfalls, and when to go beyond the built-in defaults.

What Lazy Loading Actually Does

When a browser loads a page, it normally fetches all images, iframes, and other embedded media in the HTML — regardless of whether they’re visible in the viewport. On a page with 20 images, that means 20 HTTP requests initiated immediately, even if the user only sees the top two.

Lazy loading adds loading="lazy" to <img> and <iframe> tags. This tells the browser to skip fetching those elements until they’re close to entering the viewport. The result: faster initial page load, lower bandwidth usage, and better scores on performance metrics like Largest Contentful Paint (LCP) and Time to Interactive (TTI).

The loading attribute is part of the HTML standard and is supported by all major browsers (Chrome, Firefox, Edge, Safari). No JavaScript is required.

How WordPress Handles Lazy Loading

WordPress has applied loading="lazy" to images by default since version 5.5, released in August 2020. Since WordPress 5.9, the same attribute is applied to iframes by default.

This means most WordPress sites already have basic lazy loading in place without any plugin configuration. The wp_lazy_loading_enabled filter controls the behavior if you need to customize it programmatically.

What WordPress lazy loads by default:

• All <img> elements added through the media library or blocks
• <iframe> elements added via the block editor (Gutenberg)

What WordPress does not lazy load by default:

• Background images set via CSS (background-image)
• Images added inline via custom HTML with no loading attribute
• Some third-party embeds that generate their own <iframe> code

The LCP Exception: Don’t Lazy Load Your Hero Image

The most important thing to understand about lazy loading is when not to use it.

Lazy loading off-screen images improves performance. Lazy loading the first visible image — typically your hero image, featured image, or above-the-fold banner — makes performance worse.

When the largest visible element is lazy loaded, the browser delays fetching it until after the initial render, which directly increases your Largest Contentful Paint (LCP) score. Google PageSpeed Insights will flag this as “Largest Contentful Paint image was lazily loaded.”

WordPress addresses this by setting loading="eager" on the first image in the content area. However, this heuristic doesn’t always get it right — especially with page builders, custom themes, or featured images displayed via template code outside the main content loop.

To verify your LCP image isn’t being lazy loaded, open Chrome DevTools, go to the Elements panel, find the hero or featured image, and check its loading attribute. It should either be absent or set to eager. If it says lazy, that’s a bug to fix.

Plugins That Extend Lazy Loading

WordPress core lazy loading covers standard images and iframes. Plugins extend this to scenarios core doesn’t handle.

WP Rocket — WP Rocket includes lazy loading for images and iframes, plus a “replace YouTube iframes with thumbnails” feature that swaps embedded YouTube players with a static preview image until the user clicks. This eliminates the performance cost of loading YouTube’s scripts entirely. WP Rocket is a paid plugin available at wp-rocket.me.

Smush — The free tier includes lazy loading for images, including those in galleries and sliders that might not be handled by core. Available in the WordPress plugin directory.

a3 Lazy Load — Handles background images, videos, and other elements that the native loading attribute can’t reach. Also supports threshold configuration (how close to the viewport an element needs to be before loading triggers).

For most sites, WordPress core’s built-in behavior plus a caching/performance plugin like WP Rocket covers everything needed.

Lazy Loading and CSS Background Images

The HTML loading="lazy" attribute only works on <img> and <iframe> elements. It has no effect on CSS background images, which are a common source of large, unoptimized assets — especially in themes that use full-screen background sections.

CSS background images aren’t lazy loadable natively. The standard approach is to use JavaScript-based lazy loading (typically via the Intersection Observer API) or to restructure the markup to use <img> elements with object-fit: cover instead of CSS backgrounds where performance matters.

If your theme uses CSS backgrounds for decorative purposes (patterns, subtle textures), those are usually small enough that lazy loading isn’t necessary. The bigger concern is large background images in hero sections — those should be optimized at the source (compressed, appropriately sized) rather than deferred.

Threshold and Behavior

Browsers implement a loading threshold — they begin fetching lazy-loaded elements before they’re actually in the viewport, based on the user’s scroll position and connection speed. This prevents visible gaps when users scroll quickly.

The threshold varies by browser and network condition. Chrome, for example, adjusts the threshold based on connection speed: on a slow connection, it fetches farther ahead; on a fast connection, the threshold is tighter. This behavior is automatic and not configurable through HTML attributes.

What this means in practice: don’t worry about users seeing blank spaces where images should be. The browser is designed to handle this gracefully.

Checking Your Current Setup

To audit lazy loading on your WordPress site:

1. Open your page in Chrome DevTools (F12 → Elements)
2. Use Ctrl+F / Cmd+F to search for loading=
3. Verify that above-the-fold images have loading="eager" or no loading attribute
4. Verify that below-the-fold images have loading="lazy"

Alternatively, run your URL through Google PageSpeed Insights. The “Opportunities” section will surface any lazy loading issues, including the critical “LCP image was lazily loaded” warning.

How Hosting Affects Lazy Loading Performance

Lazy loading defers when images load, but it doesn’t affect how fast they load once requested. That’s determined by your server response time, CDN configuration, and image optimization.

A managed WordPress host like Rocket.net handles several of the variables that affect image delivery performance:

• Global CDN — Images and static assets are served from edge locations close to the user, reducing transfer time regardless of when the request fires.
• HTTP/2 and HTTP/3 support — Modern protocols reduce the overhead of multiple concurrent requests, which matters on pages with many images.
• Fast TTFB — The faster the server responds to the initial page request, the sooner the browser can parse the HTML, identify lazy-loadable elements, and begin scheduling fetches.

Lazy loading on a slow host still results in slow image loads. The two optimizations work together: defer what you can, and make the server fast for everything else.

Summary

Lazy loading is a well-supported, low-effort performance improvement that WordPress enables by default. The main things to verify:

• Your LCP (hero/featured) image is not lazy loaded — it should be eager or unset
• Below-the-fold images and iframes are lazy loaded — this is the default in WordPress 5.5+
• CSS background images are handled separately if they’re performance-relevant

For most WordPress sites, the defaults are correct. Check your LCP image, and consider a performance plugin if you have YouTube embeds or CSS background images you want to defer.

If you’re looking to go further on WordPress performance, Rocket.net offers managed WordPress hosting built around speed — with enterprise CDN, automatic caching, and infrastructure tuned specifically for WordPress.