Как настроить плагин Webp Express для Wordpress на NGINX?

Нужно улучшить показатели сайта на wordpress в Google Page Speed. Хочу сделать подмену всех jpeg, jpg, png картинок на .webp. Установил плагин Webp Express. Он перевел все картинки моего сайта в .webp формат. Картинки в должных папках есть в нужном формате.

Но проблема. Мой сайт находится на VPS (Ubuntu 18/04). Веб-сервер не Apache2, а NGINX.

В FAQ к плагину я нашел настройки для NGINX. Вот что пишет создатель:

It is possible to make WebP Express work on NGINX, but it requires manually inserting redirection rules in the NGINX configuration file (nginx.conf or the configuration file for the site, found in /etc/nginx/sites-available).

There are two different approaches to achieve the redirections. One based on rewrite and one based on try_files. As try_files performs best, I shall recommend that.

For multisite on NGINX, read here

method 1 (try_files)

Lets take this step by step.
First step is to redirect images to the script. Second step is redirecting directly to existing webp images. Finally, as an optional third step, you can add extra rules for enabling the Convert non-existing webp-files upon request functionality

Step 1: Redirecting images to the script

The following will redirect all images under wp-content to the script, but only for webp-enabled browsers.

Insert the following in the server context of your configuration file (usually found in /etc/nginx/sites-available). «The server context» refers to the part of the configuration that starts with «server {» and ends with the matching «}».
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /nonexisting-because-try-files-needs-fallback
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

Beware when copy/pasting: You might get html-encoded characters. Verify that the ampersand before «wp-content» isn’t encoded

If you have moved wp-content to a non-standard place, you must change accordingly. Especially note that you must also change the wp-content parameter to the script. It expects a relative path to wp-content (from document root) and is needed so the script can find the configuration file.

The xsource parameter helps the script finding the source file. It is only needed on some setups. You can try deleting it and see if it still works.

Beware that if you haven’t enabled png conversion, you should replace «(png|jpe?g)» with «jpe?g», so the first line becomes:
location ~* ^/?wp-content/.*\.jpe?g$ {
If you cannot get this to work then perhaps you need to add the following to your mime.types configuration file:
image/webp webp;
If you still cannot get it to work, you can instead try method 2

Step 2: Redirecting directly to existing webp images.

Once you got this working, lets improve performance by redirecting directly to existing webp images. This step isn’t necessary, as the script also does that — but invoking the php script takes more resources that the direct redirect. Also, a direct redirect will produce ETag response header, which is increases caching performance.

The rules looks for existing webp files by appending «.webp» to the URL. So for this to work, you must configure WebP Express to store the converted files like that:
1. Set Destination folder to mingled
2. Set File extension to Append «.webp»

Now, place the following in the server context (replacing what you inserted in step 1):
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

Beware when copy/pasting: You might get html-encoded characters. Verify that the ampersand before «wp-content» isn’t encoded

Again, beware that if you haven’t enabled png conversion, you should replace «(png|jpe?g)» with «jpe?g».

Credits: This second step builds on Eugene Lazutkins solution.

Step 3:: Caching
In most cases you can and should allow images to be cached for a long period. If you do not want to do that, simply remove the «expires 365d;» line.

Step 4:: Routing requests for non-existing webps to the converter

Simply add the following rules below the ones you added in step 2:
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
      ;
}

Again, beware that if you haven’t enabled png conversion, you should replace «(png|jpe?g)» with «jpe?g».



Я вообще не силен в настройках NGINX и плохо понимаю пока регулярные выражения. Мой NGINX конфиг теперь выглядит вот так (добавил последние два location):

server {

	...

  error_page 598 = @backend;

  ##########

  location @backend {
    try_files $uri $uri/ /$2$3 /$3 /index.php  =404;
    #   Путь к сокету PHP-FPM
    fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
    #
    fastcgi_index index.php;
    fastcgi_read_timeout 360;
    #   Добавляем содержимое fastcgi_params.conf
    ################################################################################
    fastcgi_param  QUERY_STRING       $query_string;
    fastcgi_param  REQUEST_METHOD     $request_method;
    fastcgi_param  CONTENT_TYPE       $content_type;
    fastcgi_param  CONTENT_LENGTH     $content_length;
    fastcgi_param  SCRIPT_NAME        $fastcgi_script_name;
    fastcgi_param  REQUEST_URI        $request_uri;
    fastcgi_param  DOCUMENT_URI       $document_uri;
    fastcgi_param  DOCUMENT_ROOT      $document_root;
    fastcgi_param  SERVER_PROTOCOL    $server_protocol;
    fastcgi_param  HTTPS              $https if_not_empty;
    fastcgi_param  GATEWAY_INTERFACE  CGI/1.1;
    fastcgi_param  SERVER_SOFTWARE    nginx/$nginx_version;
    fastcgi_param  REMOTE_ADDR        $remote_addr;
    fastcgi_param  REMOTE_PORT        $remote_port;
    fastcgi_param  SERVER_ADDR        $server_addr;
    fastcgi_param  SERVER_PORT        $server_port;
    fastcgi_param  SERVER_NAME        $server_name;
    fastcgi_param  SCRIPT_FILENAME    $document_root$fastcgi_script_name;
    fastcgi_param  REDIRECT_STATUS    200;
    ################################################################################
  }

  ############################################################################

  location  / {
    index  index.php index.html index.htm;
    try_files $uri $uri/ /index.php?$args;
  }

  ############################################################################

  location ~* /(\w+/)?(\w+/)?(.+\.(jpe?g|jpg|ico|gif|png|webp|css|js|pdf|txt|tar|woff|svg|ttf|eot|csv|zip|xml|yml))$ {
    access_log off;
    try_files $uri $uri/ /$2$3 /$3 /index.php?$args;
    expires max;
    add_header Access-Control-Allow-Origin *;
    add_header Cache-Control public;
  }

  ############################################################################

  location ~ ^/(\w+/)?(\w+/)?init.php {
    return 404;
  }

  location ~* \.(tpl.?)$ {
    return 404;
  }

  location ~ /\.(ht|git) {
    return 404;
  }

  location ~* \.php$ {
    return 598 ;
  }

  ################################################################################
  
	location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
	  add_header Vary Accept;
	  if ($http_accept !~* "webp"){
		break;
	  }
	  try_files
		/nonexisting-because-try-files-needs-fallback
		/wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
		;
	}

}


NGINX перезагружал. Но на сайте и после обновления кэша не происходит подмены адреса картинки. Может быть я что-то забыл? Или какой то параметр конфига NGINX мешает? Подскажите пожалуйста.
  • Вопрос задан
  • 2916 просмотров
Решения вопроса 1
megafax
@megafax
web-программист
У Вас отрабатывает первый location для статики, не доходя до второго. Поставьте его перед первой статикой, либо переделайте выражение, чтобы в него не захватывались jpg и png
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы