Categories Lazy load

Thiết lập nhanh cho plugin lazy load ảnh Flying Images

Trong bài viết trước tôi có giới thiệu về plugin lazy load ảnh rất thú vị có tên Flying Images. Tuy nhiên không nói gì về các cài đặt cả. Bài viết ngắn này sẽ bổ sung thiếu sót đó.

Nhắc lại một chút, điểm mới của plugin Flying Images là nó:

  • Sử dụng tính năng tải lười mặc định của trình duyệt Chrome (native lazy loading), một tính năng mới, hiệu quả hơn cách dùng JS truyền thống;
  • Với các trình duyệt khác Chrome, plugin vẫn phải sử dụng JS để tải lười. Tuy nhiên nó rất nhẹ, chỉ vào khoảng 1KB;
  • Việc tải lười theo kiểu tải trước ảnh, chứ không phải đợi ảnh vào khung nhìn (viewport) rồi mới tải ảnh, điều này giúp hạn chế hiện tượng khó chịu là ảnh giật hoặc ảnh không tải kịp khi người dùng kéo đến nội dung có ảnh.

Cài đặt và kích hoạt plugin rất đơn giản nên tôi sẽ bỏ qua để đi vào thẳng quá trình cấu hình plugin:

cài đặt plugin flying images

Các tùy chỉnh cài đặt cũng dễ hiểu, chỉ bao gồm 4 phần sau:

  • Lazy load method – Phương thức lazy load được sử dụng, có 3 lựa chọn gồm Native + JavaScript (thiết lập mặc định) sẽ sử dụng cả phương thức lazy load kiểu native trên Chrome, lẫn các phương thức JavaScript trên các trình duyệt khác; JavaScript only nghĩa là chỉ dùng JavaScript để làm phương thức lazy load, cách này sẽ không tận dụng được lợi thế của Chrome; Native only nghĩa là chỉ sử dụng phương pháp cài sẵn trên trình duyệt Chrome, khi sử dụng cách này nghĩa là bạn sẽ chỉ có lazy load khi người duyệt web dùng trình duyệt Chrome, trên các trình duyệt khác sẽ không có tải lười ảnh. Trong đa số trường hợp, cách mặc định là tốt nhất, vì nó tận dụng được cả lợi thế của Chrome, mà vẫn có tải lười ảnh trên các trình duyệt khác.
  • Bottom margin – Xác định độ cao tính theo px để tải trước ảnh, độ cao tính từ phần đáy của viewport, thường thì càng cao càng giúp hạn chế ảnh hưởng xấu đến trải nghiệm người dùng. Mặc định là 200px. Cao nhất là 500px. Tuy nhiên để càng cao, tác dụng tăng tốc & giảm tải cho hosting càng giảm.
  • Exclude Keywords – Từ khóa loại trừ, nếu ảnh chứa các từ khóa này nó sẽ được loại trừ khỏi phương thức lazy load, thí dụ mặc định thì Flying Image sẽ không tải lười logo mà sẽ cho tải ngay lập tức, điều này là dễ hiểu vì logo luôn nằm trong màn hình đầu tiên, tải lười logo khi đó sẽ có hại chứ không có lợi. Điều này suy ra nếu bạn không muốn lazy load ảnh trong màn hình đầu tiên (điều nên làm) thì bạn cần tìm tên của ảnh đó và đưa vào đây để nó loại trừ hàng loạt. Thông tin bổ sung, trường hợp bạn không muốn tải lười ảnh cho toàn bộ website vì trang của bạn truy cập chủ yếu qua di động trên nền tảng kết nối không quá tốt (và đặc biệt là khi trang của bạn dạng thương mại điện tử) thì bạn nên loại bỏ lazy load tất cả các ảnh, khi đó bạn vẫn tận dụng được CDN miễn phí. loại bỏ lazyload ảnh
  • Add responsive images – Bổ sung tính năng ảnh co giãn. Nếu ảnh trên trang của bạn không có tính năng resize dựa trên kích cỡ màn hình thì bạn nên chọn tính năng này, chốc nữa tôi sẽ chỉ ra cách làm sao để biết được ảnh trên trang của bạn đã có responsive hay chưa. Nhưng bạn không phải lo đâu, phần lớn theme đã có sẵn tính năng này rồi.

OK, vậy là xong các tính năng hiện có. Nhưng bài viết này chưa kết thúc. Tôi muốn đề cập đến 2 phần cuối cùng.

Đầu tiên là Exclude Keywords, là tính năng rất hữu ích để bạn loại bỏ lazy load đối với những ảnh Featured Image (ảnh hiện ở đầu bài viết). Tại sao những ảnh này không cần lazy load, vì đây là ảnh nằm ngay trong màn hình đầu tiên, nó cũng giống như logo vậy, không cần lazy load, chính xác hơn là tải lười còn có hại nhiều hơn, vì nó tạo ra khoảng trống khi tải website.

Đây chính là tính năng featured image khi bạn biên tập bài viết trên WordPress:

tính năng featured image trên WordPress

Và ảnh featured image sẽ hiển thị bên ngoài như thế này:

ảnh feature image hiển thị ra bên ngoài bài viết

Để loại bỏ ảnh này khỏi lazy load bạn chỉ cần thêm từ khóa wp-post-image vào phần Exclude Keywords ở trên giống như thế này:

loại bỏ ảnh đầu bài viết

Sau đó bạn nhấn Save change để lưu thay đổi.

Để kiểm tra xem đã làm chính xác chưa, bạn chỉ cần vào bài viết của bạn trên trình duyệt Chrome, chuột phải vào ảnh, và nhấn kiểm tra, nó sẽ hiển thị ra mã ảnh:

mã ảnh

Nếu bạn không thấy loading=”lazy thì bạn đã làm chính xác (bạn có thể thấy wp-post-image chính là một trong các tên class của ảnh, plugin dựa vào điều này để loại trừ).

Khi bạn kiểm tra các ảnh khác trong bài viết (nếu có), bạn sẽ phải tìm thấy loading=”lazy“, vì chúng ta chỉ loại trừ tải lười với ảnh featured image mà thôi.

Đoạn mã của một ảnh bên dưới:

mã ảnh vẫn có lazy load

Bạn có thể thấy nó vẫn còn thuộc tính loading=”lazy” trong khung mà tôi đánh dấu màu đỏ. Thiết lập như vậy là chính xác, sau khi lưu bạn cần xóa cache (như WP-Rocket, WP Super Cache, WP Fastest Cache, vân vân) để các cài đặt này có tác dụng ngay lập tức với người dùng.

Tính năng cuối cùng Add responsive images, để kiểm tra xem ảnh trên website của bạn đã có chưa, thì cũng trên trình duyệt Chrome, bạn chuột phải rồi nhấn kiểm tra như trên để xem mã.

Nếu bạn thấy ảnh có srcset thì có nghĩa là bạn không cần tick chọn tính năng này:

ảnh có srcset

Nói chung thông thường là sẽ có, vì đây là chức năng cơ bản, hiếm theme nào không sử dụng.

P/S: Cuối tháng 12/2019, plugin Flying Image bổ sung một số tính năng rất hay, bạn có thể tìm hiểu thêm ở bài viết này: speed.family/plugin-flying-images-cai-tien/

Cuối cùng tôi vẫn nhắc lại một số lời khuyên căn bản với lazy load ảnh:

  • Không sử dụng lazy load ảnh trên trang thương mại điện tử, nơi người dùng rất thiếu kiên nhẫn và một lỗi hiển thị ảnh nhỏ thôi có thể làm bạn mất một đơn hàng có giá trị.
  • Trên trang thương mại điện tử bạn nên tăng tốc độ tải ảnh bằng một trong các cách sau (hoặc kết hợp chúng với nhau khi thích hợp): (1) sử dụng host chất lượng hơn, gần người dùng hơn; (2) sử dụng plugin nén ảnh để giảm dung lượng ảnh xuống tối đa (nhưng nhớ sử dụng nén không mất chất lượng); (3) sử dụng CDN nếu thấy cần thiết.
  • Lazy load ảnh có hiệu quả nhất với các bài viết có nhiều ảnh dưới màn hình đầu tiên. Nó về cơ bản giúp giảm tải cho máy chủ (đồng nghĩa với tiết kiệm tiền nâng cấp), cho tốc độ tải ban đầu cao hơn đáng kể.

Giờ là lúc chào tạm biệt.

Back to Top