New 24/7 monitoring and daily cloud backups now included in every Shield Pro plan.

Images

How to enable WordPress lazy loading

Lazy loading defers off-screen images until users scroll. WordPress enables it by default since 5.5, but themes and plugins can break it or lazy load the wrong image. This guide configures native lazy load and fixes Core Web Vitals side effects.

Time: 15-30 minutes Level: Beginner

What this problem looks like

Double lazy loading happens when a theme, page builder, and cache plugin each add their own lazy load JavaScript. Images never appear until scroll triggers twice.

The largest contentful paint image must not lazy load. Google PageSpeed flags LCP delay when heroes use loading lazy incorrectly.

How WordPress native lazy load works

WordPress filters attachment image attributes to add loading="lazy" automatically. Iframes get the same via wp_iframe_tag filter. No plugin is required for basic behaviour.

Exclude specific images from lazy load

Use the loading attribute on block image blocks in the editor, or filter by class in your theme for the hero template.

php
add_filter( 'wp_lazy_loading_enabled', function( $default, $tag_name, $context ) {
	if ( 'img' === $tag_name && 'the_content' !== $context ) {
		return false;
	}
	return $default;
}, 10, 3 );

Disable lazy load when debugging

To turn off core lazy load site-wide during diagnosis:

php
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Re-enable lazy load after fixing duplicates. Off-screen images will hurt performance on long pages.

Page builders and WooCommerce galleries

Elementor, Divi, and Bricks may add data-src lazy patterns. Pick one system. For WooCommerce, main product image should load eagerly. Thumbnail carousel images can lazy load safely.

Measure impact in PageSpeed Insights

Run mobile PageSpeed before and after. Watch LCP element timing and deferred offscreen images audit. Adjust hero exclusions until LCP passes consistently.

When to stop DIY and hire help

Custom themes with complex sliders need hand-tuned LCP markup. BugShield aligns lazy loading with Core Web Vitals on marketing and shop templates.

FAQs

Is lazy loading bad for SEO?

Google supports native lazy loading. Problems appear when LCP images lazy load or content never loads for crawlers due to broken JavaScript.

Should I use a lazy load plugin?

Usually no if WordPress core and your theme cooperate. Plugins help legacy themes that lack native support.

Why are images blank until I scroll?

Conflicting lazy load scripts or JavaScript errors. Disable lazy load in one plugin at a time to find the duplicate.

Does lazy load work on background CSS images?

No. Native lazy load applies to img and iframe tags. CSS backgrounds need different techniques.

Rather someone else fixed it?

Request a fix at a confirmed price. Named UK developer, secure Vault, direct chat.

Request a Fix