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.
Step 1: 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.
Step 2: 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. Add this to your child theme functions.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 );Step 3: Disable lazy load when debugging
To turn off core lazy load site-wide during diagnosis, add this to functions.php:
add_filter( 'wp_lazy_loading_enabled', '__return_false' );Step 4: 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.
Step 5: 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 at a confirmed price without hourly billing surprises.