Lack of lazy loading for offscreen images
- Images & Media
Problem Summary
Lazy loading is a technique that defers loading of non-critical resources (typically images) until they’re needed. When images below the fold aren’t lazy-loaded, the browser downloads them immediately during page load, consuming bandwidth and delaying time to interactive.
Performance Impact
- Increased initial page weight: All images load regardless of viewport position
- Higher bandwidth usage: Users download images they’ll never see
- Delayed Largest Contentful Paint (LCP): Below-fold images compete with above-fold content
- Increased data costs: Mobile users suffer most from unnecessary downloads
How to Detect
- PageSpeed Insights: Flags “Largest Contentful Paint element” and image loading
- Lighthouse: Shows “Image elements have explicit width and height” and lazy-loading warnings
- Chrome DevTools Network Tab: Check if images below fold load on initial load
- GTmetrix: Waterfall shows images loading before scrolling
Solutions
1. Native Lazy Loading
Add loading=”lazy” attribute to img tags:
<img src="image.jpg" loading="lazy" alt="Description" width="800" height="600">2. WordPress Core Support
WordPress 5.5+ adds native lazy loading automatically. Ensure your theme doesn’t disable it.
3. JavaScript Fallback (for older browsers)
if ('loading' in HTMLImageElement.prototype) { // Native lazy loading supported} else { // Use Intersection Observer const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }); document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));}4. Specify Dimensions
Always include width and height to prevent layout shifts:
<img src="thumb.jpg" loading="lazy" width="400" height="300" alt="...">5. Above-Fold Images
Don’t lazy load images in the initial viewport:
<!-- Above the fold - eager --><img src="hero.jpg" loading="eager" fetchpriority="high" ...><!-- Below the fold - lazy --><img src="image.jpg" loading="lazy" ...>