P1Issue #45
Page speed : Defer offscreen image
ā What does it mean?
ā What does it mean?
When a webpage loads, the browser by default tries to load all images at once, even the ones not visible in the initial viewport (offscreen images).
This increases:
Page load time
Data usage
Cumulative Layout Shift (CLS)
Deferring offscreen images (also known as lazy loading) means delaying the loading of images until the user scrolls near them.
šØ Why is it important for SEO?
šØ Why is it a problem for SEO?
Slower Page Speed ā Large image files being loaded upfront delay the first paint.
Lower Core Web Vitals ā LCP (Largest Contentful Paint) may be affected, hurting rankings.
Wasted Bandwidth ā Users download content they may never see.
Poor Mobile Experience ā Especially critical on slow networks.
ā How to Fix It
ā
Best Practices
Use loading="lazy" attribute for offscreen images.
For background images, use CSS lazy loading techniques or JavaScript Intersection Observer.
Ensure above-the-fold images load immediately, while below-the-fold images are deferred.
Use responsive and compressed formats (e.g., WebP, AVIF).
ā Bad Example
š Example
ā Bad (All images load at once):
<img src="shoe-banner.jpg" alt="Running Shoes Banner" />
<img src="shoe-collection.jpg" alt="Collection of Shoes" />
<img src="customer-reviews.jpg" alt="Customer Reviews" />
š Even images not visible until scrolling load immediately, slowing the page.
ā Good Example
ā
Good (Lazy Loading Applied):
<img src="shoe-banner.jpg" alt="Running Shoes Banner" /> <!-- Above the fold -->
<img src="shoe-collection.jpg" alt="Collection of Shoes" loading="lazy" />
<img src="customer-reviews.jpg" alt="Customer Reviews" loading="lazy" />
š First image loads instantly, others wait until user scrolls.
ā” Result
ā” Result of Fixing
Faster initial page load & LCP.
Improved Core Web Vitals score.
Better mobile performance.
Higher SEO rankings & user engagement.