Lazy loading ảnh HTML: Hoãn đúng ảnh, đừng làm chậm phần đầu trang

Một bài hướng dẫn có nhiều ảnh chụp màn hình không nhất thiết phải tải tất cả ngay lúc mở trang. Thuộc tính loading của ảnh giúp trình duyệt trì hoãn một số tài nguyên chưa cần, nhưng áp dụng cho mọi ảnh có thể làm ảnh quan trọng xuất hiện muộn. Hãy phân loại theo vị trí và vai trò của ảnh trước khi tối ưu.

1. Lazy loading thay thời điểm tải, không giảm dung lượng file

Theo tài liệu phần tử img của MDN, loading="lazy" cho phép trì hoãn việc tải ảnh ngoài vùng nhìn thấy theo quyết định của trình duyệt. Đừng giả định request chỉ bắt đầu khi ảnh đã xuất hiện hoàn toàn trên màn hình.

Một file ảnh lớn vẫn là file lớn khi được tải. Vì vậy, nén ảnh, chọn kích thước phù hợp và loại bỏ ảnh không cần thiết vẫn là các việc riêng. Lazy loading không thay thế những bước này.

2. Ví dụ cho ảnh nằm sâu trong bài viết

<img
  src="/images/settings-screen.webp"
  alt="Màn hình cài đặt với tùy chọn thông báo đã bật"
  width="1200"
  height="800"
  loading="lazy">

Đường dẫn là minh họa; cần thay bằng ảnh thật có tỷ lệ tương ứng. width và height giúp trình duyệt biết tỷ lệ để dành chỗ trước khi ảnh tải. Nếu ảnh nằm trong vùng nội dung co giãn, có thể dùng CSS sau cho lớp ảnh của bài viết:

.article-image {
  max-width: 100%;
  height: auto;
}

Gắn class="article-image" vào ảnh khi dùng quy tắc đó. Kiểm tra computed style nếu stylesheet khác đặt chiều cao cố định, vì thuộc tính HTML không tự bảo đảm mọi bố cục đều giữ đúng tỷ lệ.

3. Đừng trì hoãn ảnh quan trọng ngay đầu trang

Ảnh mở đầu mà người dùng nhìn thấy ngay nên được xem xét khác với ảnh minh họa ở cuối bài. Bỏ lazy cho ảnh cần hiển thị sớm, rồi đo thời điểm xuất hiện thực tế. Không gắn lazy chỉ vì tất cả ảnh đi qua cùng một template.

Trên màn hình lớn và nhỏ, vùng nhìn thấy ban đầu khác nhau. Hãy kiểm tra cả hai thay vì phân loại chỉ theo thứ tự ảnh trong mã nguồn. Một ảnh đứng thứ hai vẫn có thể hiện ngay khi mở trang.

4. Cách kiểm tra có ý nghĩa

1. Dùng trang thử nghiệm đủ dài để có ảnh nằm xa phần đầu.
2. Mở Network, lọc request ảnh và tải lại trong điều kiện cache được kiểm soát.
3. Quan sát thời điểm tải ban đầu, sau đó cuộn dần xuống.
4. Kiểm tra ảnh có xuất hiện kịp và nội dung có bị nhảy khi ảnh hiện không.
5. Thử mạng chậm và viewport nhỏ để phát hiện khoảng trống kéo dài.

Nếu một ảnh lazy tải ngay, chưa đủ để kết luận thuộc tính không hoạt động: ảnh có thể nằm trong khoảng trình duyệt quyết định tải trước. Ghi lại điều kiện đo và so sánh cùng một trang trước/sau thay đổi.

5. Checklist trước khi phát hành

• Ảnh quan trọng đầu trang không bị trì hoãn ngoài ý muốn.
• Ảnh dưới bài có kích thước và tỷ lệ đúng.
• Alt mô tả đúng chức năng nội dung, không dùng để nhồi từ khóa.
• Cuộn nhanh không làm mất ảnh hoặc nội dung liên quan.
• File ảnh đã được tối ưu dung lượng độc lập với loading.
• Không kết luận hiệu quả chỉ từ số request lúc mở trang; kiểm tra trải nghiệm khi đọc tiếp.

Lazy loading hữu ích khi hoãn đúng ảnh chưa cần. Một trang tốt phải nhanh ở lần hiển thị đầu và vẫn dễ đọc khi người dùng cuộn đến phần còn lại.