Lazy loading ảnh trong HTML: tăng tốc trang web

[Nhật Quang]

Lazy loading (tải lười) giúp trang web chỉ tải ảnh khi cần, giảm băng thông ban đầu và đẩy nhanh thời gian hiển thị. Dùng thuộc tính loading="lazy" cho và là cách đơn giản để cải thiện tốc độ tải trang.

Lazy loading là gì?​

Lazy loading có nghĩa là chỉ tải tài nguyên web khi người dùng sắp nhìn thấy chúng — thường là khi cuộn đến vị trí tương ứng trên trang. Ứng dụng phổ biến nhất là ảnh: ảnh bên dưới phần hiển thị ban đầu (below-the-fold) sẽ chỉ được tải khi người dùng cuộn đến gần.

Sử dụng loading="lazy"​

Chỉ cần thêm thuộc tính loading="lazy" vào thẻ hoặc . Điều này trì hoãn việc tải tài nguyên cho đến khi phần tử gần xuất hiện trong viewport, tránh các tải xuống không cần thiết và giúp trình duyệt tập trung vào những yêu cầu quan trọng hơn.

Lợi ích thực tế​

• Giảm băng thông tiêu thụ lúc mở trang lần đầu.
• Tăng tốc hiển thị phần nội dung chính, cải thiện chỉ số như Largest Contentful Paint (LCP).
• Đơn giản, được hỗ trợ sẵn trên các trình duyệt chính: Chrome, Firefox, Safari, Edge.

Hạn chế và lưu ý​

• loading="lazy" không áp dụng cho ảnh nền (background-image). Đối với ảnh nền bạn cần dùng JavaScript để hoãn tải, ví dụ kiểm tra vị trí bằng Intersection Observer rồi thêm class hoặc thay đổi style để gán ảnh nền.
• Sử dụng thư viện lazy-loading thường yêu cầu nạp JavaScript trước khi ảnh bắt đầu tải, có thể gây chậm hiển thị nếu chuỗi yêu cầu dài — điều này đặc biệt ảnh hưởng đến ảnh LCP.
• Nếu bạn muốn người đọc tải toàn bộ ảnh (ví dụ để xem khi offline), có thể xóa thuộc tính loading sau khi trang đã tải ban đầu để các ảnh tiếp tục được tải về ngay sau đó. Trade-off là tiêu tốn thêm băng thông cho người dùng di động.

Tác động lên điểm số Lighthouse​

Việc bật lazy loading có thể cải thiện thời gian hiển thị ban đầu nhưng đôi khi làm tăng Time to Interactive (TTI) vì nhiều hoạt động mạng được dời sang muộn hơn, khiến mạng luôn bận lâu hơn. Nếu cần, một cách khắc phục là đẩy lùi những yêu cầu bổ sung (ví dụ bằng cách chờ lâu hơn trước khi gửi chúng) — Lighthouse giả định mạng nhàn rỗi sau 5 giây không hoạt động, nên tăng ngưỡng này có thể cải thiện TTI trong báo cáo.

Gợi ý triển khai​

• Áp dụng loading="lazy" cho các ảnh không phải LCP; cân nhắc không lazy ảnh quan trọng nhất của trang.
• Với ảnh nền, dùng Intersection Observer để gán ảnh khi cần.
• Nếu muốn người đọc có thể đọc offline, xóa loading sau khi tải trang để các ảnh được tải tiếp.
• Kiểm tra thay đổi bằng công cụ đo tốc độ (hoạt động A/B hoặc thử nghiệm) trước khi triển khai rộng.

Kết luận​

Lazy loading là kỹ thuật đơn giản nhưng hiệu quả để ưu tiên các yêu cầu quan trọng, giảm thời gian render ban đầu và tối ưu trải nghiệm người dùng. Tuy nhiên cần cân nhắc ảnh hưởng lên TTI và băng thông người dùng khi quyết định cấu hình chi tiết.

Nguồn: https://www.debugbear.com/blog/image-lazy-loading