Нужно улучшить показатели сайта на 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 мешает? Подскажите пожалуйста.
Средний
Простой