Categories Lazy load

5 plugin Lazy load ảnh chất lượng

Video giới thiệu về mục đích & một số phương thức lazy load ảnh (PS: video không nói nhiều về plugin, nội dung văn bản bên dưới sẽ nói rõ về điều đó):

Với các website nhiều ảnh, lazy load ảnh là một trong các chiến thuật tăng tốc WordPress tốt nhất, bên cạnh việc tạo cacheloại bỏ tài nguyên chặn hiển thị.

Điều tốt với lazy load ảnh là bạn có nhiều plugin chất lượng và hoàn toàn miễn phí. Các cài đặt phần nhiều cũng không phức tạp.

Nói sơ qua về lazy load ảnh (sơ vì tôi nghĩ khi bạn tìm đến bài viết này bạn đã hiểu tương đối về khái niệm lazy): Lazy load ảnh là cách trì hoãn tải ảnh, chỉ tải ảnh đó khi người dùng cần (khi ảnh đi vào khung nhìn trình duyệt hoặc ở gần khung nhìn trình duyệt- ví dụ cách 500px).

OK, giờ chúng ta đi vào phần chính luôn nhé:


1. Plugin Flying Images

Flying Images đã được tôi giới thiệu kỹ trong link vừa dẫn. Ưu điểm chính của nó bao gồm:

  • Cài đặt đơn giản;
  • CDN miễn phí dành riêng cho ảnh- có chất lượng khá;
  • định dạng ảnh WebP nếu bạn muốn;
  • Cho phép đặt ngưỡng tải trước ảnh;
  • Cho phép bật một hoặc cả hai kiểu lazy load là native lazy load hoặc/và JavaScript.

2. Plugin a3 Lazy load

Một plugin lazy load ưu thích khác mà tôi phát hiện được, nó phổ biến hơn Flying Images.

a3 có cài đặt phức tạp hơn, tuy nhiên bạn đừng lo lắng vì các thiết lập mặc định đã đủ tốt rồi. Tôi cũng viết bài chi tiết giới thiệu a3 Lazy load ở đây.


3. Rocket lazy load

Đây là plugin miễn phí cho chức năng tải lười ảnh của một trong các công ty hàng đầu về tăng tốc WordPress: WP-Rocket.


4. Ngoài ra đa số các plugin cache đều tích hợp sẵn tính năng lazy load ảnh có chất lượng cao- hoạt động ổn định

Trong đó có:

  • LiteSpeed cache: gồm cả kiểu lazy load ảnh truyền thống và tùy chọn dùng LQIP;
  • Swift Performance: tương tự như LiteSpeed. LQIP là kiểu tải ảnh mà không có nhiều plugin có khả năng làm được;
  • FlyingPress: có kiểu lazy load ảnh rất thú vị là dựa trên số lượng ảnh tính từ đầu trang, nó sẽ giải quyết được vấn đề trên các website có thiết kế không được tốt mà plugin lazy load khác không làm được;

Xem thêm: các kiểu lazy load ảnh;

Nếu bạn kiểm tra plugin cache đang dùng có tính năng lazy load ảnh rồi & hoạt động tốt thì không nên cài các plugin lazy load ảnh khác nữa để tránh xung đột và nặng nề không cần thiết. Trong hầu hết trường hợp chúng ta chỉ cần một plugin cho một nhiệm vụ.


5. Plugin lazy load ảnh trong mơ!

  • Tải trước ảnh dựa trên ngưỡng cách đáy màn hình, ví dụ 300px, để giảm tối đa ảnh hưởng của độ trễ;
  • Có tùy chọn loại trừ lazy load ảnh dựa trên class, tên ảnh, v.v..;
  • Có tùy chọn loại trừ lazy load dựa trên số lượng ảnh tính từ đầu trang;
  • Có tùy chọn lazy load ảnh background;

Dù tôi chưa tìm được plugin thỏa mãn tất cả các tiêu chí trên, nhưng có vẻ plugin Lazy Loader tiến gần nhất các yêu cầu này.


Một số câu hỏi

Hỏi: Native lazy load ảnh là gì vậy?

Trả lời: Đây là biện pháp lazy load ảnh mới do Google Chrome phát triển. Nó có hiệu suất tốt hơn dùng JavaScript, tuy nhiên ở thời điểm hiện tại chỉ có trình duyệt Chrome hỗ trợ (có lẽ cả Cốc Cốc, vì trình duyệt này dựa trên lõi của Chrome) do vậy không có tác dụng trên các trình duyệt khác. Tôi có viết bài chi tiết về native lazy load ảnh cho bạn nào muốn tham khảo (hơi khó đọc vì mang tính kỹ thuật).

Hỏi: Ảnh WebP là gì?

Trả lời: Là định dạng ảnh được phát triển bởi Google cách đây vài năm, tiết kiệm dung lượng hơn so với JPG, PNG,…hiện được đa số trình duyệt hỗ trợ, tuy nhiên việc tích hợp nó vào WordPress đôi khi không dễ dàng và bạn vẫn phải dự phòng bằng các định dạng ảnh phổ biến kia (nghĩa là nó làm tăng dung lượng hosting). bạn có thể tìm hiểu chi tiết về ảnh WebP ở đường link này.

Hỏi: Tôi nghe nói lõi của WordPress đã tích hợp sẵn tính năng lazy load. Liệu tôi có cần plugin nữa không?

Trả lời: WordPress từ phiên bản 5.5 đã tích hợp sẵn lazy load ảnh bằng thuộc tính native ở trên. Tuy nhiên như đã nói chỉ Chrome hiện hỗ trợ nên việc tích hợp plugin để có khả năng lazy load ảnh trên các trình duyệt khác là cần thiết. Tin mừng là tính năng lazy load ảnh ở cấp độ trình duyệt (native) sẽ sớm được phổ biến trên các trình duyệt khác, và sẽ cho hiệu suất tốc độ tốt hơn so với dùng JavaScript hiện nay.

Cập nhật: hiện thuộc tính lazyload (native cấp độ trình duyệt) đã được nhiều trình duyệt hỗ trợ hơn. Trong đó đáng chủ ý là Edge, Opera và trình duyệt của SamSung, chi tiết bạn tham khảo ở đường link này: https://caniuse.com/loading-lazy-attr (cái có màu xanh là đang hỗ trợ, có số chỉ đến phiên bản).

Back to Top