Enable Lazy Load in WordPress
Lazy load is already on in WordPress: since version 5.5 core adds loading="lazy" to images with width and height, and since 5.7 to iframes. You only need to check it works, keep the hero image eager so LCP does not suffer, and run a single plugin loader only for backgrounds or video thumbnails.
For WordPress site owners in India improving PageSpeed scores and mobile load times without breaking the hero image.
knowledge
- Read time
- 7 min
- Sections
- 9
- Updated
- 14 Nov 2026
- Written by
- WebJi® team
Last editorial update: 14 November 2026.
Is lazy load already enabled in WordPress?
Yes. WordPress has added loading="lazy" to images automatically since version 5.5 and to iframes since 5.7, so there is no setting to switch on. The browser then delays each image until the visitor scrolls near it, saving data on mobile connections.
| Version | Change |
|---|---|
| 5.5 | loading="lazy" added to images that have width and height attributes |
| 5.7 | The same attribute added to iframes, such as YouTube and Maps embeds |
| 5.9 | The first content image is left eager, so a post’s lead picture is not deferred |
| 6.3 | Core adds fetchpriority="high" to the image it judges most likely to be the largest on screen |
Images without width and height are skipped, because the browser could not reserve space for them. Pictures uploaded through the media library always carry dimensions; <img> tags pasted into a Custom HTML block often do not.
How do you check that lazy loading is working?
Open a published post while logged out, inspect an image far down the page, and look for loading="lazy" in its tag. Then confirm the hero image has loading="eager" or no loading attribute at all.
- In Chrome, open DevTools (F12), select Network, filter by Img and tick Disable cache.
- Reload without scrolling and note which images were requested.
- Scroll slowly; new image requests should appear as each picture approaches the screen.
- Run the URL through PageSpeed Insights on mobile. A “Defer offscreen images” warning means some images below the fold still load upfront.
Chrome begins fetching a lazy image some distance before it enters view — about 1,250 pixels on a fast connection — so requests appearing slightly early is normal. If no image on the page carries the attribute, a theme option or plugin is stripping it; turn that off rather than adding another plugin.
Which images should never be lazy-loaded?
Keep the hero image, logo, first banner and first carousel slide eager, because they are visible before anyone scrolls. A lazy hero delays Largest Contentful Paint (LCP), the Core Web Vital that measures when the biggest visible element finishes loading.
WordPress’s “skip the first image” rule counts images in the HTML, not on screen. If a small logo or icon comes first and the large hero second, the hero can still end up lazy. Exclude it by CSS class with a short filter in a child theme or a code-snippets plugin:
add_filter( 'wp_img_tag_add_loading_attr', function ( $value, $image ) {
if ( str_contains( $image, 'hero-image' ) ) {
return false; // no loading attribute: the browser loads it eagerly
}
return $value;
}, 10, 2 );Add the class hero-image to that image under Block → Advanced → Additional CSS class. To keep the first two or three images eager on every page instead, raise the count with the wp_omit_loading_attr_threshold filter.
When should you use LiteSpeed Cache or a plugin for lazy loading?
Use a plugin only for what core cannot do: excluding images without code, lazy-loading CSS background images, or replacing video embeds with click-to-play thumbnails. Run exactly one lazy loader, because two on the same page leave images blank.
On hosting with LiteSpeed Cache, open LiteSpeed Cache → Page Optimization → Media Settings, set Lazy Load Images to ON (and Lazy Load Iframes if embeds sit below the fold), then add the hero’s class under Media Excludes → Lazy Load Image Class Name Excludes. Save, choose Purge All from the admin bar and recheck in a private window.
| Tool | Use it when |
|---|---|
| WordPress core | Always the default; nothing to install |
| LiteSpeed Cache | It is already your cache plugin and you want exclusions without code |
| Perfmatters or WP Rocket | You need CSS background lazy loading or YouTube preview thumbnails, and it replaces every other loader |
LiteSpeed Cache needs a LiteSpeed web server to do its page caching; LiteSpeed hosting explains the difference and LiteSpeed vs Apache compares the servers.
How do you lazy-load YouTube videos and maps?
Embeds added with the core YouTube or Maps blocks already get loading="lazy", so the player downloads only when the frame nears the screen. That defers the request but still loads the full player once it does.
A click-to-play facade goes further: it shows a thumbnail and loads the YouTube player script only after a click, which can save several hundred kilobytes of JavaScript per video. That feature lives in a performance plugin, not in core. If a video is the first thing on the page, leave it eager — it is likely the LCP element.
Why do lazy-loaded images stay blank or make the page jump?
Blank images almost always mean two lazy loaders are fighting; jumping layout means images are missing width and height. Both are fixed in minutes once you know the cause.
| Symptom | Cause | Fix |
|---|---|---|
| Images blank until a second scroll | Two loaders active | Keep one, disable the rest, purge cache |
| Text jumps as images appear | No width and height | Insert images from the media library or add dimensions |
| LCP worse after a change | Hero image lazy | Exclude it; check it gets fetchpriority="high" |
| Images never appear | JavaScript error before the loader runs | Check the console; disable plugins one at a time |
To turn lazy loading off site-wide, add add_filter( 'wp_lazy_loading_enabled', '__return_false' ); to a child theme or snippets plugin, switch off any plugin loader, and purge the cache. Lazy loading does not speed up the server’s first response; if PageSpeed still reports a slow server after images are deferred, the next steps are caching and hosting, covered in how to speed up a WordPress website.
Frequently asked questions
Does lazy loading hurt image SEO?
Not with native lazy loading. The image URL stays in the HTML src, so Google can find and index it. Problems arise only with older JavaScript loaders that hide the real URL in a data attribute without a fallback, or when the largest visible image is deferred and LCP slows down.
Does lazy loading work for CSS background images?
No. The loading attribute applies only to img and iframe elements. Background images set in CSS load when the stylesheet applies them. If a background is your hero, preload it with a link tag; if it sits lower on the page, a plugin with background lazy loading can defer it.
Should I compress images as well as lazy-loading them?
Yes. Lazy loading changes when an image downloads, not how big it is. Serving WebP or AVIF at the size actually displayed cuts the bytes for every image, including the eager hero. See converting WordPress images to WebP.
Does lazy loading help on slow mobile networks in India?
Yes, especially on long posts and product listings. Visitors who leave before scrolling never download the lower images, which saves their mobile data and frees bandwidth for the content they do see. Chrome widens its early-fetch distance on slower connections so images are still ready when reached.
Last editorial update: 14 November 2026.
Ready to get started with WebJi®?
Join 12,000+ businesses across India and overseas. INR pricing, 18% GST shown before payment and 24/7 email support in Hindi and English — average first reply under 60 minutes.