Smart LazyLoad – Lazy Load Images, Videos and Iframes vs lazysizes

Smart LazyLoad is a free, simple, and lightweight lazy loading plugin. Lazy load WordPress images, videos, and iframes to improve page speed, website performance, and Core Web Vitals scores. Most lazy load plugins stop at optimize images. Smart LazyLoad also defers responsive sources, inline background images, avatars, smilies, HTML5 , and iframes such as YouTube and Vimeo. This plugin also includes support for avatars, emojis, native video, native browser lazy loading, and thumbnail placeholders, as well as the ability to convert YouTube videos. There is nothing to configure to get started — images are lazy loaded the moment you activate it. 🚀 You get two layers of control: A Master Switch for the whole site. A per-post override, so a single post or page can behave differently from everything else. The rest lives on one settings screen: choose what to lazy load, tune performance, decide how placeholders look, and exclude anything that shouldn’t be touched. 📦 What gets lazy loaded? Images — post and page content, featured images, widget images, and comments. Switch on Full-Page Lazy Loading and it also covers markup hardcoded in your theme’s templates. Responsive sources — every inside a is deferred together with its fallback . The browser still picks the format and crop it wants; only the timing changes. Avatars — Gravatars and author photos, which usually sit far below the fold in long comment threads. Smilies — text smilies (e.g. :mrgreen:) that WordPress renders as image files. Smilies rendered as Unicode emoji are left untouched. Background images — an inline style="background-image" built from a single url(), or a manual data-bg attribute. Gradients, image-set(), and multi-layer backgrounds are deliberately left untouched. Iframes — any embedded iframe, including YouTube and Vimeo players. YouTube click-to-play thumbnails — an optional mode that swaps the YouTube iframe for a light, clickable thumbnail until someone actually wants to watch. Thumbnails are served as WebP, with an automatic fallback. Native — HTML5 tags, their children, and poster images. 🎛️ Two layers of on/off control A Master Switch turns the whole plugin on or off for the site Switch it off and every other setting is dimmed, so nothing gets changed by mistake. Nothing is cleared either — turn it back on and your configuration is exactly as you left it A Lazy Load dropdown in the post editor sidebar — Default, Enable, or Disable — lets one post override the site-wide setting, leaving every other post alone ⚡ Performance tuning Skips the first image on the page, and any image WordPress marks as your largest above-the-fold image, to protect your Largest Contentful Paint (LCP) Excluded elements also lose WordPress’s own loading="lazy", so they really do load straight away Adjustable distance-from-viewport threshold, so loading starts as early or as late as you like Use the plugin’s IntersectionObserver engine, or hand the job to the browser’s native loading="lazy" Scan the whole page, or only post content, widgets, and comments — full coverage or the lightest possible footprint Always loads its script in the footer, with an optional defer on top, so it never blocks rendering Can be turned off for logged-in users, so you always see full-quality content while editing 🎨 Appearance while content loads Low-quality image placeholder (LQIP): a tiny blurred preview of the real image instead of a blank box Previews are built in the background and cached, so no visitor ever waits for one Pick which registered image size the preview is built from Adjustable fade-in for the moment content arrives, skipped for visitors who prefer reduced motion Every deferred image holds its exact final size from the first paint, so nothing jumps when it arrives Optional placeholder background colour, shown only until the real image is there 🧩 Compatibility and control A custom exclude field — list your own CSS classes, one per line or separated by commas. No code needed Recognises the usual exclusion markers already: no-lazyload, skip-lazy, data-no-lazyload, data-no-lazy, data-skip-lazy Stays out of the way inside page builder editors (Elementor, Avada, Divi, Beaver Builder, WPBakery, Oxygen) and on feeds, previews, and REST requests Developer filters for placeholders, threshold, exclusions, YouTube thumbnails, and the final markup WP-CLI commands to build or clear image previews across the whole media library One-click “Reset to Defaults” whenever you want to start over 🛠️ Built the right way No jQuery. The frontend script is plain JavaScript built on IntersectionObserver noscript fallbacks, so content is never lost for visitors or crawlers without JavaScript A responsive, card-based settings screen Clean uninstall: removes its own options and post meta when you delete the plugin, and nothing else Configuration Site-wide settings: Settings → LazyLoad The settings screen is organized into five cards: Master Switch — the single toggle that turns Smart LazyLoad on or off for the entire site. When it’s off, every card below it is dimmed and cannot be edited, but nothing about your saved configuration changes. What to Lazy Load — a separate toggle for each type: Images, Responsive Sources, Background Images, Avatars, Smilies, Iframes, YouTube Thumbnail Replacement, and Native Videos. Performance — Skip First Image (for LCP), Threshold Distance, Use Native Browser Lazy Loading, Defer LazyLoad JavaScript, and Disable for Logged-in Users. Appearance — Low-Quality Image Placeholder and its source size, an optional Placeholder Background Colour, and the Fade-in Duration. Advanced — Full-Page Lazy Loading, and a Custom Exclude Selectors box where you list CSS classes to skip — one per line, or separated by commas. A Reset to Defaults button at the bottom restores every option to its original value in one click. Per-post override Open any post, page, or public custom post type in the block editor and look for the Smart LazyLoad panel in the sidebar. Its Lazy Load dropdown has three choices: Default (On) or Default (Off) — label reflects the current Master Switch state; this post simply follows the site-wide setting Enable — lazy loading is always on for this post, even if the Master Switch is off Disable — lazy loading is always off for this post, even if the Master Switch is on The choice is saved as post meta and applies only to that single post — nothing else on the site is affected. Developer filters Every filter is prefixed smart_lazyload_. smart_lazyload_enabled — return `false` to disable lazy loading for the current request. smart_lazyload_svg_placeholder — replace the default inline SVG placeholder used for images. smart_lazyload_placeholder — replace the placeholder value used for deferred iframes (default: `about:blank`). smart_lazyload_excluded_attributes — extend the list of strings that exclude an image, video, or background-image tag from lazy loading. smart_lazyload_iframe_excluded_patterns — extend the list of strings that exclude an iframe tag from lazy loading. smart_lazyload_excluded_src — extend the list of substrings checked against an image or background-image URL itself (not just its surrounding tag) to exclude it from lazy loading; useful for dynamic image generators or known placeholder assets. smart_lazyload_threshold — override the distance-from-viewport threshold, in pixels. smart_lazyload_youtube_resolution — choose the YouTube thumbnail resolution: `default`, `mqdefault`, `hqdefault` (the default), `sddefault`, or `maxresdefault`. smart_lazyload_exclude_youtube_thumbnail — return an array of strings; any YouTube iframe whose markup contains one of them keeps a real iframe instead of the click-to-play player. smart_lazyload_html — filter the processed markup after every lazy-load pass has run. The former do_smart_lazyload and smll_threshold names still work, so existing snippets keep running.

lazysizes is a WordPress plugin for the high performance, SEO-friendly and auto-triggering lazyloader with the same name. Support includes images (including responsive images with srcset and the picture tag), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster. Additionally, you can add low-res/blurry placeholder images using the Blurhash algorithm. This plugin works by loading the lazysizes script and replacing the src and srcset attributes with data-src and data-srcset on the front end of a WordPress site. When a post or page is loaded, the lazysizes javascript will load the images, iframes etc. dynamically when needed. All you need to do is to enable the plugin, and possibly tweak a few settings to your liking. Thanks to aFarkas and contributors for making the lazysizes library possible, and for letting me use the same name. Also thanks to dbhynds who made the Lazy Load XT plugin, which this plugin is based on.