Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache, tương thích với CloudFlare CDN.
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:
- Hướng dẫn cài LiteSpeed Cache cho WordPress một cách đơn giản
- ShortPixel – Plugin nén ảnh giá rẻ tốt nhất dành cho WordPress
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 Replacement và WebP For Extra srcset sang trạng thái ON rồi lưu lại.
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.
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.
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:
Bỏ trống toàn bộ các mục trong phần Redirection rules:
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.
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. :)
Chào bác. Em dùng luôn tính năng nén ảnh của LSC và đã xóa toàn bộ ảnh gốc (“Delete all backups of the original images”). Giờ có cách nào để phục hồi hay chuyển từ ảnh đã tối ưu (optm) sang webp không ạ? Cám ơn bác.
Trường hợp của bạn sẽ có 2 phương án:
1. Cài thêm plugin WebP Express để tạo định dạng ảnh WebP (khuyên dùng). Lúc thiết lập, mục File extension chọn Append “.webp” để ảnh WebP có đuôi
.jpg.webphoặc.png.webp=> có thể load được bằng plugin LiteSpeed Cache.2. Click vào nút Destroy All Optimization Data trong LiteSpeed Cache => Image Optimization => [1] Image Optimization Summary. Chờ quá trình hoàn tất => Bật các mục Image WebP Replacement và WebP For Extra srcset trong [2] Image Optimization Settings => Tiến hành nén ảnh lại từ đầu. Tuy nhiên, phương án này có rủi ro đó là bạn nén ảnh quá nhiều, LiteSpeed có thể sẽ chặn không cho bạn nén ảnh nữa. Vì vậy nên cân nhắc trước khi làm.
Vâng cám ơn bác đã phản hồi. Phương án 2 em thắc mắc là ảnh gốc đã xóa, giờ xóa luôn ảnh đã tối ưu thì LSC lấy ảnh đâu để tạo lại từ đầu ạ?
Nó lấy ảnh đã tối ưu để nén lại 1 lần nữa bạn nhé.
Cám ơn bác. Em học hỏi rất nhiều từ trang của bác, chúc bác vui khỏe.
Cảm ơn bạn. :)
em chào anh:
Em đang dùng ShortPixel để nén và conver ảnh sang đuôi webp và Load ảnh webp bằng Litespeed cache.
Em đã làm giống như anh hướng dẫn tuy nhiên nó chỉ Load dc ảnh png sang dạng png.webp.
Còn ảnh Jpg thì nó không chuyển đổi được
Anh có thể cho em xin cách khắc phục dc không ạ
1. Bạn thử xóa cache của plugin LiteSpeed Cache rồi kiểm tra lại xem.
2. Có thể do phiên bản ảnh WebP có dung lượng lớn hơn phiên bản JPG => plugin ShortPixel nó tự xóa phiên bản WebP => vẫn load ảnh JPG.
Á em hiểu rồi, em cảm ơn anh ạ
làm đủ các bước và mở các hình ảnh trong site thì đường link nó là thế này: https://cdn.shortpixel.ai/client/to_webp,q_glossy,ret_img,w_300/https://…..
Cái này là do plugin của ShortPixel tạo ra mà? Liên quan gì đến LiteSpeed Cache đâu.
thấy nó load lâu quá, tui tưởng đuôi nó phải là…webp như của ông.
Bạn có cài plugin nào của ShortPixel hay Autoptimize không? Nếu có thì tắt tính năng CDN hình ảnh của nó đi.
Plugin Autoptimize chỉ check 3 mục HTML, JAVA vs css thui, phần hình ảnh CDN tui ko có check vô nó. Ko hiểu sao nữa :d
Nó có tận mấy tab mà. Bạn xem tab Images chưa? Có chắc là không tick vào mục nào trong tab đó?
Khá là căng, web mình sau update bay sạch top :(
Nó mới vừa cập nhật thuật toán liên quan đến trải nghiệm người dùng trên website. =))
Mình đã sử dụng Lite Speed Cache có sẵn tinohost + bật trong host co sẵn, sau đó cài thêm vào wp-admin plugin lite Speed
Xài thử mà thấy web lược bỏ nhiều quá về giao diện (lệch các thiết kế chắc tối ưu quá liều), tốc độ cũng không quá cải thiện so với sử dụng WP rocket + async defer
Chắc mỗi 1 theme nó tương thích khác nhau cho plugin tăng tốc, đặc biệt là các site mà chạy elementor thì cái DOM nó to tổ chảng, thu gọn ko nổi, đang loay hoay 1 mình tìm cách tăng tốc, chưa tìm ra video hay bài viết nào hướng dẫn chi tiết hết bác ạ
Không phải cứ cài vào rồi để đó hay bật hết các tính năng lên là được. Web nào cũng phải thử nghiệm tắt/ bật các tính năng nhiều lần để tìm ra thiết lập tối ưu nhất (vừa đạt được hiệu suất cao, vừa không gây lỗi giao diện). Riêng về web server LiteSpeed thì không có plugin nào tối ưu tốt hơn LiteSpeed Cache. Ông nào nói WP Rocket hay plugin nào đó tốt hơn chẳng qua là không biết cách thiết lập LiteSpeed Cache mà thôi. =))
Nhờ bác làm 1 clip hướng dẫn anh em tips xài Lite Speed với ạ,
Mình coi nhiều nguồn lắm rồi, thực sự chưa biết cách sử dụng, vẫn đang trung thành với WP ROCKET, mặc dù bên Tinohost họ có công nghệ Lite Speed sẵn mà không biết cách xài tận dụng, khổ lắm hic
Cái này thuộc về bí mật nghề nghiệp và là ưu thế để kinh doanh nên không chia sẻ rộng rãi được bạn ơi. Mình chỉ hỗ trợ cài đặt cho các khách hàng sử dụng dịch vụ WordPress Hosting do bên mình cung cấp thôi. :)
Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache
Đúng tài liệu mình đang cần
Cái này với Autoptimize cái nào dùng tốt hơn nhỉ. Nghe bảo nếu là shared host thì dùng cái Lightspeed thì tốt hơn còn VPS thì nên dùng Autoptimize bác nhỉ?
VPS mà chạy LiteSpeed Enterprise hoặc Open LiteSpeed thì dùng plugin LiteSpeed Cache vẫn ngon hơn Autoptimize bạn nhé. So về mặt tính năng thì hiện tại khó có plugin nào miễn phí nào sở hữu các tính năng tối ưu tốt hơn được LiteSpeed Cache.