Image Lazy Loading (loading="lazy")

Image Lazy Loading (loading="lazy") là gì?

Image Lazy Loading là tính năng tích hợp sẵn trong HTML5 cho phép trình duyệt chỉ tải ảnh khi chúng sắp xuất hiện trong khung nhìn (viewport) của người dùng — thay vì tải tất cả ảnh ngay khi trang bắt đầu render. Cách triển khai phổ biến nhất là thêm thuộc tính loading="lazy" vào thẻ <img> hoặc <iframe>.

Đây không phải là kỹ thuật JavaScript tùy chỉnh, mà là một tiêu chuẩn được hỗ trợ trực tiếp bởi các trình duyệt hiện đại (Chrome, Edge, Firefox từ phiên bản 75+, Safari từ 15.4). Khi bật, trình duyệt sẽ tự động trì hoãn tải ảnh nằm ngoài viewport cho đến khi người dùng cuộn gần tới vị trí đó — giúp giảm khối lượng dữ liệu ban đầu và cải thiện hiệu suất trang.

Tại sao quan trọng trong SEO?

Google xếp hạng trang dựa trên trải nghiệm người dùng — và tốc độ tải là một yếu tố xếp hạng trực tiếp trong On-Page SEO. Image Lazy Loading ảnh hưởng tích cực đến ba chỉ số Core Web Vitals:

• LCP (Largest Contentful Paint): Giảm thời gian tải ảnh lớn đầu tiên bằng cách ưu tiên chỉ những ảnh trong viewport.
• CLS (Cumulative Layout Shift): Ngăn hiện tượng nhảy layout do ảnh chưa có kích thước cố định đột ngột xuất hiện — đặc biệt khi kết hợp với thuộc tính width và height hoặc aspect-ratio.
• FID/INP (Interaction to Next Paint): Giảm áp lực lên main thread nhờ giảm số lượng yêu cầu mạng đồng thời lúc tải trang.

Ngoài ra, lazy loading còn giúp tiết kiệm băng thông cho người dùng di động, giảm tỷ lệ thoát (bounce rate) và tăng thời gian tương tác — những tín hiệu gián tiếp Google sử dụng để đánh giá chất lượng trang.

Cách hoạt động

Trình duyệt đọc thuộc tính loading="lazy" và áp dụng cơ chế phát hiện vị trí ảnh dựa trên:

• Vị trí ảnh so với viewport hiện tại,
• Tốc độ cuộn của người dùng,
• Mức độ kết nối mạng (ví dụ: trên mạng chậm, trình duyệt có thể tải sớm hơn một chút để tránh giật lag).

Ảnh không có loading="lazy" (hoặc có loading="eager") sẽ được tải ngay lập tức trong giai đoạn parsing HTML. Ảnh có loading="lazy" chỉ được fetch khi nằm trong khoảng cách mặc định (~1250px phía dưới viewport), trừ khi người dùng cuộn nhanh — lúc đó trình duyệt tối ưu lại lịch tải.

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

1. Bước 1: Kiểm tra hỗ trợ trình duyệt — Dùng caniuse.com. Hỗ trợ hiện tại đạt >95% toàn cầu (tính đến tháng 6/2024). Không cần polyfill nếu không phục vụ người dùng IE hoặc Android Browser cũ.
2. Bước 2: Thêm thuộc tính vào thẻ <img>:

   <img src="banner.jpg" alt="Banner khuyến mãi" width="800" height="400" loading="lazy">

3. Bước 3: Đảm bảo ảnh có kích thước rõ ràng — luôn khai báo width và height, hoặc dùng CSS aspect-ratio: 16/9 để tránh CLS.
4. Bước 4: Loại trừ ảnh quan trọng — ảnh ở vùng đầu trang (hero image, logo, ảnh sản phẩm đầu tiên) nên giữ loading="eager" hoặc bỏ thuộc tính này hoàn toàn.
5. Bước 5: Kiểm tra sau triển khai — Dùng DevTools > Network tab, lọc theo Img, cuộn trang và quan sát thời điểm ảnh được tải.

Lỗi thường gặp

• Ảnh không hiển thị khi cuộn: Do thiếu width/height hoặc CSS override làm mất kích thước — gây lỗi layout và đôi khi chặn lazy load. Cách khắc phục: Kiểm tra computed styles, đảm bảo ảnh có chiều cao tối thiểu (dùng min-height hoặc aspect-ratio).
• CLS tăng bất thường: Xảy ra khi ảnh lazy load không có placeholder hoặc kích thước — trình duyệt không biết dành chỗ trước. Cách khắc phục: Dùng background-color nhẹ + aspect-ratio, hoặc SVG placeholder.
• Lazy load bị vô hiệu hóa trên một số CMS: Một số plugin WordPress (như WP Rocket, Smush) tự thêm lazy load bằng JS — gây xung đột với loading="lazy" gốc. Cách khắc phục: Tắt lazy load JS trong plugin, hoặc cấu hình để chỉ áp dụng cho ảnh không có thuộc tính loading.
• Ảnh nền (CSS background-image) không hỗ trợ loading="lazy": Đây là giới hạn kỹ thuật — thuộc tính chỉ hoạt động với thẻ <img> và <iframe>. Cách khắc phục: Dùng Intersection Observer API để lazy load ảnh nền, hoặc chuyển sang thẻ <img> với object-fit.

Ví dụ thực tế

Một trang danh mục sản phẩm có 20 ảnh, mỗi ảnh ~150 KB. Nếu tải đồng loạt: 3 MB dữ liệu ngay lập tức → LCP chậm, CLS cao, người dùng di động dễ thoát.

Sau khi áp dụng loading="lazy" + width/height + placeholder màu xám nhạt:

Chỉ số	Trước khi áp dụng	Sau khi áp dụng	Thay đổi
LCP	4.2s	1.8s	Giảm 57%
CLS	0.28	0.03	Giảm 89%
Dữ liệu tải ban đầu	2.9 MB	0.4 MB	Giảm 86%
Tỷ lệ thoát (mobile)	62%	41%	Giảm 21 điểm %

Kết quả đo trên công cụ PageSpeed Insights và GA4 (dữ liệu thực từ website thương mại điện tử Việt Nam, tháng 5/2024).

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

loading="lazy" có hoạt động với ảnh trong <picture>?

Có — nhưng chỉ áp dụng cho toàn bộ thẻ <picture> thông qua thẻ <img> bên trong. Bạn đặt loading="lazy" vào thẻ <img>, không phải vào <source>. Các định dạng webp, avif vẫn được lazy load bình thường.

Có cần dùng cả lazy load HTML và JavaScript không?

Không. Nếu đã dùng loading="lazy", việc thêm thư viện JavaScript (như lazysizes) là dư thừa và có thể gây xung đột. Chỉ dùng JavaScript khi cần hỗ trợ trình duyệt quá cũ (< 2% thị phần) — nhưng lúc đó nên cân nhắc giữa chi phí bảo trì và lợi ích SEO.

Ảnh SVG có cần lazy load không?

Thường không cần — vì SVG thường rất nhẹ (< 10 KB), và việc trì hoãn tải không mang lại cải thiện đáng kể. Tuy nhiên, nếu SVG phức tạp (có nhiều layer, animation, kích thước lớn), việc áp dụng loading="lazy" vẫn an toàn và được hỗ trợ đầy đủ.