DEV Community

sperez927
sperez927

Posted on

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}
/>
Enter fullscreen mode Exit fullscreen mode

Small changes, big wins.

#reactjs #fronted #webperformance #ux

Top comments (0)