How to Set Up Smush Plugin Lazy Loading with a Placeholder

Lazy loading is one of the most effective ways to speed up a WordPress site, and Smush makes it relatively straightforward to implement. But once you enable it, you'll quickly notice a choice that trips up a lot of users: what should appear in the image space while the real image loads? That's where placeholder configuration comes in — and getting it right depends more on your site's design and performance goals than most tutorials let on.

What Lazy Loading Actually Does in Smush

When you enable lazy loading through the Smush plugin (developed by WPMU DEV), images below the visible screen area are not loaded when the page first renders. Instead, they're loaded on demand as the user scrolls toward them. This reduces initial page weight, lowers Time to First Byte (TTFB) pressure, and improves Core Web Vitals scores — particularly Largest Contentful Paint (LCP) and Total Blocking Time (TBT).

Smush handles lazy loading by injecting a small JavaScript snippet and modifying image tags on the front end. It replaces the standard src attribute with a data-src attribute, which browsers won't fetch until the script tells them to.

The Role of Placeholders

Before the real image loads, the browser still needs something to occupy that space. Without a placeholder, images pop in abruptly, causing layout shift — which tanks your Cumulative Layout Shift (CLS) score, a Core Web Vitals metric Google uses for ranking.

Smush offers several placeholder approaches, and each behaves differently:

Placeholder Type	How It Works	Visual Effect
No image (blank)	Empty space held by dimensions	Invisible until image loads
Spinner / SVG	Lightweight inline SVG animation	Animated indicator while loading
Low-quality image (LQIP)	Blurred, tiny version of the actual image	Smooth blur-to-sharp transition
Solid color	CSS-defined background fill	Flat color block while loading
Transparent 1×1 GIF	Default fallback in many setups	Invisible but may cause layout shift if dimensions aren't set

The LQIP (Low-Quality Image Placeholder) approach is generally considered the most polished from a UX perspective, but it requires slightly more processing and adds a small inline base64 image to your HTML.

How to Configure Lazy Loading in Smush 🔧

Here's how the setup works inside the plugin:

Navigate to Smush in your WordPress dashboard — go to Smush → Lazy Load in the sidebar.
Toggle Lazy Load on — the main switch enables the feature globally for images.
Expand the "Include/Exclude" section — this lets you control which image types are lazy loaded (thumbnails, post images, avatars, iframes, etc.).
Open the "Placeholders" tab within the Lazy Load settings.
Choose your placeholder type — you'll see options including the spinner, a custom image upload, or a specific color.
Save changes — Smush applies the settings sitewide without requiring any code edits.

One important note: Smush's built-in placeholder options vary slightly depending on your version (free vs. Smush Pro). The Pro version expands placeholder customization options, including more granular control over the spinner styling and custom placeholder images.

Variables That Affect How Placeholder Choice Plays Out

Not every placeholder works equally well across every site. Several factors shift the calculus:

Page layout and image dimensions If your images don't have explicit width and height attributes set in HTML (or via CSS), even a perfect placeholder won't prevent layout shift. Smush works best alongside properly dimensioned image tags.

Image-heavy vs. text-first pages On pages dominated by large hero images or photo galleries, the LQIP approach tends to produce a noticeably smoother experience. On blog posts where images are incidental, a simple spinner or transparent placeholder is often invisible to users anyway.

Mobile vs. desktop loading conditions On slower mobile connections, users are more likely to see the placeholder before the real image loads. This makes the visual quality of the placeholder more important for mobile-heavy audiences.

Theme compatibility Some themes use custom JavaScript or CSS that can interfere with Smush's lazy loading script. Lazy loading conflicts can appear as images that never load, broken layouts, or images loading twice. Testing with your specific theme is necessary — not optional.

Caching and CDN layers If you're running a caching plugin (like WP Rocket or W3 Total Cache) or a CDN (like Cloudflare), lazy loading behavior can be affected by how HTML is cached or modified at the edge. Some caching plugins have their own lazy loading features that can conflict or duplicate Smush's output.

The Spectrum of Outcomes

A minimal WordPress blog with few images and a simple theme will see clean, immediate results with Smush's default settings. An e-commerce site with hundreds of product images, a page builder like Elementor or Divi, and a CDN in the mix is dealing with a completely different stack — and will likely need more deliberate placeholder configuration, exclusion rules, and compatibility testing. 🖼️

Sites targeting high PageSpeed Insights scores need to treat placeholder selection as part of a broader CLS strategy, not just a cosmetic preference. Sites primarily focused on visual aesthetics — portfolios, photography sites — will find the blur-up LQIP effect meaningfully improves perceived quality, even though both approaches load the same final image.