Các kiểu lazy load ảnh: bạn định chọn kiểu nào?

Plugin lazy load ảnh có rất nhiều để bạn chọn lựa, tất cả đều miễn phí, vì đây là tính năng không khó làm & cũng không làm người phát triển tốn tài nguyên duy trì. Ngoài ra bạn có thể dùng tính năng này trên đa số plugin cache, tối ưu tốc độ khác (có thể có phí).

Hiện có nhiều hình thức lazy load ảnh:

  • Đợi ảnh vào khung nhìn trình duyệt rồi mới tải: ưu điểm là tiết kiệm tài nguyên tối đa, vì chỉ ảnh thực sự được nhìn mới được tải về, nhược điểm có thể gây ra độ trễ (đặc biệt là khi hosting ở xa hoặc chất lượng không tốt). Đây là cách làm truyền thống, và hiện nhiều plugin vẫn đi theo hướng này, trong đó có cả LiteSpeed cache;
  • Tải trước ảnh khi nó đi vào khung nhìn trình duyệt: ưu điểm là vẫn tiết kiệm được tài nguyên ít nhiều nhưng hầu như không có hiện tưởng ảnh tải trễ, nhược điểm có thể tốn dung lượng hơn so với kiểu vào khung nhìn trình duyệt rồi mới tải. Đây là cách làm mới, một số plugin bạn có thể thử là Flying Images, Perfmatters;
  • Sử dụng LQIP: ưu điểm giúp cải thiện trải nghiệm người dùng đáng kể, nhược điểm là phức tạp hơn khi cần thêm cả ảnh LQIP làm nền. Không nhiều plugin có tính năng này. Plugin miễn phí tốt là LiteSpeed cache (đây là tùy chọn trên plugin này, bạn có thể dùng nó hoặc dùng kiểu truyền thống);
  • Mặc định tải sẵn những ảnh đầu tiên: ví dụ 3 ảnh đầu tiên trên trang, ưu điểm là các ảnh trong màn hình đầu tiên sẽ được tải ngay lập tức, nhược điểm gây hao phí nếu các ảnh đầu tiên nằm từ màn hình thứ hai trở đi. Hiện tôi chỉ thấy plugin FlyingPress là có tính năng này;

Nhìn chung tôi cho rằng trên đa số website, cách tải trước ảnh khi nó đi vào khung nhìn trình duyệt là tốt nhất:

  • Nó giảm thiểu tối đa hiện tượng tải trễ;
  • Không phức tạp như LQIP;
  • Trong nhiều trường hợp hiệu quả hơn kiểu mặc định tải sẵn các ảnh đầu tiên;

Lưu ý khi sử dụng lazy load

  • Bài viết có 1, 2 ảnh nhẹ nhàng thì có thể không cần dùng, vì lợi ích không đáng kể;
  • Luôn phải loại bỏ lazy load cho các ảnh thuộc màn hình đầu tiên, ví dụ logo, ảnh đại diện. Nhiều plugin có tính năng loại bỏ này, dựa vào tên ảnh, hoặc class của ảnh;
  • Luôn cần kiểm tra kỹ tính năng lazy load, đặc biệt trên thiết bị di động với kết nối không quá cao (ví dụ 3G) để kiểm tra xem độ trễ có lớn hay không?;
  • Kết hợp nén ảnh để giảm dung lượng ảnh sẽ giúp lazy load hoạt động hiệu quả hơn (nhờ giảm được thời gian tải -> giảm được đỗ trễ);
  • Hosting chất lượng cao hoặc/và CDN sẽ giúp tốc độ tải ảnh cao -> giảm đỗ trễ cho lazy load ảnh;
  • Đa số plugin không có khả năng lazy load ảnh background (cũng không nhiều website sử dụng ảnh background nặng làm nền), nếu trong trường hợp bạn cần có thể thử plugin Lazy Loader;

Vấn đề với ảnh thuộc màn hình đầu tiên

Trong khi logo, banner, hoặc một vài ảnh cố định khác thuộc màn hình đầu tiên rất dễ loại trừ lazy load thì các ảnh đại diện có thể không dễ dàng như vậy.

Ví dụ các ảnh đại diện cho bài viết, cho sản phẩm khi bạn muốn loại trừ nó thì sẽ phải thông qua class của ảnh chứ không phải thông qua tên như logo. Vì thông qua tên sẽ có rất nhiều tên ảnh phải thêm vào (giả sử bạn có 500 bài viết thì tương đương với 500 tên ảnh, mà cách này cũng rất thủ công khi phải cập nhật liên tục khi có bài viết mới).

Rắc rối ở đây là trong khi một số theme được thiết kế tốt để đánh dấu các class này thì một số theme khác lại không, đặc biệt khi nó được thiết kế bằng page builder với một người không chuyên. Hệ quả: bạn không thể loại trừ lazy load nó dựa theo tên cũng như dựa theo class (vì class trùng tên với các ảnh bên dưới hoặc thậm chí không có class).

Trường hợp đó, biện pháp tải ảnh ngay lập tức dựa vào số ảnh tính từ đầu trang là giải pháp rất thú vị. Nó sẽ giúp bạn không còn phải lo lắng về class hay tên ảnh nữa.

Leave a Comment