Lazy loading is one of the most effective ways to improve loading speed on a WordPress site, but it is also one of the features most likely to cause a visible problem if even one setting is off. A blank image that never fills in. A layout that jumps as the page finishes loading. A hero image that takes far too long to appear. A slider that looks empty until you click it.
None of these means lazy loading should be turned off. They mean one specific part of BlinkSpeed’s lazy load system needs a small adjustment. This guide walks through every lazy load problem you might encounter, explains exactly why it happens, and gives you the precise setting to fix it – covering images, iframes, video, audio, and the JavaScript lazy load system together, since they often interact with each other.
How BlinkSpeed’s Lazy Load System Actually Works
Understanding the mechanism makes every fix in this guide make sense immediately.
When BlinkSpeed processes your page, it looks at each image, iframe, video, and audio element. For most images, BlinkSpeed replaces the src attribute with a tiny blank placeholder image and moves the real image URL into a data-src attribute, also adding a data-class=”LazyLoad” marker. A small JavaScript file then watches the page using the Intersection Observer API – a browser feature that detects when an element is about to enter the visible viewport – and swaps the real data-src value back into src at the right moment.
For some images, BlinkSpeed instead uses the browser’s own native lazy loading by adding loading=”lazy” directly to the image tag, letting the browser itself decide when to fetch the image without any JavaScript involved.
Background images set via inline CSS (style=”background-image:url(…)”) are handled differently again – BlinkSpeed marks their parent container with a data-bglz=”1″ attribute so the lazy load script knows to treat that element’s background image the same way as a regular image.
This means a WordPress image issue with lazy loading could be coming from three different mechanisms depending on how the image was implemented – and the fix is different for each one.
Lazy Load Problem 1 – Images Never Load Even After Scrolling Past Them
This is the most disruptive image lazy load problem because it leaves visible gaps on the page where content should be.
Cause A – The Lazy Load Script Itself Is Not Running
The JavaScript responsible for swapping data-src into src has to load and execute for lazy loading to work at all. If this script is blocked, delayed indefinitely, or throws an error, every lazy-loaded image on the page will remain blank forever.
How to check: Open your browser’s Developer Tools (press F12), go to the Console tab, and reload the page. Look for any red error messages. Then go to the Network tab, filter by JS, and confirm the lazy load script is present in the list of loaded files with a 200 status rather than a 404 or a blocked request.
Common causes of this specific lazy load troubleshooting scenario:
- A Content Security Policy header on your server blocking inline or external scripts
- A conflicting plugin’s JavaScript error stopping the page’s script execution partway through
- An ad blocker or privacy browser extension blocking the script because its filename or path matches a blocklist pattern
Fix: If a CSP header is the cause, add the lazy load script’s path to your script-src allowlist. If a plugin conflict is the cause, go to BlinkSpeed → Exclusions → JS Exclusions and identify which script is throwing the error using DevTools, then exclude it with the defer modifier so it does not interfere with the rest of the page’s JavaScript execution.
Cause B – The Image’s data-src Attribute Was Stripped by Another Plugin
Some plugins – particularly minifiers, optimisers, or security plugins that sanitise HTML output – can strip non-standard attributes from HTML tags, including the data-src and data-class attributes BlinkSpeed relies on. If the attribute holding the real image URL is removed before BlinkSpeed’s script can read it, the image has nothing to load.
How to check: In DevTools, go to the Elements panel, find the blank image element, and inspect its attributes. If you see only a src attribute pointing to a blank placeholder and no data-src attribute at all, something has stripped it.
Fix: Identify the other plugin modifying HTML output (commonly another optimisation, minification, or security plugin) and either disable its HTML sanitisation feature for image tags or deactivate the conflicting plugin, since running two plugins that both rewrite image tags creates this kind of WordPress image issue.
Cause C – The Image Element Is Inside a Dynamically Loaded Container
If a page builder, AJAX-driven product gallery, or infinite-scroll script injects new images into the page after the initial load, BlinkSpeed’s lazy load observer – which is set up once when the page first loads – may not be aware of these newly added elements, since they were not present in the HTML when the observer was created.
Fix: This is a known limitation of any lazy load system that observes the DOM at load time. If your page injects images dynamically, check whether the plugin responsible for the dynamic content has its own lazy loading or image-loading mechanism already, and exclude those specific images from BlinkSpeed’s lazy load using BlinkSpeed → Exclusions → Media Exclusions → Exclude Media from Lazy Loading, letting the other plugin manage those images directly.
Lazy Load Problem 2 – Content Shifting Fix: Layout Jumps as Images Load
This is one of the most common complaints connected to lazy loading, and it directly affects your Cumulative Layout Shift (CLS) score – one of Google’s Core Web Vitals.
Why It Happens
When an image’s src is replaced with a placeholder, the browser needs to know how much space to reserve for that image before the real content loads in. If the image tag does not have explicit width and height attributes (or CSS that defines its aspect ratio), the browser may render it at a different size than the final image, causing surrounding content to shift up or down the moment the real image swaps in.
This is not unique to BlinkSpeed – it is a fundamental characteristic of lazy loading in general – but it becomes visible specifically because lazy loading delays exactly the moment when this size mismatch would occur.
The Content Shifting Fix
Step 1:
Check whether your images have explicit dimensions. Open DevTools, inspect an image that causes a visible jump, and look for width and height attributes on the <img> tag. WordPress adds these automatically for images inserted through the Media Library, but custom theme code, page builder widgets, or manually written HTML often omit them.
Step 2:
Add missing dimensions at the source. If you control the theme or template code, add explicit width and height attributes (or a CSS aspect-ratio property) to any image missing them. This is the most durable content shifting fix because it solves the underlying issue rather than working around it.
Step 3:
For images you cannot edit directly, use CSS to reserve space. Apply a min-height or aspect-ratio rule via your theme’s custom CSS targeting the specific image’s container class, so the layout does not collapse before the lazy-loaded image arrives.
Step 4:
Check inline background images specifically. Background images using the data-bglz lazy load mechanism are particularly prone to CLS because their containing element (a <div> or <section>) often has no defined height of its own – the background image was providing the visual height, but the container itself collapses to zero height until the background loads. Add an explicit min-height to any container using a lazy-loaded background image.
Never Lazy Load Your LCP Element
The single most damaging mistake connected to both content shifting and overall page speed is lazy loading the page’s Largest Contentful Paint (LCP) element – typically a hero image or banner visible without scrolling. Lazy loading intentionally delays this element, which directly worsens your LCP score and can also cause a layout shift as it pops in late.
Go to BlinkSpeed → Exclusions → Media Exclusions → Exclude Media from Lazy Loading and add a matching string for your LCP image – its CSS class, ID, or a fragment of its file URL. Excluded images are not just skipped from lazy loading; BlinkSpeed actively adds fetchpriority=”high” and loading=”eager” to the tag and inserts a <link rel=”preload”> reference for it, telling the browser to fetch this specific image before anything else.
Lazy Load Problem 3 – Sliders, Galleries, and Carousels Show Blank Images
JavaScript-powered sliders and galleries frequently manage their own image loading logic. When BlinkSpeed’s lazy load system intercepts the same image tags, the two systems can conflict – the slider’s JavaScript looks for a real src value to initialise its slides, finds the blank placeholder BlinkSpeed inserted instead, and either breaks or displays nothing.
| Component Type | Typical Symptom | Recommended Fix |
|---|---|---|
| Image sliders (Revolution Slider, Smart Slider) | Slides appear blank or slider fails to initialise | Exclude slider’s image class/container from lazy loading |
| Lightbox galleries | Thumbnail grid loads but lightbox shows blank | Exclude the gallery wrapper’s CSS class |
| Carousel widgets (page builder) | First slide loads, later slides stay blank | Exclude the carousel’s image selector entirely |
| Infinite scroll feeds | Newly loaded images never appear | Exclude the feed container, let the plugin manage its own loading |
The fix: Go to BlinkSpeed → Exclusions → Media Exclusions → Exclude Media from Lazy Loading. Click Add Rule and enter a matching string that identifies the slider or gallery’s images – this can be a CSS class name shared by all the slider’s image tags (such as swiper-slide-image or rev-slidebg), or a URL fragment if the images come from a specific folder.
Once excluded, those images load through their original src attribute exactly as the slider plugin expects, while every other image on the page continues to benefit from lazy loading.
Lazy Load Problem 4 – Lazy Load JavaScript Conflicts With Other Scripts
Separate from image lazy loading, BlinkSpeed also has a JavaScript lazy load system (under JavaScript Optimization → Lazyload Javascript) that delays script execution until the user interacts with the page. When both the image lazy load system and the JavaScript lazy load system are active, a specific conflict can occur: the lazy load image script itself gets caught in the JavaScript delay queue, creating a circular problem where the script responsible for loading images is itself waiting for a user interaction that triggers nothing, since no images load to prompt scrolling in the first place.
How to check: In DevTools Elements panel, search the page’s HTML source for type=”lazyJs”. If BlinkSpeed’s own lazy load image script appears with this type attribute, it has been caught in its own JavaScript delay system.
Fix: Go to BlinkSpeed → Exclusions → JS Exclusions → Exclude Javascript from Lazyload and add the lazy load script’s filename with no modifier, so it always executes immediately:
img-lazyload.js
This ensures the script responsible for swapping in your real images is never itself delayed, while all other site scripts continue to benefit from the JavaScript lazy load improve loading speed strategy.
Lazy Load Problem 5 – Iframes, Video, and Audio Not Loading
The same data-bglz-style deferred loading approach BlinkSpeed uses for images also applies to iframes (commonly Google Maps and YouTube embeds), video elements, and audio elements. Each has its own specific failure pattern.
A. Iframes Showing Blank (Maps, YouTube Embeds)
BlinkSpeed replaces YouTube iframe embeds with a lightweight placeholder showing the video thumbnail, loading the actual YouTube iframe only when the visitor clicks. If this placeholder itself does not appear, check whether the embed code uses a non-standard iframe wrapper that BlinkSpeed’s detection pattern does not recognise – some page builders wrap iframes in custom container elements with additional attributes that interfere with detection.
Fix: If a specific map or video embed is not displaying its lazy load placeholder correctly, add its container to Exclude Media from Lazy Loading using a class name or ID specific to that embed, allowing it to load through its original method instead.
B. Video Elements Not Auto-Playing as Expected
If you have a video set to autoplay on page load but it is being lazy loaded, the autoplay behaviour will not trigger until the visitor scrolls to it – which defeats the purpose of autoplay entirely.
Fix: Exclude the specific video element from lazy loading via its CSS class or source URL fragment, since autoplay videos are, by definition, meant to be visible and active immediately rather than deferred.
C. Audio Players Showing No Controls or Failing to Load
Audio players embedded via HTML5 <audio> tags follow the same lazy load pattern as video. If a podcast player or audio widget shows no controls at all, the lazy load placeholder swap may not be completing.
Fix: Check DevTools Console for script errors as described in Lazy Load Problem 1, then exclude the specific audio player’s container if the issue persists after confirming the lazy load script itself is running correctly.
Lazy Load Troubleshooting Decision Table
Use this table as a fast reference for matching your specific symptom to the right fix:
| Component Type | Typical Symptom | Recommended Fix |
|---|---|---|
| Image sliders (Revolution Slider, Smart Slider) | Slides appear blank or slider fails to initialise | Exclude slider’s image class/container from lazy loading |
| Lightbox galleries | Thumbnail grid loads but lightbox shows blank | Exclude the gallery wrapper’s CSS class |
| Carousel widgets (page builder) | First slide loads, later slides stay blank | Exclude the carousel’s image selector entirely |
| Infinite scroll feeds | Newly loaded images never appear | Exclude the feed container, let the plugin manage its own loading |
Frequently Asked Questions Related to Fix BlinkSpeed Lazy Load Issue
Q1. How do I know if a blank image is a lazy load issue versus a broken image link?
Open DevTools, inspect the blank image element, and look at its src attribute. If it points to a tiny placeholder (often a data:image/svg+xml data URI) and there is a data-src attribute nearby containing the real image URL, this is the lazy load system working as intended and waiting for the image to enter the viewport, or it indicates the swap mechanism is failing if you have already scrolled past it. If instead the src points directly to a real file path that returns a 404 in the Network tab, that is a genuinely broken image link, unrelated to lazy loading.
Q2. Will disabling lazy loading completely fix my image lazy load problem?
It will resolve the symptom, but at the cost of losing the loading speed benefit entirely; all images will load immediately regardless of whether the visitor scrolls to them, increasing initial page weight and slowing down the time to first meaningful render. Disabling lazy loading should be a last resort, used only temporarily while you identify the specific cause. The targeted exclusion-based fixes in this guide let you keep lazy loading active for every image except the specific ones causing trouble.
Q3. Why does my content-shifting fix work on desktop but not mobile, or vice versa?
BlinkSpeed generates separate cached output for mobile and desktop, and your theme or page builder may render different image dimensions or layout structures for each device type. A layout shift that occurs only on mobile usually means a responsive CSS rule is changing the image’s display size on smaller screens without an accompanying aspect-ratio or min-height rule for that breakpoint. Check your theme’s mobile-specific CSS media queries for the affected image’s container and apply dimension or aspect-ratio rules within that same media query.
Q4. Can I exclude a single image from lazy loading without affecting others on the same page?
Yes. The Exclude Media from Lazy Loading setting in BlinkSpeed’s Exclusions tab matches individual images using a CSS class, ID, alt text, or URL fragment – this matching is per-image, not page-wide. You can exclude one specific hero image while leaving every other image on that same page, including images below it, fully lazy-loaded.
Q5. Does WordPress’s own native lazy loading conflict with BlinkSpeed’s lazy load system?
WordPress core has included native lazy loading (using the browser’s loading=”lazy” attribute) since version 5.5. BlinkSpeed’s own lazy load system is more advanced – using JavaScript and the Intersection Observer API for more reliable cross-browser behaviour – and for certain images, BlinkSpeed applies the native loading=”lazy” attribute directly rather than the JavaScript-based placeholder method. These two approaches do not typically conflict because BlinkSpeed only applies one method per image, but if you notice unusual lazy load troubleshooting behaviour, check whether a theme or another plugin is also adding its own loading=”lazy” attribute to the same images, which can occasionally cause duplicate attribute conflicts in the rendered HTML.
Q6. My lazy-loaded images load instantly with no delay at all. Is that a problem?
Not necessarily. If your page is short enough that most images are already near the top of the viewport, or if you are testing on a fast connection with a small page, images may load very quickly after the initial render even with lazy loading active – this is the lazy load system working correctly, just with a very small delay that is not visually perceptible. The lazy load benefit is most visible on long pages with many images, where images far down the page genuinely are not downloaded until the visitor scrolls toward them.
Q7. How can I tell if lazy loading is actually helping my loading speed?
Open BlinkSpeed’s Debug Logs → Core Web Vitals Logs and filter by LCP and CLS over time, comparing periods before and after you made lazy load configuration changes. You can also use Chrome DevTools’ Network tab on a long page – load the page, do not scroll, and count how many images have loaded versus the total number of <img> tags in the page source. If lazy loading is working, the loaded count should be significantly lower than the total image count until you start scrolling.
