Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache

Nếu bạn chưa biết thì LiteSpeed Cache là một plugin toàn năng. Không những có khả năng tạo cache (bộ nhớ đệm); tối ưu HTML, CSS, JS, database, Google Fonts; hỗ trợ CDN… plugin này còn có thể giúp bạn nén hình ảnh, thậm chí là tạo cả phiên bản WebP cho chúng. Tuy nhiên, việc ôm đồm quá nhiều thứ khiến cho tính năng nén ảnh của LiteSpeed Cache không thực sự tốt như những plugin chuyên dụng. Do đó, thay vì nén và tạo ảnh WebP bằng plugin LiteSpeed Cache, chúng tôi khuyên bạn chỉ nên sử dụng nó để load ảnh WebP mà thôi.

Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache một cách đơn giản, tương thích với CloudFlare CDN.

huong-dan-load-anh-webp-bang-plugin-litespeed-cache

Nếu bạn chưa biết thì LiteSpeed Cache là một plugin toàn năng. Không những có khả năng tạo cache (bộ nhớ đệm); tối ưu HTML, CSS, JS, database, Google Fonts; hỗ trợ CDN… plugin này còn có thể giúp bạn nén hình ảnh, thậm chí là tạo cả phiên bản WebP cho chúng. Tuy nhiên, việc ôm đồm quá nhiều thứ khiến cho tính năng nén ảnh của LiteSpeed Cache không thực sự tốt như những plugin chuyên dụng. Do đó, thay vì nén và tạo ảnh WebP bằng plugin LiteSpeed Cache, chúng tôi khuyên bạn chỉ nên sử dụng nó để load ảnh WebP mà thôi.

Tham khảo thêm:

Tại sao nên load ảnh WebP bằng plugin LiteSpeed Cache?

Một ưu điểm vượt trội của plugin LiteSpeed Cache là tính năng load ảnh WebP của nó hoạt động tốt trên dịch vụ CloudFlare CDN miễn phí. Nếu bạn load ảnh WebP thông qua việc chèn code vào file .htaccess như một số plugin khác vẫn thường làm, chắc chắn bạn sẽ gặp lỗi hiển thị hình ảnh trên các trình duyệt không hỗ trợ ảnh WebP (như Safari). Bởi vì, chúng không tương thích với CloudFlare CDN.

Thêm nữa, tính năng này cũng tương thích tốt với những plugin lazyload hình ảnh như Native Lazyload hay Lazy Loading Feature Plugin. Do đó, nếu đang cài đặt plugin LiteSpeed Cache trên website, không có lý do gì để bạn từ chối việc sử dụng tính năng load ảnh WebP của nó.

Lưu ý: LiteSpeed Cache chỉ hỗ trợ load ảnh WebP có đuôi dạng “double exetension” (.png.webp hoặc .jpg.webp). Vì vậy, bạn không thể sử dụng nó cho những plugin nén ảnh chỉ tạo đuôi .webp.

Load ảnh WebP bằng plugin LiteSpeed Cache

Trong giao diện quản trị của WordPress, các bạn truy cập LiteSpeed Cache => Image Optimization => [2] Image Optimization Settings => chuyển 2 mục Image WebP ReplacementWebP For Extra srcset sang trạng thái ON rồi lưu lại.

thiet-lap-load-anh-webp-trong-plugin-litespeed-cache

Các mục sau đây sẽ cần phải được thiết lập ở trạng thái OFF bởi vì chúng ta sẽ sử dụng 1 plugin khác để nén và tạo ảnh WebP:

  • Auto Request Cron
  • Auto Pull Cron
  • Optimize Original Images
  • Remove Original Backups
  • Optimize Losslessly
  • Preserve EXIF/XMP data
  • Create WebP Versions

Đối với plugin ShortPixel

1. Trong giao diện thiết lập của plugin ShortPixel, các bạn tick vào mục Also create WebP versions of the imges, for free. Để trống mục Deliver the WebP versions of the images in the front-end bởi vì chúng ta sẽ sử dụng plugin LiteSpeed Cache để thay thế tính năng này.

thiet-lap-tao-anh-webp-trong-plugin-shortpixel

2. Tiếp theo, chèn đoạn code sau đây vào file wp-config.php của mã nguồn WordPress.

Lưu ý: nó phải nằm bên trên dòng chữ sau.

Tác dụng của việc này là yêu cầu ShortPixel tạo ra các ảnh WebP có đuôi dạng .png.webp, .jpg.webp thay vì chỉ có .webp như mặc định của nó.

3. Truy cập Media => Bulk ShortPixel => tiến hành nén toàn bộ hình ảnh đã upload lên web. Nếu bạn đã “lỡ tay” tạo ảnh với đuôi .webp trước đó thì cách duy nhất là restore backup sau đó tiến hành nén lại từ đầu.

Đối với plugin EWWW Image Optimizer

1. Truy cập Settings => EWWW Image Optimizer => WebP, tick vào mục JPG/PNG to WebP và bỏ trống tất cả các mục còn lại.

thiet-lap-tao-anh-webp-trong-plugin-ewww-image-optimizer

2. Truy cập Media => Bulk Optimize và tiến hành nén toàn bộ những ảnh mà bạn đã upload trước đó.

Đối với plugin WebP Express

1. Truy cập Settings => WebP Express, thiết lập các mục Destination folderFile extension như hình bên dưới:

thiet-lap-tao-anh-webp-trong-plugin-webp-express

Bỏ trống toàn bộ các mục trong phần Redirection rules:

tat-thiet-lap-load-anh-webp-cua-plugin-webp-express

2. Click vào nút Bulk Convert để tiến hành tạo phiên bản WebP cho toàn bộ ảnh đã upload. Nếu bạn đã tạo ảnh WebP với thiết lập khác, hãy click vào nút Delete converted files để xóa bỏ chúng trước khi tạo lại.

Kiểm tra kết quả

Việc cuối cùng là xóa cache website, cache trình duyệt và cache CDN (nếu có) rồi kiểm tra kết quả. Trên trình duyệt Google Chrome, các bạn bấm phím F12 (hoặc click chuột phải vào giao diện web rồi chọn Inspect) => chọn tab Network => reload (F5) web và xem ở cột Type.

kiem-tra-webp-co-hoat-dong-hay-khong

Thật đơn giản phải không nào? Chúc các bạn thành công!

WP Căn bản đang sử dụng định dạng ảnh WebP được tạo bằng plugin ShortPixel và load thông qua plugin LiteSpeed Cache, còn bạn thì sao? Theo bạn có nên sử dụng định dạng ảnh WebP hay không? Hãy cho chúng tôi biết ý kiến của bạn thông qua khung bình luận bên dưới.

Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)


Bài liên quan