Image SEO

Image lazy loading native

Tính năng lazy loading tích hợp sẵn trong trình duyệt qua thuộc tính loading="lazy" trên thẻ img.

4 lượt xem Cập nhật: 01/06/2026

Image lazy loading native là gì?

Image lazy loading native là tính năng tải hình ảnh chậm (lazy loading) được tích hợp sẵn trong trình duyệt, không cần JavaScript bên ngoài. Nó hoạt động qua thuộc tính loading="lazy" trên thẻ <img>. Khi được thêm vào, trình duyệt sẽ tự động hoãn tải hình ảnh cho đến khi ảnh gần xuất hiện trong khung nhìn (viewport) của người dùng.

Tính năng này được hỗ trợ chính thức từ Chrome 76 (tháng 7/2019), Firefox 75 (tháng 4/2020), Edge 79 (tháng 1/2020) và Safari 15.4 (tháng 3/2022). Hiện tại, hơn 95% người dùng toàn cầu dùng trình duyệt hỗ trợ loading="lazy" (theo dữ liệu CanIUse tháng 6/2024).

Tại sao quan trọng trong SEO?

Lazy loading native giúp cải thiện tốc độ tải trang — một yếu tố xếp hạng trực tiếp của Google từ năm 2018 (Core Web Vitals). Khi hình ảnh không cần thiết ngay lập tức bị hoãn tải, kích thước yêu cầu ban đầu giảm rõ rệt, dẫn đến:

  • Thời gian tải nội dung chính (LCP) nhanh hơn — đặc biệt trên thiết bị di động và mạng chậm
  • Giảm băng thông tiêu thụ cho cả người dùng và máy chủ
  • Giảm số lượng yêu cầu đồng thời (HTTP requests), tránh quá tải tài nguyên
  • Hỗ trợ trải nghiệm người dùng tốt hơn → giảm tỷ lệ thoát (bounce rate)

Google xác nhận rằng hình ảnh không hiển thị ngay lập tức (ví dụ: ở cuối trang) không cần tải sớm — và việc áp dụng lazy loading đúng cách giúp trang đạt điểm LCP cao hơn trong báo cáo PageSpeed Insights.

Cách hoạt động

Trình duyệt theo dõi vị trí của từng thẻ <img loading="lazy"> trong DOM. Khi ảnh nằm trong khoảng cách nhất định so với viewport (khoảng 1250px phía trên/dưới tùy trình duyệt), trình duyệt bắt đầu tải ảnh. Khoảng cách này không công bố chính thức và có thể thay đổi giữa các phiên bản trình duyệt.

Với ảnh nền CSS hoặc ảnh trong iframe, loading="lazy" không hoạt động — chỉ áp dụng cho thẻ <img> và <iframe> (với thuộc tính riêng). Ảnh có thuộc tính loading="eager" sẽ tải ngay lập tức, còn nếu không khai báo thuộc tính loading, hành vi mặc định phụ thuộc vào trình duyệt (thường là eager).

Hướng dẫn thực hiện

  1. Thêm thuộc tính vào thẻ img:
    <img src="anh-meo.jpg" alt="Mèo đang ngủ" loading="lazy" width="400" height="300">
  2. Luôn kèm width và height: Tránh layout shift bằng cách khai báo kích thước cố định hoặc dùng kỹ thuật aspect ratio (ví dụ: style="aspect-ratio: 4/3;")
  3. Không dùng cho ảnh quan trọng ở đầu trang: Ảnh trong LCP (ví dụ: logo, banner chính) nên để loading="eager" hoặc bỏ thuộc tính để đảm bảo tải ngay
  4. Kiểm tra tương thích: Dùng DevTools → tab Network → lọc theo Img để xem thứ tự tải; hoặc kiểm tra qua Web.dev
  5. Kết hợp với thẻ <picture>:
    <picture>
    <source media="(min-width: 768px)" srcset="banner-desktop.webp">
    <img src="banner-mobile.webp" alt="Banner" loading="lazy">
    </picture>

Lỗi thường gặp

  • Ảnh không hiển thị trên Safari cũ hoặc IE: Các trình duyệt không hỗ trợ sẽ bỏ qua thuộc tính loading — ảnh vẫn tải bình thường (không lỗi), nhưng không được hoãn. Không cần polyfill nếu không phục vụ người dùng IE.
  • Layout shift do thiếu width/height: Khi ảnh chưa tải xong, trình duyệt không biết kích thước → nội dung nhảy. Khắc phục: luôn khai báo width, height hoặc dùng aspect-ratio.
  • Dùng sai cho ảnh LCP: Nếu ảnh đầu trang (ví dụ: hero image) bị lazy load, LCP sẽ chậm hơn. Kiểm tra qua Lighthouse và đặt loading="eager" nếu cần.
  • Tải chậm trên mạng 3G dù đã lazy: Lazy loading không thay thế tối ưu hóa ảnh. Vẫn cần nén (WebP/AVIF), điều chỉnh kích thước, dùng srcset phù hợp.

Ví dụ thực tế

Một trang blog có 15 ảnh, tổng kích thước ảnh gốc là 8,2 MB. Trước khi áp dụng:

  • Thời gian tải ban đầu: 4,8s (trên mạng 3G)
  • LCP: 5,2s
  • Điểm Performance trên Lighthouse: 42/100

Sau khi thêm loading="lazy" cho 12 ảnh không nằm trong viewport đầu tiên, đồng thời nén ảnh và thêm srcset:

  • Yêu cầu ban đầu giảm còn ~1,1 MB
  • Thời gian tải ban đầu: 1,9s
  • LCP: 1,6s
  • Điểm Performance: 91/100

Bảng so sánh hiệu quả:

Chỉ số Trước lazy loading Sau lazy loading native Thay đổi
Request ban đầu (ảnh) 15 ảnh 3 ảnh (LCP + logo + thumbnail) ↓ 80%
Kích thước tải ban đầu 8,2 MB 1,1 MB ↓ 86%
LCP (3G) 5,2s 1,6s ↓ 69%
Điểm Performance (Lighthouse) 42 91 +49 điểm

Câu hỏi thường gặp

loading="lazy" có ảnh hưởng đến việc lập chỉ mục ảnh của Google không?

Không. Googlebot xử lý loading="lazy" như một tín hiệu về thời điểm tải, không phải về khả năng hiển thị. Ảnh vẫn được thu thập và lập chỉ mục bình thường nếu có alt đầy đủ, đường dẫn truy cập được và không bị chặn bởi robots.txt.

Có cần dùng thư viện JavaScript như lozad.js sau khi đã có lazy loading native?

Không cần — trừ khi bạn phải hỗ trợ trình duyệt rất cũ (IE, Safari <15.4) và ảnh hưởng đến >5% người dùng. Với đa số website hiện đại, native lazy loading đủ và an toàn hơn vì không phụ thuộc vào JS.

loading="lazy" có hoạt động với ảnh trong bài viết được tải động qua AJAX không?

Có, nhưng chỉ với ảnh được chèn vào DOM sau khi trang đã tải xong — miễn là thẻ <img> có thuộc tính loading="lazy". Trình duyệt sẽ phát hiện và áp dụng cơ chế hoãn tải tự động, không cần gọi lại hàm JS.