• Home
  • WordPress
    • Thủ thuật WordPress
    • WordPress plugins
    • WordPress themes
    • Hosting và domain
  • Kiếm tiền
    • Google AdSense
    • Tiếp thị liên kết
    • Rút gọn link
  • Quà tặng
  • Khuyến mãi
  • Đánh giá
  • Dịch vụ
    • WordPress Hosting
    • Cài đặt WordPress
    • Quét mã độc website
    • Tối ưu WordPress
    • Mua theme Paradise
  • Thông báo
  • Liên hệ

WP Căn bản

Thủ thuật WordPress và kiếm tiền online

wordpress-theme-tot-nhat

Trang chủ » WordPress » Thủ thuật WordPress » Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache

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

28/04/2020 28/06/2020 Trung Hiếu 46 Bình luận

Mục lục bài viết

  1. Tại sao nên load ảnh WebP bằng plugin LiteSpeed Cache?
  2. Load ảnh WebP bằng plugin LiteSpeed Cache
    1. Đối với plugin ShortPixel
    2. Đối với plugin EWWW Image Optimizer
    3. Đối với plugin WebP Express
  3. Kiểm tra kết quả

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:

  • 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.

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.

define('SHORTPIXEL_USE_DOUBLE_WEBP_EXTENSION', true);

view raw
wp-config.php
hosted with ❤ by GitHub

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

/* That's all, stop editing! Happy blogging. */

view raw
wp-config.php
hosted with ❤ by GitHub

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 folder và File 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. :)

5 / 5 ( 6 bình chọn )
  • Share on Facebook
  • Tweet on Twitter

Bài viết liên quan

Chuyên mục: Thủ thuật WordPress Thẻ: LiteSpeed Cache/ ShortPixel/ WebP

dich-vu-cai-dat-website-wordpress-mien-phi

Nói về Trung Hiếu

Một người con của xứ Nghệ, hiện đang sinh sống tại Hà Nội. Theo dõi tôi trên Facebook để cập nhật những tin tức mới nhất liên quan đến WordPress nhé.

Bài viết trước « Loại bỏ tính năng Showing all x results trong WooCommerce
Bài viết sau Những plugin không nên cài cho website WordPress »

Reader Interactions

Bình luận

    Trả lời Hủy

    Lưu ý:
    > Không sử dụng từ khóa trong mục "Tên".
    > Hãy sử dụng tên thật và địa chỉ email chính xác.
    > Vui lòng bình luận bằng tiếng Việt có dấu.
    Mọi bình luận trái quy định sẽ bị gỡ bỏ link hoặc xóa bỏ hoàn toàn.

  1. Thành Nhân viết

    17/05/2020 lúc 19:43

    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ỉ?

    Trả lời
    • Trung Hiếu viết

      17/05/2020 lúc 19:51

      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.

      Trả lời
  2. Micro hội thảo viết

    20/05/2020 lúc 16:33

    Hướng dẫn load ảnh WebP bằng plugin LiteSpeed Cache
    Đúng tài liệu mình đang cần

    Trả lời
  3. Mr Kha viết

    30/05/2020 lúc 10:17

    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 ạ

    Trả lời
    • Trung Hiếu viết

      30/05/2020 lúc 16:07

      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. =))

      Trả lời
      • Mr Kha viết

        30/05/2020 lúc 16:09

        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

        Trả lời
        • Trung Hiếu viết

          31/05/2020 lúc 06:37

          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. :)

          Trả lời
  4. Ngô Văn Cương viết

    30/05/2020 lúc 21:59

    Khá là căng, web mình sau update bay sạch top :(

    Trả lời
    • Trung Hiếu viết

      31/05/2020 lúc 06:35

      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. =))

      Trả lời
  5. Lê Anh Tuấn viết

    10/09/2020 lúc 14:43

    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://…..

    Trả lời
    • Trung Hiếu viết

      10/09/2020 lúc 15:33

      Cái này là do plugin của ShortPixel tạo ra mà? Liên quan gì đến LiteSpeed Cache đâu.

      Trả lời
      • Lê Anh Tuấn viết

        10/09/2020 lúc 16:18

        thấy nó load lâu quá, tui tưởng đuôi nó phải là…webp như của ông.

        Trả lời
        • Trung Hiếu viết

          10/09/2020 lúc 16:21

          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.

          Trả lời
          • Lê Anh Tuấn viết

            10/09/2020 lúc 16:37

            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

          • Trung Hiếu viết

            10/09/2020 lúc 17:27

            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 đó?

« 1 2

Sidebar chính

NHẬN BÀI VIẾT QUA EMAIL

Hãy đăng ký ngay để là người đầu tiên nhận được thông báo qua email mỗi khi chúng tôi có bài viết mới!

Đừng quên truy cập vào email của bạn để xác nhận việc đăng ký nhé!

Theo dõi qua mạng xã hội

Dịch vụ WordPress Hosting

dich-vu-wordpress-hosting-gia-re-tot-nhat

Bạn đang tìm gì?

  • WordPress căn bản
  • Bảo mật WordPress
  • Tăng tốc WordPress
  • Sửa lỗi WordPress
  • Thủ thuật Genesis
  • Thủ thuật SEO

Dịch vụ tối ưu WordPress miễn phí

dich-vu-toi-uu-website-wordpress-chat-luong-cao

Bài viết mới nhất

  • Hướng dẫn sử dụng LiteSpeed Memcached 17/01/2021
  • Hướng dẫn nén ảnh bằng plugin LiteSpeed Cache 08/01/2021
  • Hướng dẫn nâng cấp PHP 8 cho website WordPress 15/12/2020
  • Sửa lỗi không hiện hình ảnh và mô tả khi share link lên Zalo 11/11/2020
  • Hiển thị mô tả cho category và tag trong WordPress 05/11/2020
  • Cải tiến công cụ tìm kiếm mặc định của WordPress 31/10/2020

Dịch vụ quét mã độc miễn phí

quet-ma-doc-mien-phi-cho-website

Footer

Bình luận mới nhất

  • Trung Hiếu trong Bật mí về các công nghệ mà WP Căn bản đang sử dụng
  • Trung Hiếu trong Gỡ bỏ Gutenberg stylesheet khỏi website WordPress
  • Trung Hiếu trong Tích hợp widget Facebook Page vào website WordPress
  • Lê Thanh Hưởng trong Tích hợp widget Facebook Page vào website WordPress

Bình luận nhiều nhất (tháng)

  1. Doligo (7)
  2. Tuyen (7)
  3. Tien Coin (4)
  4. Nguyễn Văn Long (3)
  5. Thành (3)
  6. Gia Tuấn (2)

Thông tin hữu ích

  • Quy định sử dụng
  • Chính sách bảo mật
  • Bản quyền nội dung

Thống kê WP Căn bản

10 Chuyên mục - 978 Bài viết - 37203 Bình luận

Bản quyền © 2014 - 2020 · WP Căn bản · Sử dụng Paradise child theme và dịch vụ WordPress Hosting