Cách trì hoãn tải ảnh ngoài màn hình hiệu quả

[Nhật Quang]

Trì hoãn tải ảnh ngoài màn hình (lazy loading) là kỹ thuật tối ưu hiệu suất web giúp giảm thời gian tải và cải thiện Core Web Vitals. Bài viết này giải thích cách hoạt động, cách dùng thuộc tính loading và những lưu ý thực tế khi áp dụng.

Trì hoãn tải ảnh ngoài màn hình, hay lazy loading, là phương pháp chỉ tải các ảnh không nằm trong vùng nhìn thấy của người dùng khi chúng sắp xuất hiện trong viewport. Kỹ thuật này đặc biệt hữu ích với các trang nhiều ảnh, giúp trình duyệt ưu tiên tải tài nguyên quan trọng và hiển thị nội dung phía trên màn hình nhanh hơn.

Trước đây, lazy loading thường yêu cầu viết mã JavaScript phức tạp hoặc tích hợp thư viện bên thứ ba để lắng nghe sự kiện và tính toán vị trí phần tử. Hiện nay, hầu hết trình duyệt hiện đại đã hỗ trợ thuộc tính HTML loading, cho phép khai báo chiến lược tải ảnh một cách đơn giản và thân thiện với hiệu suất.

Ảnh ngoài màn hình là những ảnh không hiển thị trong viewport ban đầu, ví dụ ảnh nằm dưới nếp gấp (below the fold), trong menu trượt, menu dropdown lớn, carousel ảnh, hoặc các vùng nội dung ẩn khác. Khi người dùng vào trang, không thể biết trước họ sẽ cuộn hay tương tác đến đâu, nên nên chỉ tải những ảnh đó khi cần.

Lý do nên trì hoãn tải ảnh không quan trọng là để giảm thiểu băng thông và cho phép các tài nguyên quan trọng hơn (CSS, JS, ảnh above-the-fold) tải nhanh hơn. Ngoài ảnh, bạn cũng có thể trì hoãn các tài nguyên không quan trọng khác như tập tin JavaScript hoặc CSS không bắt buộc ngay lập tức.

Việc lazy load tốc độ tải trang và có thể cải thiện các chỉ số Web Vitals liên quan đến thời gian tải như First Contentful Paint (FCP), Largest Contentful Paint (LCP) và Interaction to Next Paint (INP).

Khi thực hiện lazy loading cần lưu ý hai vấn đề chính: tránh gây layout shift bằng cách luôn khai báo width và height cho ảnh, và không trì hoãn các ảnh quan trọng cho LCP hay những ảnh bắt buộc hiển thị lúc đầu trang. Trì hoãn sai có thể khiến trải nghiệm người dùng kém đi hoặc làm xấu đi kết quả đo hiệu suất.

Nếu không lazy load, trình duyệt thường tải tất cả ảnh ngay khi tải trang, gây tắc băng thông và chậm trễ trong việc hiển thị nội dung quan trọng. Các công cụ phân tích hiệu suất như Lighthouse hay DebugBear sẽ cảnh báo khi có nhiều ảnh ngoài màn hình và gợi ý tiết kiệm băng thông nếu trì hoãn chúng.

Công cụ Lighthouse hiển thị audit "Defer offscreen images" cùng với ước lượng lưu lượng có thể tiết kiệm và danh sách ảnh ngoài màn hình. DebugBear cung cấp thông tin chi tiết hơn, kèm filmstrip hiển thị cách trang render và waterfall của các request ảnh.

Cách đơn giản nhất để trì hoãn ảnh là dùng thuộc tính loading trên thẻ img hoặc iframe, ví dụ loading="lazy". Đừng quên khai báo width và height để tránh nhảy layout. Thuộc tính này được hỗ trợ rộng rãi trên trình duyệt hiện đại nên có thể dùng trực tiếp trong môi trường production. Giá trị khác của loading là "eager" (mặc định), yêu cầu tải ngay lập tức.

Khi thêm loading="lazy", trình duyệt thường khởi tạo một IntersectionObserver để theo dõi vị trí ảnh so với viewport thay vì tải file ngay. Trình duyệt còn có thể ước lượng và bắt đầu tải một vài ảnh trước khi chúng hoàn toàn xuất hiện để đảm bảo trải nghiệm mượt mà — ví dụ một số ảnh đầu có thể được tải sẵn dù bạn chỉ bật lazy loading từ ảnh thứ tư.

Về placeholder khi ảnh chưa tải, cần cung cấp phản hồi hình ảnh cho người dùng, nhất là trên mạng hoặc thiết bị chậm. Có nhiều chiến lược: sử dụng màu nền đơn giản, thumbnail kích thước nhỏ hoặc các kỹ thuật lo-fi như SQIP và LQIP Modern để tạo ảnh phiên bản nhẹ dễ hiển thị trước khi ảnh chính tải xong.

Mẹo thực tế: ước lượng kỹ các ảnh sẽ hiển thị ở lần tải đầu (cân nhắc màn hình nhỏ theo chiều dọc trên mobile), thử nghiệm với công cụ như Lighthouse và DebugBear, và luôn cân nhắc không trì hoãn ảnh quan trọng cho LCP. Kiểm tra trên thiết bị thật để đảm bảo trải nghiệm mượt mà trước khi triển khai rộng rãi.

Nguồn: https://www.debugbear.com/blog/defer-offscreen-images