Performanceloading="lazy" bảo trình duyệt hoãn tải ảnh cho tới khi sắp lọt viewport, làm nhẹ đợt tải đầu. fetchpriority thì không đổi thứ tự phát hiện, chỉ chỉnh mức ưu tiên khi trình duyệt xếp hàng tải.
Cách dùng đúng theo vị trí:
html
<!-- hero image: eager + high priority -->
<img src="/hero.webp" width="1200" height="630" fetchpriority="high" alt="...">
<!-- below the fold -->
<img src="/item.webp" width="400" height="300" loading="lazy" decoding="async" alt="...">Vì sao không lazy-load ảnh màn hình đầu: ảnh lazy chỉ được xếp hàng sau khi layout xong và biết nó nằm trong viewport, nên bị tải trễ hơn hẳn so với ảnh thường. Nếu đó là phần tử LCP thì LCP xấu đi đáng kể. Đây là lỗi rất hay gặp khi lập trình viên bật loading="lazy" cho toàn bộ ảnh.
Luôn khai width/height (hoặc aspect-ratio): trình duyệt chừa sẵn chỗ nên không phát sinh CLS khi ảnh về. Thêm decoding="async" để việc giải mã ảnh không chặn main thread.