Image SEO

Image loading attribute

Thuộc tính HTML 'loading' (giá trị 'lazy') kích hoạt lazy loading không cần JavaScript, hỗ trợ SEO bằng cách giảm tải ban đầu.

2 lượt xem Cập nhật: 29/05/2026

Image loading attribute là gì?

Thuộc tính loading trong thẻ <img> là một thuộc tính HTML tiêu chuẩn cho phép trình duyệt tải hình ảnh theo cách 'lười' (lazy loading) mà không cần viết thêm JavaScript. Giá trị phổ biến nhất là loading="lazy", nghĩa là hình ảnh chỉ được tải khi người dùng cuộn đến gần vị trí hiển thị của nó trên trang.

Thuộc tính này được hỗ trợ chính thức từ Chrome 76 (tháng 7/2019), Firefox 75 (tháng 4/2020), Safari 15.4 (tháng 3/2022) và tất cả trình duyệt hiện đại khác. Giá trị mặc định là loading="eager" — tức tải ngay lập tức khi trang bắt đầu render.

Tại sao quan trọng trong SEO?

Image loading attribute ảnh hưởng trực tiếp đến trải nghiệm người dùng và các chỉ số xếp hạng của Google, đặc biệt là Core Web Vitals:

  • Tốc độ tải trang tăng rõ rệt: Giảm số lượng yêu cầu mạng ban đầu, giảm kích thước tổng thể payload, giúp đạt điểm LCP (Largest Contentful Paint) tốt hơn.
  • Giảm tiêu thụ băng thông: Người dùng di động hoặc kết nối chậm không phải tải hình ảnh ngoài khung nhìn — điều này cải thiện tỷ lệ thoát và thời gian ở lại trang.
  • Hỗ trợ lập chỉ mục hiệu quả hơn: Khi trang tải nhanh và ổn định, bot Google dễ thu thập (crawl) sâu hơn, đặc biệt với trang có nhiều hình ảnh như danh mục sản phẩm, blog ảnh hoặc portfolio.
  • Không gây hại cho SEO hình ảnh: Google xác nhận rằng lazy loading bằng loading="lazy" không làm giảm khả năng lập chỉ mục hình ảnh, miễn là hình ảnh vẫn tồn tại trong DOM và có thẻ alt hợp lệ.

Cách hoạt động

Trình duyệt sử dụng cơ chế dự đoán khoảng cách cuộn (scroll distance heuristic) để xác định khi nào nên tải hình ảnh. Khi người dùng cuộn trang, trình duyệt kiểm tra vị trí của từng thẻ <img loading="lazy"> so với khung nhìn (viewport). Nếu hình ảnh nằm trong phạm vi ~1250px phía trên/dưới viewport (giá trị này tùy trường hợp, có thể thay đổi theo phiên bản trình duyệt), trình duyệt sẽ bắt đầu tải.

Lưu ý: Hình ảnh có loading="lazy" không bị loại khỏi DOM — chúng vẫn xuất hiện trong mã nguồn, vẫn được đọc bởi bot tìm kiếm nếu có thẻ alt, src hợp lệ và không bị chặn bởi robots.txt hoặc thẻ noindex.

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

  1. Xác định hình ảnh phù hợp: Chỉ áp dụng loading="lazy" cho hình ảnh nằm ngoài khung nhìn ban đầu (ví dụ: dưới fold, trong tab ẩn, phần footer). Không dùng cho logo, banner đầu trang hoặc hình ảnh chính ở trên cùng — vì chúng cần hiển thị ngay.
  2. Thêm thuộc tính vào thẻ img:
    <img src="san-pham.jpg" alt="Áo thun cotton mềm mại" loading="lazy" width="400" height="300">
  3. Bắt buộc kèm width và height: Để tránh layout shift (dịch chuyển bố cục), luôn khai báo kích thước cố định. Nếu dùng CSS responsive, ưu tiên aspect-ratio hoặc kỹ thuật padding-top hack.
  4. Kiểm tra tương thích: Dùng DevTools → tab Network → lọc theo img, cuộn trang và quan sát thời điểm tải. Hoặc chạy Lighthouse (trong Chrome) để kiểm tra cảnh báo "Offscreen images should have `loading="lazy"`".
  5. Không dùng đồng thời với thư viện lazy load JavaScript: Tránh xung đột — nếu đã dùng loading="lazy", không cần IntersectionObserver hay LazySizes cho cùng một hình ảnh.

Lỗi thường gặp

  • Lỗi 1: Áp dụng loading="lazy" cho hình ảnh ở đầu trang
    → Gây chậm hiển thị nội dung chính, làm xấu LCP. Cách khắc phục: Chỉ dùng loading="eager" (hoặc bỏ thuộc tính) cho ảnh trong vùng fold đầu tiên.
  • Lỗi 2: Thiếu width/height hoặc dùng giá trị 0
    → Gây layout shift mạnh, ảnh hưởng CLS (Cumulative Layout Shift). Cách khắc phục: Luôn điền kích thước đúng tỉ lệ, hoặc dùng style="aspect-ratio: 4/3;" nếu trình duyệt hỗ trợ.
  • Lỗi 3: Dùng loading="lazy" trên ảnh nền CSS (background-image)
    → Không hiệu lực, vì thuộc tính chỉ hoạt động trên thẻ <img> và <iframe>. Cách khắc phục: Với ảnh nền, dùng loading không khả thi — thay vào đó tối ưu bằng image-set, srcset, hoặc lazy load qua JavaScript riêng.

Ví dụ thực tế

Dưới đây là bảng so sánh hiệu quả trước – sau khi áp dụng loading="lazy" trên một trang danh mục sản phẩm (120 ảnh):

Chỉ số Trước khi dùng Sau khi dùng Thay đổi
Thời gian tải ban đầu (TTFB + render) 3.8s 1.9s ↓ 50%
Số request ảnh tải ngay 42 6 ↓ 86%
Điểm LCP (trên mobile) 4.2s (đỏ) 1.8s (xanh) ↑ Đạt tiêu chuẩn CWV
Tỷ lệ thoát (GA4) 62% 47% ↓ 15 điểm %

Ghi chú: Kết quả đo trên thiết bị di động (3G, CPU 4x slowdown), dữ liệu từ báo cáo Lighthouse và Google Analytics 4 của khách hàng thực tế (Q2/2024).

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

Google có lập chỉ mục ảnh dùng loading="lazy" không?

Có. Googlebot xử lý hình ảnh có loading="lazy" như bình thường — miễn là ảnh có src hợp lệ, thẻ alt mô tả rõ ràng và không bị chặn bởi robots.txt hoặc thẻ noindex. Đây là hành vi được xác nhận chính thức bởi đội ngũ Webmaster Google.

Có nên dùng loading="lazy" cho ảnh trong bài viết blog?

Có, nhưng cần chọn lọc. Ảnh đầu bài (featured image) nên giữ eager. Các ảnh minh họa ở giữa hoặc cuối bài — đặc biệt nếu có nhiều hơn 3 ảnh — nên dùng loading="lazy". Luôn đảm bảo mỗi ảnh đều có alt ngắn gọn, đúng ngữ cảnh.

Thuộc tính loading có hoạt động trên <picture> và <source> không?

Không. Thuộc tính loading chỉ áp dụng trực tiếp cho thẻ <img> và <iframe>. Với <picture>, bạn đặt loading="lazy" trên thẻ <img> bên trong — không đặt trên <source>. Ví dụ:
<picture><source media="(min-width: 768px)" srcset="large.jpg"><img src="small.jpg" alt="Mô tả" loading="lazy"></picture>