Lazy loading mistakes that hurt LCP and SEO

Lazy loading is one of those optimisations that sounds impossible to get wrong. Load images later, save bandwidth, done. Yet it is common to see a site owner install a performance plugin, tick "lazy load everything", and then watch their Largest Contentful Paint get worse, their product images vanish from Google Images, or their pages start jumping around. The technique is sound; the configuration is where problems begin. This article covers the lazy loading mistakes that do real harm, how to recognise each on your own site, and what to change.

Mistake 1: lazy loading the image people see first

This is the most frequent and most costly error. When the hero banner, the first product photo or the featured article image carries loading="lazy", the browser postpones fetching it until layout is calculated and it confirms the image sits in the viewport. That built-in pause lands directly on your LCP, since the largest visible element is very often that very image.

How to spot it

Run PageSpeed Insights on the page. Lighthouse flags this with an audit warning that the Largest Contentful Paint image was lazily loaded. You can also right-click the banner, choose Inspect, and look for loading="lazy" or a data-src attribute.

The fix

Exclude above-the-fold images from lazy loading. Most WordPress speed plugins let you skip the first few images or exclude by CSS class. In custom templates, pass a flag so the first image in a list renders with eager loading. Remember that "above the fold" differs between phones and desktops; if unsure, keep the first one or two images eager.

Mistake 2: JavaScript lazy loading that hides images from crawlers

Before browsers supported the loading attribute, lazy loading relied on scripts. The img element held a tiny placeholder in src and the real address in something like data-src. A script swapped them when the visitor scrolled.

Google’s crawler renders JavaScript, but it does not scroll like a person. It loads the page with a tall viewport instead. Scripts that only react to scroll events may never fire, leaving Google with a page full of grey placeholders. Other search engines and social preview bots may not run JavaScript at all.

The fix

• Prefer native loading="lazy", which keeps the real URL in the src attribute.
• If a script is unavoidable, use one based on the Intersection Observer API rather than scroll listeners, as Google recommends.
• Test with the URL Inspection tool in Google Search Console and view the rendered screenshot and HTML to confirm images are present.

Mistake 3: lazy loading text and page content

Some themes load product descriptions, reviews, FAQs or entire sections only when the visitor scrolls or clicks "Load more". If that content matters for search, such as a detailed specification or a category description, Google may not see it.

Infinite scroll on category or blog listing pages causes the same issue for items beyond the first batch. Google’s guidance is to back infinite scroll with paginated URLs that each load their own set of items, linked with normal anchor tags, so every product or article remains reachable by a crawler.

Keep important text in the initial HTML. Lazy loading is meant for heavy media, not the words you want ranked.

Mistake 4: no reserved space, so everything jumps

A lazily loaded image without width and height attributes starts at zero height. When it finally arrives, the content below jumps down. Visitors who were reading lose their place, and your Cumulative Layout Shift climbs.

The fix is straightforward: give every lazy image and iframe explicit width and height, or a CSS aspect ratio on its container. Placeholder boxes with a light background colour make the loading state look intentional.

Mistake 5: stacking two lazy loading systems

WordPress adds native lazy loading by default. A theme may add its own script, and a speed plugin may add a third. The result can be images that load twice, placeholders that never swap, or images that load late because one system waits for another.

1. View the page source and check how a below-the-fold image is written.
2. If you see both loading="lazy" and a data-src swap, two systems are active.
3. Keep one method, ideally native, and turn off lazy loading in the others.
4. Clear page and CDN caches, then test again.

Mistake 6: breaking carousels, tabs and hidden images

Images in sliders, tabs or accordions may be positioned off-screen or hidden. Some script-based lazy loaders never detect them as visible, so the second slide shows a blank box when it rotates in. Native lazy loading also treats hidden elements differently depending on the browser.

Test every interactive image component after enabling lazy loading: click through each slide, open each tab, and expand each accordion on both mobile and desktop. Exclude components that misbehave, or eagerly load the first slide and lazy load the rest.

Mistake 7: low-quality placeholders that get indexed or shared

Blur-up techniques show a tiny, blurry version of an image until the real one loads. If the markup is set up badly, the blurry file can end up as the image Google indexes, or the image WhatsApp and social platforms use for link previews. The same happens when Open Graph tags point to a placeholder.

Make sure the real, full-quality image URL appears in the src attribute or in structured data and Open Graph tags, and use placeholders only as CSS backgrounds or inline effects.

A quick audit to run after any speed plugin change

• Hero and first product images load eagerly on mobile and desktop
• Lighthouse shows no warning about a lazily loaded LCP image
• Search Console URL Inspection shows all key images in the rendered page
• Important text is present in the page source, not loaded on scroll
• Lazy images and iframes have width and height
• Only one lazy loading method is active
• Sliders, tabs and accordions display every image correctly
• Link previews on WhatsApp show the real image

Many of these problems come from stacking plugins on an older theme. If your site has accumulated too many fixes on top of fixes, our support team can review the setup, or we can discuss a cleaner rebuild through website development.

Frequently asked questions

Should I lazy load the logo in my header?

No. The logo is visible immediately on every page and is usually small. Lazy loading it only adds a delay and possibly a flash of empty space.

Can lazy loading cause a drop in Google Images traffic?

It can if images are loaded by scripts that Google’s renderer does not trigger, leaving only placeholders in the indexed page. Native lazy loading with real src URLs avoids this.

How many images should load eagerly on a product listing page?

Enough to fill the first screen on common devices, which often means the first row on desktop and the first one or two images on mobile. Test on real screen sizes to decide.

Why do my lazy-loaded images appear late when scrolling fast?

The browser starts loading them at a set distance from the viewport. On slow connections or very large files, fast scrolling outruns the download. Smaller, well-compressed images reduce the gap.