Smart LazyLoad – Lazy Load Images, Videos and Iframes

Images in post and page content, featured images, widget images, comments, avatars, and smilies, plus <picture> sources, inline background images, iframes (YouTube, Vimeo, and others), and native <video> elements. Turn on Full-Page Lazy Loading and anything your theme's templates output directly is covered too. Each content type has its own on/off toggle, so you decide what applies.

Most lazy load plugins stop at <img> tags. Smart LazyLoad also handles background images, <picture> responsive sources, videos, and iframes, and adds a second layer of control on top of the usual site-wide switch: a per-post override that lets a single page behave differently from the rest of the site.

Yes, safely: on any page served through the AMP plugin, Smart LazyLoad detects the AMP endpoint and skips lazy loading entirely — including its scripts and styles — since AMP's markup rules don't allow the attributes lazy loading needs. Non-AMP pages are unaffected.

Open that post or page in the editor and find the Smart LazyLoad panel in the sidebar. Set the Lazy Load dropdown to Enable to force lazy loading on for that post only, or Disable to force it off — either way, every other post keeps following the site-wide Master Switch untouched.

No. Every other option on the settings page is dimmed and can't be edited while the Master Switch is off, but its saved value is untouched. Turn the Master Switch back on and your previous configuration is exactly as you left it.

Add any of these to the element: no-lazyload, skip-lazy, data-no-lazyload, data-no-lazy, or data-skip-lazy. An element already marked loading="eager" or fetchpriority="high" is left alone too, so the hints you use for your LCP image keep working. For your own CSS classes, list them under Settings → LazyLoad → Custom Exclude Selectors — one per line, or separated by commas. The leading dot is optional, so .site-logo and site-logo both work. A class only counts when it matches in full, so .hero never accidentally excludes hero-thumbnail.

Yes. add_filter( 'smart_lazyload_enabled', '__return_false' ); Or conditionally, for example only on single posts: add_action( 'wp', function () { if ( is_single() ) { add_filter( 'smart_lazyload_enabled', '__return_false' ); } } );

Yes, in two ways. Automatically, for any element carrying an inline background: ` ` Or manually, by writing the plugin's own markup yourself: ` Use a plain URL indata-bg— nourl(...)` wrapper and no quotes. Either way the background is restored automatically for visitors with JavaScript turned off. Only a background made of one plain url() is deferred. Gradients, image-set(), and multi-layer backgrounds are left exactly as you wrote them, so a value that can't be rebuilt safely is never taken apart.

Yes. Every <source> inside a <picture> element has its srcset/sizes deferred in sync with the fallback <img>. The browser still decides which source to use based on format and viewport — Smart LazyLoad only changes when the chosen source loads.

No. A deferred image is held open by a placeholder cut to that image's exact width and height, so the space is reserved from the first paint and nothing moves when the real image arrives.

Both are safe; they differ in reach. Leave Full-Page Lazy Loading off and the plugin only touches post content, widgets, comments, and avatars — the lightest possible option, and enough for most sites. Turn it on and the whole response is scanned, so images your theme prints directly in its templates (sliders, headers, footers) are covered too. Only one of the two runs at a time, so nothing is ever processed twice.

Instead of an empty box, Smart LazyLoad shows a tiny blurred preview of the real image while the full version loads. Previews are built in the background, never during a visitor's page load, and cached from then on. Choose the source size under Settings → LazyLoad → Placeholder Source Size. On a large existing media library you can build every preview up front from the command line: wp smart-lazyload generate-lqip Add --force to rebuild previews that already exist, or --limit=100 to work through the library in batches. To remove every stored preview: wp smart-lazyload clear-lqip

No. The fade only ever runs on an element that has already arrived, so an image that fails to load, or a visitor whose JavaScript never runs, simply sees it at full opacity.

Yes. add_filter( 'smart_lazyload_svg_placeholder', function () { return 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"></svg>'; } ); Deferred iframes use a separate placeholder (default about:blank), which you can change with: add_filter( 'smart_lazyload_placeholder', function () { return 'about:blank'; } );

No. Smart LazyLoad only changes the HTML markup for images, videos, and iframes on the fly; it doesn't touch how pages are cached or served, so it works alongside typical caching and CDN setups.

Yes. Deferred content is always wrapped with a working <noscript> fallback, native browser lazy loading is supported directly, and the first image on the page is skipped by default so it doesn't hurt your Largest Contentful Paint score.

• Confirm the Master Switch is on, and that the specific post isn't set to Disable in its Lazy Load panel
• Clear any page cache, CDN cache, or browser cache
• Check whether "Disable for Logged-in Users" is on and you're viewing the page while logged in
• Temporarily disable other lazy load plugins to rule out a conflict
• Make sure the element doesn't carry one of the exclusion classes/attributes
• View the actual frontend page, not a page-builder editing screen or preview