Tăng tốc website WordPress với hình ảnh WebP

Chắc bạn đồng ý với tôi rằng: Người nào cũng muốn website của mình tải nhanh nhất có thể. Trước kia tôi đã san sẻ một đôi tip để tăng tốc website WordPress. Tôi cũng nói công nghệ lazy load để làm cho website tải tốc độ hơn. Hôm nay thietkewebpro247 có 1 tip khác có lẽ bạn vẫn chưa nghe nhắc tới: Sử dụng hình ảnh WebP

WebP là gì?​

Hình ảnh WebP là một định dạng hình ảnh mới do Google cung cấp. Nó giống như Google AMP mà mình đã từng nói đến.

Vậy hình ảnh WebP sở hữu gì đặc trưng so với những định dạng ảnh khác?

Đây là điểm mạnh của WebP:

Nó với kích thước bé hơn 25% so với những định dạng ảnh PNG hay JPEG.

Như bạn đã biết hình ảnh thường là thủ phạm làm website tải chậm. thành ra Con số 25% là Thống kê có ý nghĩa.

Trong bài viết này, mình sẽ chia sẻ với bạn bí quyết hỗ trợ hình ảnh WebP để tăng tốc website.

Cách dùng WebP trong website WordPress?

​Có 1 tin không vui bạn cần biết ngay lúc này:

Định dạng WebP không được mọi trình duyệt thông qua hỗ trợ. Ở thời khắc bây giờ, hình ảnh WebP chỉ được hỗ trợ bởi Chrome, Opera, và các trình duyệt chuẩn sử dụng nhân Chronium khác.

​Do vậy bạn chẳng thể chuyển nhiều hình ảnh trong website sang định dạng WebP được. Bởi những trình như Firefox hay Safari sẽ ko tương trợ chúng.

Chỉ với 1 phương pháp duy nhất:

Dùng plugin đặc biệt để website của bạn sẽ cho hình ảnh WebP tối ưu khi các bạn dùng trình duyệt hỗ trợ chúng. Trái lại hình ảnh PNG hay JPEG sẽ được dùng cho trên trình duyệt ko tương trợ WebP.

Tóm lại, để dùng hình ảnh định dạng WebP trong website WordPress bạn cần khiến hai thứ sau:

Tạo 1 phiên bản WebP cho các hình ảnh đang có trên website.
Chỉ chuyên dụng các hình ảnh WebP này cho các trình duyệt hỗ trợ chúng.

2 việc sẽ tương ứng do 2 plugin khác nhau đảm nhiệm.

Ở thời điểm hiện giờ theo hiểu biết của mình đây là giải pháp hay nhất:

  1. Việc thứ nhất bạn có thể dùng hai plugin nén ảnh: ShortPixel và Optimus.io và LiteSpeed Cache . 2 plugin tối ưu ảnh trước nhất đều mang phiên bản miễn phí trên WordPress Repository. Nhưng tính năng miễn phí tương đối tệ. Bạn nên sắm gói trả phí. cá nhân mình đang tìm gói One time ShortPixel. Còn đối với ai đang dùng hosting hỗ trợ LiteSpeed Webserver thì có thể tận dụng tính năng tối ưu ảnh miễn phí của LiteSpeed Cache. (Xem phương pháp cài đặt LiteSpeed Webserver giả dụ bạn đang dùng VPS)
  2. Việc thứ hai sẽ do một plugin cache phụ trách. Trước kia chỉ mỗi plugin cache Cache Enabler sở hữu khả năng làm việc này. Nhưng nay bạn với thêm lựa chọn nữa. Đó là plugin LiteSpeed Cache.

Cách thêm hình ảnh WebImage vào WordPress dùng ShortPixel và Cache Enabler

Xem thêm: Top website tạo blog miễn phí tốt nhất

ShortPixel/Optimus.io và Cache Enabler vẫn là giải pháp hiệu quả nhất về dùng WebP trong WordPress.

Trước hết bạn cần cài đặt plugin ShortPixel. Bản miễn phí bạn sẽ tối ưu hóa 100 hình ảnh mỗi tháng. Bạn có thể tham khảo phương pháp dùng ShortPixel và nhận thêm 100 hình ảnh.

Nếu bạn đang cài đặt plugin LiteSpeed Cache thì bỏ qua bước này. hiện tại LiteSpeed Cache đã sở hữu tính năng tối ưu ảnh miễn phí rồi. giai đoạn tối ưu hình ảnh sẽ sinh ra định dạng ảnh WebP.

Đi tới Cài đặt -> ShortPixel. Click tab Advanced. Chọn tùy chọn Create also WebP versions of the images for free.

Click nút Save and Go to Bulk Process. Chạy tối ưu ảnh để sinh ra phiên bản WebP cho những hình ảnh đang có trong website. ​

Tới đây bạn đã có ảnh WebP cho các ảnh đang còn đó.

Nếu như bạn dùng hosting không có LiteSpeed Server, bạn chỉ còn chọn lựa độc nhất là dùng plugin Cache Enabler để phục vụ ảnh WebP cho trình duyệt tương trợ.

Với Cache Enabler, bạn đi đến Cài đặt -> Cache Enabler và chọn tùy chọn như bên dưới. ​

Với định dạng WebP LiteSpeed Cache vừa mang khả năng sinh ra phiên bản ảnh WebP tối ưu sẵn lại mang khả năng dùng cho ảnh WebP cho trình duyệt tương trợ chúng. ​

Nghe có vẻ dễ. Nhưng:​

Tính năng này còn hơi dở so với giải pháp Short Pixel + Cache Enabler. thí dụ như bạn chỉ gửi một số lượng ảnh ít oi lên server của LiteSpeed để xử lý. ​Quá trình tối ưu ảnh cũng tương đối chậm.

Lưu ý:

Mình đã test thử và nhận thấy không thể sử dụng plugin tối ưu ảnh sinh WebP như ShortPixel hay Optimus với plugin cache LiteSpeed Cache. nói cách khác LiteSpeed Cache chỉ chuyên dụng cho ảnh WebP do nó sinh ra mà thôi. ​

Lý do là vì LiteSpeed sẽ sinh ảnh WebP có tên như sau: yourimage.jpg.webp. khi mà những plugin tối ưu ảnh như ShortPixel sẽ tạo ra ảnh yourimage.webp

Chúc các bạn thành công khi chuyển đổi định dạng hình ảnh WebP.