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.
ā Frequently Asked Questions
What does deferring offscreen images mean?
Deferring offscreen images means delaying the loading of images until the user scrolls near them, which helps improve page load times.
Why is not deferring offscreen images bad for SEO?
It can lead to slower page speeds, lower Core Web Vitals scores, wasted bandwidth, and poor mobile experiences.
How can I fix issues caused by not deferring offscreen images?
You can fix it by using the loading="lazy" attribute for offscreen images, applying CSS or JavaScript lazy loading techniques, ensuring above-the-fold images load immediately, and using responsive and compressed image formats.
What are the benefits of deferring offscreen images?
Benefits include faster initial page loads, improved Core Web Vitals scores, better mobile performance, and higher SEO rankings and user engagement.