Lazy Loading Above-the-Fold images Without Killing LCP

Rebuilt the product listing page for a multi-vendor marketplace using React + AntD.
🚫 Old setup: img tags with lazy loading on every product (including above-the-fold)
✅ Fix:

• "Eager-load first 6 images (above-the-fold)"
• **"Switch remaining to loading="lazy""
• "Used IntersectionObserver for smooth fade-ins" 📉 Largest Contentful Paint dropped by 230ms (Chrome DevTools audit) *Code Insight:

<img
  src={product.image}
  loading={index < 6 ? "eager" : "lazy"}
  alt={product.name}
/>

Small changes, big wins.

#reactjs #fronted #webperformance #ux