Hướng dẫn kích hoạt WebP cho WordPress trên Nginx (HocVPS, VPSSIM…)

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

Xem thêm: https://aznet.io/t/trien-khai-dinh-dang-hinh-anh-webp-tren-wordpress/108

3. Cấu hình trên nginx

• Truy cập đường dẫn /var/www/example.com/
• Tạo file webp-nginx.conf
• Sao chép nội dung tệp tại File cấu hình nginx cho WebP Express 6
• # WebP Express rules
  # ——————–
  location ~* ^/wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  }
  location ~* ^/wp-content/.*\.webp$ {
  expires 365d;
  if ($whattodo = AB) {
  add_header Vary Accept;
  }
  }
  if ($http_accept ~* “webp”){
  set $whattodo A;
  }
  if (-f $request_filename.webp) {
  set $whattodo “${whattodo}B”;
  }
  if ($whattodo = AB) {
  rewrite ^(.*) $1.webp last;
  }
  if ($whattodo = A) {
  rewrite ^/wp-content/.*\.(jpe?g|png)$ /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content break;
  }
  # ——————- (WebP Express rules ends here)
• Lưu file và reload nginx: nginx -t && nginx -s reload