HomeHướng dẫn WordPress

Cách sử dụng hình ảnh WebP để tăng tốc website WordPress

Like Tweet Pin it Share Share Email

kiếm tiền thụ động với civi

Chắc bạn đồng ý với mình rằng: 

Ai cũng muốn website của mình tải nhanh nhất có thể.

Trước kia mình đã chia sẻ một vài tip để tăng tốc website WordPress. Mình cũng đề cập kỹ thuật lazy load để làm cho website tải nhanh hơn.

Hôm nay mình có một tip khác có lẽ bạn vẫn chưa nghe nói tới:

Sử dung hình ảnh WebP

WebP là gì?​

Hình ảnh WebP là một định dạng hình ảnh mới do Google phát triển. Nó giống như Google AMP mà mình đã từng đề cập.

Vậy hình ảnh WebP có gì đặc biệt so với các định dạng ảnh khác?

Đây là ưu điểm của WebP:

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

Như bạn đã biết hình ảnh thường là thủ phạm làm cho website tải chậm. Do vậy con số 25% chắc chắn là con số có ý nghĩa.

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

Cách sử dụng WebP trong website WordPress?

​Có một 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 hỗ trợ. Ở thời điểm hiện tại, hình ảnh WebP chỉ được hỗ trợ bởi Chrome, Opera, và các trình duyệt sử dụng nhân Chronium khác.

​Do vậy bạn không thể chuyển tất cả hình ảnh trong website sang định dạng WebP được. Bởi những trình duyệt như Firefox hay Safari sẽ không hỗ trợ chúng. 

Chỉ có một cách duy nhất:

Sử dụng plugin đặc biệt để website của bạn sẽ phục vụ hình ảnh WebP tối ưu khi người dùng sử dụng trình duyệt hỗ trợ chúng. Trái lại hình ảnh PNG hay JPEG sẽ được phục vụ trên trình duyệt không hỗ trợ WebP.

Tóm lại, để sử dụng hình ảnh định dạng WebP trong website WordPress bạn cần làm 2 thứ sau:

  1. Tạo một phiên bản WebP cho các hình ảnh đang có trên website.
  2. Chỉ phục vụ những hình ảnh WebP này cho những 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 tại theo hiểu biết của mình đây là giải pháp tốt nhất:

1. Việc thứ nhất bạn có thể sử dụng hai plugin nén ảnh: ShortPixel Optimus.ioLiteSpeed Cache . Hai plugin tối ưu ảnh đầu tiên đều có phiên bản miễn phí trên WordPress Repository. Nhưng tính năng miễn phí khá hạn chế. Bạn nên mua gói trả phí. Cá nhân mình đang mua gói One time ShortPixel. Còn đối với các bạn đ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 cách cài đặt LiteSpeed Webserver nếu bạn đang dùng VPS)

2. Việc thứ hai sẽ do một plugin cache đảm nhiệm. Trước kia chỉ có mỗi plugin cache Cache Enabler có khả năng làm việc này. Nhưng nay bạn có thêm lựa chọn nữa. Đó là plugin LiteSpeed Cache.

Cách bổ sung hình ảnh WebImage vào WordPress sử dụng ShortPixel và Cache Enabler

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

Đầu tiên 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 cách sử dụng ShortPixel và nhận thêm 100 hình ảnh Ở ĐÂY

Với bạn đang cài đặt plugin LiteSpeed Cache thì bỏ qua bước này. Hiện tại LiteSpeed Cache đã có tính năng tối ưu ảnh miễn phí rồi. Quá trình 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 quá trình tối ưu ảnh để sinh ra phiên bản WebP cho các hình ảnh đang có trong website. ​

sử dụng webp trong wordpress 1

Đến đây bạn đã có ảnh WebP cho các ảnh đang tồn tại. 

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

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

sử dụng webp trong wordpress 3

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

Nghe có vẻ ngon. Nhưng:​

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

Cách sử dụng WebP cho plugin LiteSpeed bạn xem thêm Ở ĐÂY

 Lưu ý:

Mình đã test thử và nhận thấy không thể 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ỉ phục vụ ảnh WebP do nó sinh ra mà thôi. ​

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

Cách sử dụng hình ảnh WebP để tăng tốc website WordPress
Đánh giá bài viết này

3
Để lại bình luận

2 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
3 Comment authors
Recent comment authors
mới nhất cũ nhất
Guest
Baldwin Jackson

Xin chào mate như là một nhà phát triển chuyên nghiệp WordPress tweaking tốc độ tải trang luôn luôn là vấn đề quan tâm và vài tháng trở lại Tôi tò mò về những plugin để lựa chọn để tối ưu hóa tốc độ tải trang WordPress. Không còn nghi ngờ gì nữa là plugin W3 Total Cache là một trong những plugin cache tốt nhất với các tùy chọn mở rộng nhưng gần đây tôi đã sử dụng 2 tài nguyên tốt hơn là Hummingbird và Breeze Cache Plugin. Tôi cá nhân sẽ đề nghị bạn cũng như để… Đọc thêm »

Guest

cái này như vậy cũng khá kén người dùng đó chứ, có khác gì nhiều với smush.it không anh Thịnh

Scroll Up
Share This