Categories Lazy load Lazysizes

Sử dụng lazysizes để lazy load ảnh

Lazy load là chiến lược trong đó người ta chỉ tải các tài nguyên mà người dùng cần, chứ không tải tất cả trước trong lượt tải đầu tiên. Cách tiếp cận này giải phóng cho các tài nguyên chưa cần thiết trong lần tải đầu tiên (initial page load) và tránh phải tải một số tài nguyên mà có thể người dùng sẽ không bao giờ sử dụng đến.

Các ảnh ở dưới màn hình đầu tiên (offscreen*) trong lần tải đầu tiên là ứng cử viên lý tưởng để áp dụng kỹ thuật này. Thư viện có chất lượng cực phẩm là lazysizes sẽ giúp bạn triển khai chiến lược này một cách dễ dàng.

màn hình đầu tiên trong lazy load

(*): Dưới màn hình đầu tiên, tiếng Anh có thể là Below the fold hoặc Offscreen, còn Trên màn hình đầu tiênAbove the fold.


Lazysizes là gì?

Lazysizes (https://github.com/aFarkas/lazysizes) là thư viện phổ biến nhất dùng để lazy load ảnh. Nó là một đoạn mã JavaScript tải hình ảnh một cách thông minh khi người dùng cuộn nội dung và ưu tiên cho các ảnh mà người dùng sẽ sớm nhìn thấy (đi vào khung nhìn trình duyệt / viewport).

Lazysizes là lựa chọn tốt vì nó sử dụng API Intersection Observer (ở trình duyệt nào khả dụng) có hiệu năng cao để nhận biết phần tử nào của trang đang ở trong viewport. Điều này giúp nó có hiệu suất cao hơn so với các giải pháp cũ sử dụng cách tiếp cận kiểu như sử dụng các trình xử lý sự kiện (event handlers / xem ví dụ ở bài kiencang.net/lazy-load-anh-va-video/#Lazy_load_anh ở phần trình xử lý sự kiện).

PS: thống kê từ Can I Use thì API Intersection Observer được tất cả các trình duyệt lớn hỗ trợ.


Thêm lazysizes vào website

Đây là cách đơn giản để thêm lazysizes:

  • Thêm thư viện lazysizes vào các trang của bạn;
  • Lựa chọn các ảnh mà bạn muốn lazy load (tải lười ảnh);
  • Cập nhật thẻ <img> và/hoặc thẻ <picture> cho các ảnh đó.

Thêm mã lazysizes vào trang

Thêm mã lazysizes vào các trang của bạn như dưới đây (đưa nó vào trong thẻ head, và bên dưới CSS và JS khác):

<script src="lazysizes.min.js" async></script>

Cập nhật các thẻ <img> và/hoặc <picture>

Hướng dẫn cho thẻ <img>:

Trước:

<img src="flower.jpg" alt="">

Sau:

<img data-src="flower.jpg" class="lazyload" alt="">

Bạn có thể xem trang ví dụ áp dụng lazysizes với thẻ <img>: static.kiencang.net/2020/lazysizes-demo1.html

Khi bạn cập nhật thẻ <img>, bạn thực hiện hai thay đổi:

  • Bổ sung class lazyload: Điều này cho lazysizes biết rằng đây là ảnh nên áp dụng tải lười biếng;
  • Thay đổi thuộc tính src thành data-src: Khi đến thời điểm cần tải ảnh, lazysizes sẽ thiết lập giá trị thuộc tính src của ảnh bằng giá trị lấy từ thuộc tính data-src;

Hướng dẫn cho thẻ <picture>:

Trước:

<picture>
  <source type="image/webp" srcset="flower.webp">
  <source type="image/jpeg" srcset="flower.jpg">
  <img src="flower.jpg" alt="">
</picture>

Sau:

<picture>
  <source type="image/webp" data-srcset="flower.webp">
  <source type="image/jpeg" data-srcset="flower.jpg">
  <img data-src="flower.jpg" class="lazyload" alt="">
</picture>

Trang ví dụ áp dụng lazysizes với thẻ picture: static.kiencang.net/2020/lazysizes-picture.html

Khi bạn cập nhật các thẻ <picture> bạn thực hiện hai thay đổi:

  • Thêm class lazyload cho thẻ <img>
  • Thay đổi thuộc tính srcset của thẻ <source> thành data-srcset.

Khi sử dụng định dạng ảnh webp trong phần source, trình duyệt sẽ dùng ảnh định dạng này để hiển thị trên trình duyệt phù hợp:

ảnh định dạng webp

Trên trình duyệt không hỗ trợ webp, trình duyệt vẫn hiển thị ảnh bình thường, vì chúng ta đã thực hiện dự phòng (fallback) bằng ảnh định dạng jpg, ví dụ dưới đây là trình duyệt IE 11:

vẫn hiển thị ảnh JPG trên IE 11

Kiểm tra

Bạn mở DevTools và cuộn trang để xem các thay đổi diễn ra. Trong quá trình bạn cuộn, bạn phải thấy các yêu cầu mạng mới xuất hiện và class của thẻ <img> phải thay đổi từ lazyload thành lazyloaded.

Thêm vào đó, bạn có thể sử dụng Lighthouse để kiểm tra xem bạn có bỏ quên bất cứ ảnh nào dưới màn hình đầu tiên hay không. Bạn chạy kiểm tra hiệu suất của Lighthouse (Lighthouse > Options > Performance) và xem các kết quả ở khu vực Defer offscreen images (Trì hoãn tải các ảnh ngoài màn hình).

(Dịch từ bài viết: Use lazysizes to lazyload images, tác giả: Katie Hempenius, trang web[.]dev)


Vài lời của người dịch: Từ bài viết này tôi thấy có một triển vọng rất lớn để triển khai lazysizes trên trang WordPress & đặc biệt là các trang bạn tự viết. Mặc dù thư viện này không có plugin chính thức cho WP (có một plugin có tên tương tự, nhưng chỉ là hàng nhái tên mà thôi, không hiểu sao tác giả thư viện lại đồng ý cho tác giả plugin lấy tên đó, tuy nhiên, ít nhất thì tác giả plugin cũng công khai thông tin này!).

OK, quay lại chủ đề chính, với những ưu điểm mà lazysizes mang lại, nó rõ ràng mạnh hơn tất cả các plugin mà tôi biết, khả năng tùy chỉnh sâu này có lẽ rất thích hợp cho những ai am hiểu chút ít về lập trình và can thiệp trên những trang quan trọng nhất để tối ưu tốc độ hơn nữa.

Kết hợp lazysizes + ảnh webp + mã dự phòng <noscript> sẽ là combo mà tôi nghĩ sẽ rất thú vị, tôi sẽ sớm thử nghiệm nó, và viết một bài sau. Xin chào và hẹn gặp lại.

Back to Top