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 phương án để bạn chọn lựa, tất cả đều miễn phí, vì đây là tính năng không khó triển khai, 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 hầu hết 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 (viewport) 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 (miễn phí), Perfmatters (có phí). Trong đa số trường hợp tôi khuyến khích sử dụng cách này;
  • Triển khai 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, bạn có thể dùng nó hoặc dùng kiểu truyền thống). Một số website có lưu lượng truy cập lớn, chẳng hạn như Medium đang sử dụng kiểu lazy load bổ sung LQIP;
  • 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 trên;

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

  • WordPress mới tích hợp sẵn tính năng lazy load ảnh kiểu native nên dù bạn không dùng plugin, theo mặc định trang vẫn lazy load ảnh. Khi bạn dùng plugin, các cài đặt của bạn sẽ ghi đè lên các tùy chọn lazy load mặc định;
  • Bài viết có 1, 2 ảnh nhẹ nhàng thì có thể không cần dùng lazy load, vì lợi ích không đáng kể;
  • Các trang thương mại điện tử, bán hàng online cần cân nhắc đánh giá cẩn thận khi triển khai lazy load ảnh, vì các ảnh tải chậm trên trang kiểu vậy rất ảnh hưởng;
  • 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, banner. Nhiều plugin có tính năng loại bỏ này, dựa vào tên ảnh, hoặc class, id của ảnh;
  • Ảnh banner mà là dạng slide (có nhiều ảnh khác) thì ảnh đầu tiên không nên lazy load, nhưng các ảnh thứ hai, thứ ba thì nên làm thế;
  • 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ễ). Các plugin nén ảnh chất lượng cao giờ có rất nhiều, một số cái còn miễn phí, ví dụ LiteSpeed. Khi nén, bạn ưu tiên dùng kiểu nén không mất chất lượng, và chú ý đến các ảnh quan trọng hoặc có kích cỡ lớn;
  • Cân nhắc sử dụng định dạng ảnh WebP nếu thấy ổn, vì giờ số lượng trình duyệt hỗ trợ nhiều, và cách triển khai dễ dàng hơn. WebP là định dạng ảnh nén tiết kiệm hơn đáng kể JPG và PNG;
  • Hosting chất lượng cao hoặc/và CDN tốt sẽ giúp tốc độ tải ảnh cao -> giảm đỗ trễ cho lazy load ảnh…Host ở xa quá hoặc không ổn định dễ làm tăng độ trễ lazy load ảnh, do vậy chúng ta cần ưu tiên chọn host ở gần, nếu không được thì cần dùng CDN để khắc phục vấn đề khoảng cách;
  • Đ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 ẩu 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