Smart LazyLoad – Lazy Load Images, Videos and Iframes vs Optimize More! – Images

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.

A lightweight yet powerful image, iframe, and video optimization plugin. Lazy load, preload, and more. No jquery dependency. Features Lazy Load – Lazy loading images, iframes, and videos, using the high performant lazysizes.js. No jquery dependency. Preload Featured Images – Automatically preloading featured image from common page/post (homepage, pages except homepage, single post, and woocommerce single product pages). Use CDN for Images – HTML rewrite if you want to serve images from your favorite CDN. Add Missing Image Dimensions – Add missing width and height attributes from your images. New (since 1.1.1) Add no-lazy and skip-lazy class as default exclude class for lazyloading images. Enable loading eager to also target no-lazy and skip-lazy class. Automatically exclude featured image (add no-lazy class) from lazyloading if Preload Featured Images feature is enabled (useful to avoid Largest Contentful Paint image was lazily loaded warning in Google Pagespeed Insights ). Add webp extension to CDN HTML rewrite regex. New (since 1.0.7) We changed the lazy load library from lozad.js to lazysizes.js. Add field to modify lazysize default configuration. Read the docs. Add fields to specify width and height fallback value if the Add Missing Image Dimensions feature failed to get the actual image dimension. New (since 1.0.3) Lazy load CSS Background Images – Load faster by lazy loading background images from the CSS background-image property. Tested and works well on CSS background image from GenerateBlocks, Elementor, and Oxygen Builder. Noscript Fallback – Extra option to use fallback for lazy images and iframes. Add Loading Eager – Extra option to Automatically add loading=eager to the lazy load excluded list. This plugin only adds 1 extra row in your database. And it will self delete upon uninstalation. About Lazysizes Lazysizes is highly performant lazy load library, written by Alexander Farkas in pure JS with no dependencies. Taken from lazysize’s github description: High performance and SEO friendly lazy loader for images (responsive and normal), iframes and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration. Optimize More! Need to optimize more? Try our WordPress Speed Optimization’s Service. Other USEFUL PLUGINS TO OPTIMIZE YOUR SITE’S SPEED: Optimize More! – Selectively Optimize your CSS/JS Delivery: Load CSS Asynchronously, Delay CSS and JavaScripts until User Interaction, Preload Critical CSS and JavaScripts, and Remove Unused CSS and JavaScripts Files. Lazyload, Preload, and more! – A simplified version of this plugin. The plugin size is only around 14kb zipped. Without UI for settings, but you can customize the settings using filters. The default configuration is the best for optimizing images and other media files to speed up your site (just install and activate it and you’re good to go): lazyload your below the fold images/iframes/videos, preload your featured images, and add loading=”eager” to your featured image and all images that have no-lazy or skip-lazy class. Other USEFUL PLUGIN: Shop Extra – A lightweight plugin to optimize your WooCommerce & Business site: Floating WhatsApp Chat Widget (can be use without WooCommerce), WhatsApp Order Button for WooCommrece, Hide/Disable WooCommerce Elements, WooCommerce Strings Translations, and many more. Animate on Scroll – Animate any Elements on scroll using the popular AOS JS library simply by adding class names. This plugin helps you integrate easily with AOS JS library to add any AOS animations to WordPress. Simply add the desired AOS animation to your element class name with “aos-” prefix and the plugin will add the corresponding aos attribute to the element tag.