Bài viết này sẽ phân tích rõ bản chất từng giải pháp, ưu – nhược điểm, và khi nào nên dùng cái nào để vừa nhanh, vừa chuẩn SEO, vừa không tự bắn vào chân mình.
loading=”lazy” là gì?
loading="lazy" là thuộc tính HTML native do trình duyệt cung cấp. Khi gắn vào thẻ <img>, trình duyệt sẽ tự quyết định chỉ tải ảnh khi ảnh sắp xuất hiện trong viewport.
<img src="image.jpg" loading="lazy" alt="Mô tả ảnh">
Điểm mạnh nhất của loading="lazy" là:
- Không cần JavaScript
- Không can thiệp vào
srcảnh - Trình duyệt tự tối ưu theo cache, network, user behavior
- Hoạt động tốt với SEO, crawler, accessibility
Script Lazy Load hoạt động như thế nào?
Script lazy load (JS lazyload) thường hoạt động bằng cách:
- Gỡ
srcảnh thật - Đưa ảnh vào
data-src,data-original… - Khi scroll tới, JavaScript mới gán lại
src
<img data-src="image.jpg" class="lazy">
Về bản chất, script lazy load luôn thay đổi src ảnh tại runtime.
Vấn đề lớn nhất của Script Lazy Load
Nghe thì có vẻ thông minh, nhưng script lazy load có một nhược điểm rất chí mạng:
- Ảnh luôn bị load lại khi scroll tới
- Kể cả người dùng đã từng vào trang trước đó
- Cache trình duyệt không được tận dụng tối đa
Nói thẳng ra: script lazy load không “tin” cache của trình duyệt, mà cứ mỗi lần user kéo tới là nó gán lại src, gây delay không cần thiết.
Vì sao loading=”lazy” làm tốt hơn?
loading="lazy" không động chạm gì tới src. Trình duyệt:
- Tự quyết định khi nào nên tải
- Tận dụng cache đã có
- Không reload ảnh nếu đã tồn tại trong cache
Điều này đặc biệt quan trọng với:
- Người dùng quay lại trang cũ
- Back / forward navigation
- Mobile browser có cache thông minh
Khi nào chỉ cần loading=”lazy”?
Rất đơn giản:
- Blog thông thường
- Trang tin tức
- Bài viết có ảnh bìa + ảnh minh họa trong nội dung
Trong các trường hợp này, loading=”lazy” là quá đủ. Nhẹ, nhanh, ít bug, không phụ thuộc JS.
Khi nào mới cần Script Lazy Load?
Script lazy load chỉ thực sự cần thiết khi:
- Trang gần như toàn ảnh (gallery, manga, truyện tranh, ảnh sản phẩm hàng loạt)
- Số lượng ảnh rất lớn
- Cần kiểm soát chi tiết hành vi load (placeholder, effect, prefetch từng block)
Ví dụ:
- Trang đọc truyện tranh dài hàng trăm ảnh
- Infinite scroll với image grid
- Ảnh có kích thước cực lớn
Kết luận: Dùng đúng thứ, đừng dùng cho oai
Nói thẳng và gọn:
- Ảnh bìa, ảnh trong bài blog →
loading="lazy" - Nội dung gần như toàn ảnh → mới cân nhắc script lazy load
Dùng script lazy load cho blog thường là overkill, vừa nặng JS, vừa phá cache, vừa dễ phát sinh lỗi SEO.
Trong đa số trường hợp, native lazy loading đã đủ thông minh hơn chúng ta. Việc còn lại là… đừng phá nó.
Bình luận