Lazy loading defers the download of images outside the viewport until the user scrolls to them. The payoff is immediate: less data on the initial load, a better LCP score, and faster-feeling pages.
Why Lazy Loading Matters in WordPress
A typical web page loads between 20 and 60 images. If a visitor only sees the top 20% of the page, they're still downloading 100% of the visual assets. That wastes bandwidth and delays the first render.
With lazy loading enabled, the browser downloads only the images that are currently visible. The rest load as the user scrolls. The concrete benefits are:
- Lower initial load time (fewer bytes on the first request).
- Better PageSpeed Insights and Lighthouse scores.
- Reduced data usage for mobile visitors.
- Improved experience on slow networks (3G, rural areas).
Method 1: The Native loading="lazy" Attribute
Since WordPress 5.5 (August 2020), the CMS automatically adds loading="lazy" to all images inserted from the media library. You don't need to install anything.
To verify it's working, view the source of your page (Ctrl + U) and look for an <img> tag. If you see loading="lazy", it's already active.
<img src="photo.jpg" loading="lazy" alt="description" width="800" height="450">Key requirement: the attribute only works properly if the image has explicit width and height declared. Without those dimensions, the browser can't reserve space and lazy loading loses effectiveness — and also causes CLS (layout shifts).
When Should You NOT Use loading="lazy"?
The hero or featured image — the first visible element on screen — should never have loading="lazy". Deferring that image hurts the LCP score. WordPress automatically excludes the first post image, but if your theme uses custom header images, double-check they don't carry the attribute.
Method 2: Cache or Performance Plugin
If you use a plugin like WP Rocket, W3 Total Cache, or LiteSpeed Cache, they have their own lazy loading implementations that go beyond the native HTML attribute:
- Support for iframes and embedded videos (YouTube, Vimeo), not just images.
- A solid-color or blurred placeholder shown while the real image loads.
- The ability to exclude specific images by CSS class or position.
In WP Rocket, the setting is under Media → LazyLoad. Also enable "Replace YouTube iframe" to prevent embedded videos from blocking the render.
In LiteSpeed Cache, go to LiteSpeed Cache → Image Optimization → Lazy Load and toggle it on. It also supports lazy loading of CSS background images (background-image), something the native attribute doesn't cover.
Method 3: Dedicated Image Optimization Plugin
Image optimization plugins also bundle lazy loading:
- Smush (free): clean dashboard with one-click activation and per-page or per-class exclusions.
- ShortPixel Adaptive Images: resizes images on the fly and applies lazy loading. Great if you can't reoptimize old content.
- Imagify: compresses and applies lazy loading; direct integration with WP Rocket.
If you already have WP Rocket or LiteSpeed Cache, don't duplicate lazy loading with a second plugin. Double implementation can cause images to never appear.
Verifying Lazy Loading Works
The most reliable method is Chrome DevTools:
- Open your page, press F12, and go to the Network tab.
- Filter by Img.
- Hard-reload the page (Ctrl + Shift + R) without scrolling.
- Only the images inside the visible viewport should download. Others will appear as you scroll down.
You can also use the web performance analysis at elenlace.com to identify off-screen images loading unnecessarily.
For a broader speed diagnosis, browse the articles in our performance category.
Key Takeaways
- WordPress 5.5+ adds
loading="lazy"automatically; ensure your images includewidthandheight. - The hero image (first visible element) must not have lazy loading — it hurts LCP.
- Plugins like WP Rocket or LiteSpeed Cache extend lazy loading to iframes and CSS backgrounds.
- Never activate two lazy loading systems simultaneously.
- Validate the result with Chrome DevTools or PageSpeed Insights.
Want us to audit your WordPress and apply every load optimization correctly? Reach out at elenlace.com for a free performance check.
FAQ
Does WordPress native lazy loading work in all browsers?
The loading="lazy" attribute is supported by Chrome, Edge, Firefox, and Safari (version 15.4+). In older browsers it's simply ignored and images load normally — no errors.
Can lazy loading negatively affect SEO?
No. Googlebot can render pages with lazy loading and crawl deferred images. Just make sure your images have descriptive alt attributes so they're indexed correctly.
Do I need to re-optimize old images for lazy loading to work?
The HTML attribute can be added to any existing image without re-optimizing it. However, if old images lack declared width and height, the browser can't reserve space and layout shifts (CLS) may appear.
What if I use Elementor or another page builder?
Some page builders like Elementor generate their own image markup and may conflict with theme-level lazy loading. Inspect your images in the browser to confirm the attribute is present. If it's missing, enable lazy loading inside Elementor itself (Elementor → Settings → Performance → Lazy Load Background Images).
Further reading
Other providers and guides worth comparing:
