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)