Hình ảnh nhanh và mượt với loading=”lazy” và decoding=”async”

1) loading=”lazy” là gì?

loading="lazy" yêu cầu trình duyệt trì hoãn tải ảnh cho tới khi ảnh sắp xuất hiện trong vùng nhìn (viewport). Điều này giảm dung lượng tải ban đầu, tăng TTI (Time To Interactive) cho trang dài hoặc nhiều ảnh.

• Nên dùng cho ảnh offscreen (bên dưới màn hình đầu tiên) và ảnh trong danh sách dài.
• Không nên dùng cho ảnh above-the-fold (hiển thị ngay khi mở trang) vì có thể làm chậm LCP (Largest Contentful Paint).
• SEO: Google có thể xử lý lazy-loading, nhưng bạn vẫn nên đảm bảo ảnh quan trọng ở trên màn hình đầu tiên không lazy để LCP tốt.

2) decoding=”async” là gì?

decoding="async" gợi ý trình duyệt giải mã (decode) ảnh không chặn luồng UI. Kết quả là giao diện mượt hơn khi hiển thị nhiều ảnh, nhất là ảnh lớn (JPEG/PNG/WebP/AVIF).

• Nên dùng cho hầu hết ảnh nội dung, đặc biệt khi nhiều ảnh cùng lúc.
• Không cần nếu ảnh quá nhỏ hoặc icon inline (có thể không khác biệt nhiều).
• Tương thích: Khi trình duyệt không hỗ trợ, nó an toàn bị bỏ qua (progressive enhancement).

3) Thực chiến: kết hợp tối ưu an toàn

<img
  src="/images/post-hero.webp"
  alt="Ảnh hero minh họa bài viết"
  width="1200" height="630"
  decoding="async"
  fetchpriority="high"
  style="aspect-ratio:1200/630; object-fit:cover;">

Giải thích: Hero ở trên màn hình đầu tiên: decoding="async" để UI mượt, fetchpriority="high" ưu tiên tải sớm, width/height (hoặc aspect-ratio) chống CLS.

<img
  src="/images/gallery-01.avif"
  alt="Ảnh trong gallery"
  width="800" height="600"
  loading="lazy"
  decoding="async"
  style="aspect-ratio:4/3; object-fit:cover;">

Giải thích: Ảnh nằm dưới viewport: dùng loading="lazy" + decoding="async". Kích thước cố định hoặc aspect-ratio giúp ổn định layout.

4) Mẫu responsive hoàn chỉnh (srcset/sizes)

<img
  src="/images/card-800.webp"
  srcset="/images/card-400.webp 400w,
          /images/card-800.webp 800w,
          /images/card-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  alt="Ảnh minh họa nội dung thẻ"
  width="600" height="400"
  loading="lazy"
  decoding="async"
  style="aspect-ratio:3/2; object-fit:cover;">

• srcset/sizes giúp trình duyệt chọn tệp phù hợp màn hình, giảm băng thông.
• loading="lazy" trì hoãn tải cho ảnh không quan trọng.
• decoding="async" giải mã không chặn UI.

5) Những lưu ý quan trọng (LCP, CLS, UX)

• LCP: Ảnh LCP (thường là hero) tránh lazy-load. Cân nhắc fetchpriority="high" và/hoặc <link rel="preload"> với as="image" cho ảnh thực sự quan trọng.
• CLS: Luôn đặt width/height hoặc style="aspect-ratio:…" để không nhảy layout khi ảnh tải xong.
• UX: Lazy quá hung hăng có thể khiến người dùng thấy “giật” khi cuộn nhanh. Ưu tiên lazy cho ảnh dưới vài màn hình so với viewport để tránh “pop-in”.
• SEO: Ảnh quan trọng hiển thị sớm, có alt mô tả; lazy các ảnh phụ/thumbnail.

6) Khi nào không nên lazy/async?

• Ảnh trang gấp (hero, banner chính, ảnh sản phẩm chính): không lazy, ưu tiên tải/giải mã sớm.
• Ảnh trong viewport ngay khi mở trang: lazy có thể làm trễ hiển thị, xấu LCP.
• Ảnh cực nhỏ hoặc icon inline: decoding="async" không khác biệt nhiều.

7) Checklist áp dụng nhanh

• Ảnh above-the-fold: decoding="async", cân nhắc fetchpriority="high", không đặt loading="lazy".
• Ảnh offscreen: loading="lazy" + decoding="async".
• Luôn có alt, width/height hoặc aspect-ratio.
• Dùng srcset/sizes cho responsive.
• Đo bằng Lighthouse/Core Web Vitals để điều chỉnh (đặc biệt LCP/CLS).

8) Template tái sử dụng

<!-- Ảnh LCP / above-the-fold -->
<img
  src="/images/hero.webp"
  alt="Hero trang chủ"
  width="1280" height="720"
  decoding="async"
  fetchpriority="high"
  style="aspect-ratio:16/9; object-fit:cover;">

<!-- Ảnh nội dung / offscreen -->
<img
  src="/images/article-figure-01.avif"
  alt="Ảnh minh họa trong bài"
  width="900" height="600"
  loading="lazy"
  decoding="async"
  style="aspect-ratio:3/2; object-fit:cover;">

Kết luận

loading="lazy" cắt giảm tải ban đầu cho ảnh ngoài màn hình, còn decoding="async" giúp UI mượt khi giải mã ảnh. Kết hợp đúng chỗ, cùng width/height hoặc aspect-ratio, srcset/sizes và ưu tiên tải hợp lý, bạn sẽ cải thiện đáng kể Core Web Vitals và trải nghiệm người dùng mà không cần thay đổi kiến trúc phức tạp.