WordPress Lazy Load: When It Helps and When It Breaks

The Symptom: Content Requires Scrolling to Appear

What Users and Clients Experience

A recurring post-optimization issue is when visitors report that page content does not appear until they scroll down. On mobile devices, the homepage loads to what appears to be a blank or nearly blank page. A small scroll brings the content into view. This behavior appears across Android and desktop browsers, not just on specific devices.

Clients often report this as the site being broken. The cause is almost always lazy loading configured too aggressively, combined with a JavaScript animation or appear effect that uses scroll position to trigger visibility. When lazy load defers images until they are near the viewport, and an animation script also waits for scroll to trigger element visibility, the result is content that appears to be missing until the user scrolls — even though the content is technically present in the HTML.

How Lazy Loading Works

Lazy loading defers the loading of images that are below the fold — not visible in the initial viewport — until the user scrolls close to them. This is a legitimate performance technique. It reduces the initial page payload by not loading images the user may never see. For pages with many images below the fold, lazy loading can significantly reduce bandwidth consumption and improve initial load time.

The problem arises when lazy loading is applied to images that are above the fold or very close to the initial viewport, or when the lazy load threshold — the distance from the viewport at which loading is triggered — is set too low. In these cases, the image does not load until the user scrolls, creating the appearance of a broken or slow page.

Diagnosing the Problem

Identifying Which Elements Are Affected

Open the affected page in a browser and inspect the elements that appear to be missing. In developer tools, look for loading="lazy" attributes on image tags, or for JavaScript classes related to animation or appear effects — common examples include wow, aos (Animate On Scroll), appear, or plugin-specific class names from the active theme.

If the missing content is images, the issue is likely native lazy loading or a JavaScript lazy load library. If the missing content is entire sections — text blocks, divs, or layout elements — the issue is more likely an animation plugin that uses scroll position to trigger a fade-in or slide-in effect.

Fixing the Problem

Disabling Lazy Load for Above-the-Fold Images

For images that appear in the initial viewport, lazy loading should not be applied. In LiteSpeed Cache, the Lazy Load setting in Image Optimization has an Exclude option that accepts CSS selectors. Adding the selector for the hero image or any above-the-fold image class to the exclusion list prevents lazy loading from being applied to those elements while leaving it active for everything else.

WordPress 5.5 and later also applies the loading="lazy" attribute natively to images. If this is causing the issue, it can be disabled selectively using a filter in the theme’s functions.php: add_filter( 'wp_lazy_loading_enabled', '__return_false' ); — though this disables lazy loading globally, which is too broad for most situations.

Disabling JavaScript Appear Effects

If the issue is a JavaScript animation plugin that triggers on scroll, the most straightforward fix is to disable the animation effect entirely. Many page builders and themes include an “entrance animation” or “scroll reveal” setting that can be turned off in the theme customizer or page builder settings without touching any code. For plugins like WOW.js or AOS, disabling or removing the plugin resolves the issue immediately.

An alternative for clients who want to keep the visual effect is to reduce the offset or threshold values in the animation plugin’s configuration so that content triggers much earlier — ideally before the user needs to scroll at all. This preserves the animation while eliminating the blank page experience.

AdSense and Lazy Load Conflicts

Why Aggressive Lazy Load Breaks Ad Rendering

Google AdSense requires pages to render correctly and completely in order to score ad placements accurately. A page where content is hidden until scroll — due to lazy loading or scroll-triggered animations — can register as an empty page from AdSense’s perspective, causing placement errors or reduced ad revenue. Resolving lazy load issues is therefore not only a user experience fix but also a prerequisite for reliable AdSense integration.

The next article covers a different post-optimization problem: featured images that disappear from posts after a file cleanup operation, and how to restore them correctly.