offscreen-images
•
Savings: 800 KB - 3.5 MB network savings
How to Fix "Defer Offscreen Images" & Master Native Lazy Loading
Offscreen images are pictures located below the fold. Downloading them on initial page load steals bandwidth from critical hero assets, slowing mobile LCP.
Technical Breakdown: What Causes This Issue?
When a user opens an e-commerce catalog or blog post, only the top 1 or 2 images are visible in the initial 844px smartphone viewport. If the browser eagerly requests 25 product images in the footer and grid simultaneously, mobile network congestion spikes and Largest Contentful Paint (LCP) suffers.
How to detect if your page is affected:
- Lighthouse reports "Defer offscreen images" with savings of 1MB+.
- Waterfall shows multiple simultaneous JPEG/PNG requests before LCP element renders.
- Initial DOM load transfers 4MB+ of image data.
Step-by-Step Resolution Workflows
WordPress 5.5+ natively adds loading="lazy" to content images. However, avoid lazy-loading the hero/logo image! Use FlyingPress, WP Rocket, or LiteSpeed Cache to automatically exclude the first 2 images from lazy loading while strictly deferring all others.
add_filter('script_loader_tag', function($tag, $handle) {
if (is_admin()) return $tag;
if (strpos($tag, 'defer') !== false) return $tag;
return str_replace(' src=', ' defer src=', $tag);
}, 10, 2);
In Shopify Liquid templates, ensure below-the-fold image tags use `loading: "lazy", decoding: "async"`. Check product grid loops: the first 2 products on mobile can be eager, all subsequent products must have `loading="lazy"`.
<script src="{{ 'theme.js' | asset_url }}" defer></script>
<!-- Below-the-fold image: Native lazy loading -->
<img src="/images/product-5.webp" alt="Product 5" loading="lazy" decoding="async" width="400" height="300">
<!-- Hero / Above-the-fold image: NEVER LAZY LOAD -->
<img src="/images/hero-banner.webp" alt="Hero Banner" fetchpriority="high" width="1200" height="600">Frequently Asked Questions
Should I lazy load my hero banner image?
NO! Lazy loading your hero banner is the #1 mistake that kills LCP scores by delaying the hero image by 1 to 2 seconds.
Is native loading="lazy" supported on all mobile browsers?
Yes, over 97% of global mobile and desktop browsers (Chrome, Safari iOS 15.4+, Firefox, Edge) natively support loading="lazy".
What is decoding="async"?
decoding="async" allows the browser to decode image bytes off the main UI thread, eliminating micro-stutters during mobile scrolling.
Audit Your Live Website
Test if your domain passes this audit with sub-2s mobile loading:
Want guaranteed 90+ score without breaking anything?
Our senior performance engineers optimize your assets, configure server-level caching, and fix offscreen-images with a 100% money-back guarantee in 48 hours.
Fix on WhatsApp (₹8,999)