Trang danh sách sản phẩm tải chậm vì ảnh. Bạn tối ưu những gì?

Ảnh thường chiếm phần lớn dung lượng trang, và xử lý sai còn gây layout shift.

Việc cần làm:
- Lazy load ảnh dưới màn hình đầu: loading="lazy". Ảnh trong viewport đầu tiên (LCP) phải để loading="eager" kèm fetchpriority="high" — lazy load ảnh hero làm LCP tệ đi.
- Đặt width/height hoặc aspect-ratio để trình duyệt giữ chỗ, tránh Cumulative Layout Shift khi ảnh tải xong.
- Phục vụ đúng kích thước qua srcset + sizes — không gửi ảnh 2000px cho thumbnail 200px.
- Định dạng hiện đại (WebP/AVIF) với fallback.

jsx

<img
  src="/p/200.webp"
  srcSet="/p/200.webp 200w, /p/400.webp 400w"
  sizes="(max-width: 640px) 50vw, 200px"
  width={200}
  height={200}
  loading="lazy"
  decoding="async"
  alt={product.name}
/>

Trong Next.js, next/image gói sẵn các phần này: tự sinh srcset, tự lazy load trừ khi đặt priority, và bắt buộc khai báo kích thước nên tránh được layout shift.

Với ảnh hero, nhớ priority — đây là lỗi hay gặp khiến LCP kém dù đã dùng next/image.

Xem toàn bộ Performance cùng filter theo level & chủ đề con.

Mở danh sách Performance

Ảnh thường chiếm phần lớn dung lượng trang, và xử lý sai còn gây layout shift.

jsx

<img
  src="/p/200.webp"
  srcSet="/p/200.webp 200w, /p/400.webp 400w"
  sizes="(max-width: 640px) 50vw, 200px"
  width={200}
  height={200}
  loading="lazy"
  decoding="async"
  alt={product.name}
/>

Trong Next.js, next/image gói sẵn các phần này: tự sinh srcset, tự lazy load trừ khi đặt priority, và bắt buộc khai báo kích thước nên tránh được layout shift.

Với ảnh hero, nhớ priority — đây là lỗi hay gặp khiến LCP kém dù đã dùng next/image.