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.
Top comments (0)