Như các bạn đã biết WebP là một định dạng ảnh được phát triển bởi ông lớn Google nhằm mục đích giảm dung lượng của hình ảnh nhưng vẫn giữ nguyên được chất lượng hiển thị. Để website đạt được tốc độ cao thì bạn cần tối ưu hình ảnh vừa cân bằng được 2 yếu tố là tốc độ tải trang và trải nghiệm người dùng.
Định dạng WebP góp phần giúp bạn đạt được gần như 2 yếu tố đó, tuy nhiên việc kích hoạt và sử dụng Webp hiện không được phổ biến và ít bạn sử dụng do giới hạn nhiều mặt về kỹ thuật đặc biệt trên nginx vẫn có rất ít bạn sử dụng do chưa có plugin nào hỗ trợ. Một vài plugin hỗ trợ sử dụng thẻ tag html picture tuy có thể giải quyết được vấn đề về hình ảnh nhưng lại mang cho bạn một nổi khổ khác là kích thước DOM lớn.
Hôm nay mình sẽ hướng dẫn các bạn cách tạo và sử dụng định dạng Webp trên website sử dụng Nginx như các bạn sử dụng HocVPS Script, VPSSIM .v.v.
WebP hiện không được hỗ trợ trên trình duyệt Safari của Iphone, Mac .v.v. tuy nhiên với phương pháp này, hình ảnh sẽ tự hiện thị theo định dạng tương thích với trình duyệt.
Mục lục
Tại sao bạn nên sử dụng WebP
Như câu chuyện ở trên WebP được phát triển bởi Google và các công cụ như Google Page Speed đều lấy thước đo sử dụng Webp hay không để đánh giá điểm tốc độ. Mình nghĩ rằng không chỉ việc sử dụng WebP làm giảm dung lượng trang web mà còn giúp bạn đạt nổi bật hơn, gây chú ý hơn với anh Google và dễ dàng lên top hơn.
Một mẫu ví dụ về dung lượng và chất lượng hiển thị của hình ảnh định dạng PNG, JPG sang WebP.
Tạo ảnh Webp
Để sử dụng định dạng Webp trên website thì yếu tố đầu tiên là bạn cần có ảnh Webp ở trên hosting, server của mình. Có rất nhiều plugin hỗ trợ chuyển đổi các định dạng ảnh thường như jpg, png, jpeg .v.v. sang ảnh Webp bao gồm trả phí Shortpixel hay miễn phí như EWWW Image Optimizer.
Ở đây mình sẽ hướng dẫn sử dụng plugin EWWW Image Optimizer bởi vì nó miễn phí và tối ưu ảnh phù hợp với việc sử dụng trên nginx server
Cài đặt plugin EWWW Image Optimizer
Để cài đặt plugin bạn có thể truy cập Dashboard -> plugin -> cài mới hoặc tải trực tiếp tại đây.
Cấu hình và tiến hành Converter Webp
Sau khi cài đặt xong bạn truy cập Cài đặt -> WWW Image Optimizer để tiến hành cấu hình tiến hành converter các hình ảnh có trong Media.
Chọn Tab WebP, các thông số bạn cần lưu ý như:
- JPG/PNG to WebP: Chuyển đổi định dạng ảnh JPG và PNG sang WebP (Bắt buộc bật tính năng này).
- JS WebP Rewriting: tính năng này chỉ dành cho các bạn sử dụng Apache Server chỉ cần tích vào đây không cần cấu hình thêm.
- <picture> WebP Rewriting: không nên sử dụng tính năng này vì nó làm kích thước DOM lớn.
- WebP URLs: Sử dụng tính năng này nếu bạn dùng CDN.
- Force WebP: Yêu cầu convert lại tất cả hình ảnh WebP cho dù nó đã có sẵn.
Save cấu hình lại truy cập Thư viện -> Bulk Optimize để tiến hành convert tất cả các hình ảnh trong media sang định dạng WebP.
Kích hoạt sử dụng WebP trên Nginx Server
Khác với Apache Server thường được các plugin tối ưu sẵn dễ dàng sử dụng khi tích chọn có rewrite, Nginx Server bắt buộc phải cấu hình thủ công.
Truy cập đường dẫn sau /etc/nginx/conf.d/quannguyenphat.com.conf chỉnh sửa file nginx conf web đang cấu hình (thay đổi quannguyenphat.com thành tên miền của bạn). Thêm đoạn sau vào block server, nhớ chỉnh lại các đoạn màu đỏ cho phù hợp website của bạn:
location ~* ^/wp-content/.+\.(png|jpg)$ { add_header Vary Accept; try_files $uri$webp_suffix $uri =404; } location ~* ^(/wp-content/.+)\.(png|jpe?g)$ { set $base $1; set $webp_uri $base$webp_suffix; set $webp_old_uri $base.$2$webp_suffix; set $root "/home/quannguyenphat.com/public_html"; root $root; add_header Vary Accept; if ( !-f $root$webp_uri ) { add_header X_WebP_SP_Miss $root$webp_uri; } try_files $webp_uri $webp_old_uri $uri =404; }
Tiến tục truy cập theo đường dẫn /etc/nginx/nginx.conf thêm đoạn sau:
map $http_accept $webp_suffix {
default "";
"~*webp" ".webp";
}
Khởi động lại nginx bằng lệnh sau:
#Centos 6 service nginx restart #Centos 7 systemctl restart nginx
Sau đó truy cập website xóa cache bật F12 và kiểm tra kết quả:
Lời kết
Sử dụng WebP là một trong các yếu tố để tăng tốc website, hiện tất cả website của mình và khách hàng đối tác đều được chuyển qua sử dụng WebP và mang lại kết quả rất tốt. Bạn đã sẳn sàng sử dụng WebP chưa ? Hãy comment tại đây nếu bạn có thắc mắc hay ý kiến nào nhé
