Lazy loading helps improve page speed by deferring the loading of images, iframes until they actually appear inside the user’s viewport. This reduces unnecessary resource loading and improves overall performance—especially on media-heavy pages.
📌 Image & Media Lazy Loading
Lazy Load Images
Loads images only when the user scrolls near them.
This reduces initial page weight and significantly improves Largest Contentful Paint (LCP).
Lazy Load Iframes
Delays loading of embedded content (e.g., YouTube, Vimeo, Maps) until visible.
Greatly improves page responsiveness and reduces early network requests.
📌 Exclude Critical Elements
List CSS selectors or post IDs that should NOT be lazy loaded.
Examples:
.logo, #hero-banner, .important-class, 123
Useful for:
Logos
Above-the-fold images
First-screen hero sections
LCP elements
📌 Additional Settings
Enable Responsive Image Support (srcset/picture)
Keeps native WordPress responsive image features enabled during lazy loading.
Ensures browsers choose the best-size image for every screen resolution.
📌 Custom Placeholder Image
Use a custom placeholder while images are lazy loaded.
Examples:
A branded loading icon
A blurred tiny preview
A spinner GIF
To set a custom placeholder:
Click Upload
Select your placeholder from the Media Library
The URL will appear in the field below
The placeholder will be shown until the real image loads.
💾 Save Settings
Click Save Settings to apply your lazy loading configuration.
Your website will immediately begin lazy loading content based on your selections.