How to Enable Lazy Loading for Images in WordPress (and When Not To)

Lazy loading means images and videos lower down the page only load when the visitor scrolls near them. The page appears faster, uses less data on mobile and scores better in PageSpeed Insights. WordPress already includes it, but a few settings make a big difference.

WordPress lazy loads images by default

Since WordPress 5.5, images in posts and pages get the loading="lazy" attribute automatically, and iframes followed in 5.7. Recent versions also skip lazy loading for the first big image so it loads straight away. For most sites, images are already handled.

The mistake: lazy loading the hero image

The largest image at the top of the page (hero banner, featured image, slider) should load immediately. If a theme, page builder or plugin forces lazy loading on it, Largest Contentful Paint gets worse. In PageSpeed Insights, look for "Largest Contentful Paint image was lazily loaded". Fix it by:

• Excluding that image in your speed plugin's lazy load settings (most allow excluding by class or file name, or "skip first X images").
• Using a normal image widget for the hero instead of a CSS background where possible.

Lazy load YouTube embeds

Each YouTube embed loads a large amount of script. Speed plugins such as WP Rocket, LiteSpeed Cache, Perfmatters and others can replace the embed with a preview image that loads the player only when clicked. Elementor's Video widget also has an "Image Overlay" option with lazy load.

Background images

CSS background images are not covered by native lazy loading. Many speed plugins and Elementor's performance settings offer lazy loading for background images; enable it for sections below the fold.

Check the result

1. Run PageSpeed Insights on mobile before and after.
2. Scroll the page to confirm images appear smoothly without blank gaps.
3. Check that the hero image is not lazy loaded.

Lazy loading works best alongside compressed images; see how to optimize images and the full speed optimization guide.