Lazy Loading (native)

Lazy Loading (native) là gì?

Lazy Loading (native) là tính năng tải chậm tích hợp sẵn trong trình duyệt, cho phép trì hoãn việc tải ảnh (<img>) và iframe (<iframe>) cho đến khi phần tử đó gần xuất hiện trong khung nhìn (viewport) của người dùng. Tính năng này được kích hoạt bằng thuộc tính HTML chuẩn loading="lazy", không cần JavaScript hay thư viện bên ngoài.

Khác với lazy loading do lập trình viên tự viết (custom lazy loading), phiên bản native được hỗ trợ trực tiếp bởi trình duyệt — nghĩa là hoạt động nhanh hơn, ổn định hơn và tiêu tốn ít tài nguyên CPU hơn. Từ tháng 09/2019, Chrome 76 trở đi đã hỗ trợ đầy đủ; Firefox từ phiên bản 75 (tháng 04/2020), Safari từ iOS 15.4 và macOS Monterey 12.3 (tháng 03/2022). Các trình duyệt cũ hơn sẽ bỏ qua thuộc tính này mà không gây lỗi.

Tại sao quan trọng trong SEO?

Lazy Loading (native) ảnh hưởng trực tiếp đến ba yếu tố xếp hạng chính: tốc độ trang, trải nghiệm người dùng (Core Web Vitals) và hiệu suất băng thông. Google coi tốc độ tải ban đầu (Largest Contentful Paint – LCP) và khả năng tương tác sớm (Interaction to Next Paint – INP) là tín hiệu xếp hạng rõ ràng. Khi hình ảnh không cần thiết ngay lập tức bị trì hoãn tải, kích thước yêu cầu ban đầu giảm, giúp trang hiển thị nhanh hơn — đặc biệt trên mạng di động chậm hoặc thiết bị cấu hình thấp.

Ngoài ra, việc giảm số lượng yêu cầu HTTP và dữ liệu tải xuống sớm giúp tiết kiệm băng thông cho người dùng, tăng tỷ lệ giữ chân (bounce rate thấp hơn) và cải thiện chỉ số Cumulative Layout Shift (CLS) nếu kết hợp đúng cách với thuộc tính width và height.

Cách hoạt động

Trình duyệt theo dõi vị trí các phần tử có loading="lazy" trong DOM. Khi phần tử nằm trong phạm vi dự đoán sẽ vào viewport (thường là ~1250px phía trước hoặc sau khung nhìn hiện tại), trình duyệt bắt đầu tải tài nguyên. Nếu người dùng cuộn nhanh hoặc phần tử không bao giờ vào viewport, nó sẽ không được tải — giúp tiết kiệm tài nguyên.

Giá trị mặc định của thuộc tính loading là "eager". Chỉ hai giá trị hợp lệ: "lazy" và "eager". Trình duyệt không hỗ trợ giá trị khác như "auto" hay "on-demand".

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

Thực hiện lazy loading native rất đơn giản — chỉ cần thêm thuộc tính vào thẻ phù hợp:

1. Với ảnh: Thêm loading="lazy" vào thẻ <img>. Bắt buộc kèm width và height để tránh dịch chuyển bố cục (layout shift).
2. Với iframe: Thêm loading="lazy" vào thẻ <iframe>. Lưu ý: chỉ áp dụng hiệu quả với iframe có nguồn không phải cùng miền nếu được cấu hình CORS đúng cách.
3. Không áp dụng cho: Ảnh nền CSS (background-image), ảnh trong <picture> (phải đặt trên từng thẻ <img> con), hoặc ảnh ở vùng “above-the-fold” (phần hiển thị ngay khi mở trang).
4. Kiểm tra hỗ trợ: Dùng DevTools → tab Network → lọc theo img hoặc iframe, cuộn trang và quan sát thời điểm tải. Có thể dùng console.log('loaded', event.target) gắn sự kiện load để kiểm tra.

Lỗi thường gặp

• Ảnh không hiển thị hoặc bị mất trên một số trình duyệt: Do thiếu thuộc tính width/height → gây layout shift → trình duyệt hủy tải. Cách khắc phục: Luôn khai báo kích thước rõ ràng; dùng CSS aspect-ratio nếu cần linh hoạt hơn.
• Lazy loading không hoạt động trên iframe nhúng YouTube/Vimeo: Một số iframe nhúng có thuộc tính loading="eager" ghi đè hoặc bị chặn do chính sách bảo mật (sandbox). Cách khắc phục: Xóa thuộc tính loading thừa, đảm bảo iframe không có allow="..." mâu thuẫn, kiểm tra console lỗi CORS.
• Hiệu ứng “flash” khi ảnh tải muộn: Người dùng thấy placeholder trắng trước khi ảnh xuất hiện. Cách khắc phục: Dùng <img> với srcset + sizes, kết hợp màu nền phù hợp hoặc SVG placeholder nhỏ.
• Ảnh quan trọng bị tải chậm do nhầm lẫn: Ảnh logo, banner đầu trang, hoặc sản phẩm nổi bật ở vị trí đầu tiên không nên dùng lazy loading. Cách khắc phục: Chỉ áp dụng cho ảnh từ vị trí thứ 2 trở đi hoặc khi xác định chắc chắn chúng nằm dưới fold.

Ví dụ thực tế

Dưới đây là đoạn mã HTML minh họa đúng và sai:

Loại	Mã đúng	Mã sai
Ảnh	<img src="product.jpg" alt="Sản phẩm A" width="600" height="400" loading="lazy">	<img src="product.jpg" alt="Sản phẩm A" loading="lazy"> (thiếu kích thước)
IFrame YouTube	<iframe src="https://www.youtube.com/embed/abc" width="560" height="315" loading="lazy"></iframe>	<iframe src="https://www.youtube.com/embed/abc" loading="lazy"></iframe> (thiếu kích thước + không kiểm tra sandbox)
Ảnh above-the-fold	<img src="logo.png" alt="Logo" width="200" height="50" loading="eager">	<img src="logo.png" alt="Logo" width="200" height="50" loading="lazy"> (gây chậm LCP)

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

Lazy loading native có tương thích với tất cả trình duyệt?

Không. Chrome 76+, Firefox 75+, Safari 15.4+ và Edge 79+ hỗ trợ đầy đủ. Các trình duyệt cũ hơn bỏ qua thuộc tính mà không báo lỗi — ảnh vẫn tải bình thường (eager). Bạn không cần polyfill, nhưng nên kiểm tra phân tích người dùng để đánh giá mức độ phủ.

Có nên dùng lazy loading native thay hoàn toàn cho giải pháp JavaScript?

Có thể — nếu chỉ cần tải ảnh và iframe cơ bản. Native nhanh hơn, an toàn hơn và không phụ thuộc vào JS. Tuy nhiên, với yêu cầu nâng cao như tải theo sự kiện cuộn tùy chỉnh, hiệu ứng fade-in, hoặc xử lý ảnh WebP/AVIF theo khả năng trình duyệt, bạn vẫn cần custom lazy loading. Hai cách có thể dùng song song (native làm mặc định, JS làm bổ sung) — tùy trường hợp.

Lazy loading ảnh có ảnh hưởng đến lập chỉ mục hình ảnh của Google?

Không. Googlebot xử lý loading="lazy" như một tín hiệu gợi ý về ưu tiên tải, không phải lệnh cấm lập chỉ mục. Ảnh vẫn được thu thập và lập chỉ mục bình thường, miễn là chúng tồn tại trong HTML, có alt mô tả rõ ràng và không bị chặn bởi robots.txt hay thẻ noindex. Thời điểm tải không ảnh hưởng đến khả năng hiển thị trong Tìm kiếm Hình ảnh.