How to Lazy-Load Images in WordPress
Speed Optimization
How to Lazy-Load Images in WordPress
Lazy-loading images is one of the most effective ways to improve website speed, reduce page size, and boost your Core Web Vitals score. When lazy load is enabled, images load only when they become visible on the screen — significantly reducing initial loading time. In this guide, you’ll learn how to enable lazy-loading in WordPress safely using built-in features, plugins, page builders, and advanced optimization settings.
1
What Is Lazy Loading in WordPress?
Images load only when the user scrolls to them.
Lazy loading defers the loading of images until they appear in the viewing area (viewport). This reduces initial page weight and speeds up LCP, INP, and other Core Web Vitals metrics.
Benefits of lazy loading:
- Faster page load time
- Lower bandwidth usage
- Better Google PageSpeed score
- Improved Core Web Vitals
- Faster mobile experience
2
WordPress Has Built-In Lazy Loading
Native lazy loading is enabled by default since WordPress 5.5.
WordPress automatically adds the loading=”lazy” attribute to images. This is built-in and requires no additional setup.
However, native lazy loading has limitations:
- It doesn’t optimize image size
- Some themes override the attribute
- It may lazy load above-the-fold images
To optimize fully, you should use plugin-based lazy loading.
3
Enable Lazy Load Using LiteSpeed Cache
Best lazy-loading solution for WordPress.
Steps:
- Install & activate LiteSpeed Cache
- Go to LiteSpeed Cache → Page Optimization → Media
- Enable:
- Lazy Load Images
- Lazy Load Iframes
- Lazy Load Placeholder (recommended)
LiteSpeed also supports LQIP (Low Quality Image Placeholder), which improves visual stability (CLS).
4
Enable Lazy Load Using WP Rocket
Premium solution with excellent compatibility.
Steps:
- Go to WP Rocket → Media
- Enable:
- Lazy Load Images
- Lazy Load Iframes
- Replace YouTube iframe with preview image
This greatly reduces JavaScript execution and page weight.
5
Enable Lazy Load Using Autoptimize
Lightweight and compatible with most themes.
Autoptimize offers simple lazy loading with minimal configuration.
Steps:
- Go to Settings → Autoptimize → Images
- Enable:
- Lazy-load Images?
- Lazy-load Background Images?
6
How to Lazy-Load Background Images
Background images do NOT lazy-load by default.
Page builders like Elementor often use background images that load immediately, even if off-screen.
Ways to lazy-load background images:
- Use Autoptimize → Lazy Load Background Images
- Use LiteSpeed → Lazy Load for Background
- Convert background images into <img> elements if possible
This can dramatically improve LCP scores.
7
Exclude Above-the-Fold Images from Lazy Loading
Lazy-loading your hero image harms LCP.
Do NOT lazy-load these:
- Hero image
- Logo
- Featured image in the first viewport
- Key product images
Most plugins automatically do this, but always double-check using PageSpeed Insights.
8
How to Test If Lazy Loading Works
Verify performance improvements.
Test using:
- PageSpeed Insights → Diagnostics → “Defer offscreen images”
- GTmetrix Waterfall → Image loading order
- Browser DevTools → Network tab → Scroll simulation
If lazy load is working, only the first few images load initially.
Want Perfect Core Web Vitals?
SiteCrafted templates are pre-optimized for lazy loading, WebP, caching, and CWV performance.
FAQ
Q: Does WordPress enable lazy load automatically?
Yes, but advanced features require plugins.
Q: Does lazy loading help Core Web Vitals?
Yes. It improves LCP and reduces page size.
Q: Should I lazy-load all images?
All except hero, logo, and above-the-fold images.
SC
SiteCrafted Team
Helping WordPress users build super-fast, optimized websites.
