--- title: "Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache" author: "Trung Hiếu" date: "2020-04-28" lastmod: "2023-06-10" url: "https://wpcanban.com/wordpress/thu-thuat-wordpress/load-anh-webp-bang-plugin-litespeed-cache.html" --- # Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache, tương thích với CloudFlare CDN. ![huong-dan-load-anh-webp-bang-plugin-litespeed-cache](https://wpcanban.com/wp-content/uploads/2020/04/huong-dan-load-anh-webp-bang-plugin-litespeed-cache.png) Nếu bạn chưa biết thì [LiteSpeed Cache](https://wpcanban.com/tag/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](https://wpcanban.com/tag/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: - [Hướng dẫn cài LiteSpeed Cache cho WordPress một cách đơn giản](https://wpcanban.com/wordpress/thu-thuat-wordpress/cai-litespeed-cache-cho-wordpress.html) - [ShortPixel – Plugin nén ảnh giá rẻ tốt nhất dành cho WordPress](https://wpcanban.com/danh-gia/shortpixel-plugin-nen-anh-tot-nhat.html) ## 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](https://vi.wordpress.org/plugins/native-lazyload/) hay [Lazy Loading Feature Plugin](https://wordpress.org/plugins/wp-lazy-loading/). 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 Replacement* và *WebP For Extra srcset* sang trạng thái `ON` rồi lưu lại. ![thiet-lap-load-anh-webp-trong-plugin-litespeed-cache](https://wpcanban.com/wp-content/uploads/2020/04/thiet-lap-load-anh-webp-trong-plugin-litespeed-cache.png) 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](https://wpcanban.com/wp-content/uploads/2020/04/thiet-lap-tao-anh-webp-trong-plugin-shortpixel.png) 2. Tiếp theo, chèn đoạn code sau đây vào file `wp-config.php` của mã nguồn WordPress. ``` define('SHORTPIXEL_USE_DOUBLE_WEBP_EXTENSION', true); ``` Lưu ý: nó phải nằm bên trên dòng chữ sau. ``` /* That's all, stop editing! Happy blogging. */ ``` 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](https://wpcanban.com/wp-content/uploads/2020/04/thiet-lap-tao-anh-webp-trong-plugin-ewww-image-optimizer.png) 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 folder* và *File extension* như hình bên dưới: ![thiet-lap-tao-anh-webp-trong-plugin-webp-express](https://wpcanban.com/wp-content/uploads/2020/04/thiet-lap-tao-anh-webp-trong-plugin-webp-express.png) 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](https://wpcanban.com/wp-content/uploads/2020/04/tat-thiet-lap-load-anh-webp-cua-plugin-webp-express.png) 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](https://wpcanban.com/wp-content/uploads/2016/12/kiem-tra-webp-co-hoat-dong-hay-khong.png) 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.* :)