Webp express не работает

Как настроить WebP Express в WordPress на Nginx

Сегодня поговорим о том Как настроить WebP Express в WordPress на Nginx и PHP-FPM.

Сам плагин легко устанавливается из консоли WordPress, а вот его настройка в связки с Nginx вызывает затруднение. Ну да ладно. Давайте пройдем все этапы по настройке WebP Express вместе с вами. И разберемся как можно настроить WebP Express в CMS WordPress на WEB-сервере Nginx.

Сам процесс установки в данной статье я описывать не буду. Думаю и сами разберетесь. Приступим сразу к его настройке.

Настройка WebP Express в WordPress на Nginx

• Operation mode — устанавливаем в положение Varied image responses.
• Scope — устанавливаем в Uploads and themes, данный параметр отвечает за преобразование файлов в данных папках.
• Images types to work on — устанавливаем в Both jpeg and pngs, данный параметр отвечает за то, какие расширения файлов преобразовывать в WebP.
• Destination folder — тут выбираем в какой папке хранить уже преобразованные файлы. Есть два варианта: оставить в той же или помещать в другую.
• Destination structure — если вы выбрали перемещать преобразованные файлы в другую папку, то в данном пунке уже выбираем название папки: image-roots или document-root.
• Cache control header — можно установить кэш для изображений.

Переходим к следующей категории:

Данная категория помещает необходимые правила в файл .htaccess . Данные правила необходимы только если у Вас установлен Apache. Но на всякий случай я их оставил.

Здесь настраиваются правила для конвертации изображений в формат WebP. Оставляем без изменений. И так все норм.

Здесь указываются методы конвертирования для вашей системы.

Если у вас отключен метод cwebp, а при прохождении теста выдает: No cwebp binaries could be executed (permission denied for user: «www-data») . Значит у вас нехватает утилиты cwebp. Для установки в Ubuntu/Debian в терминале набираем следующее:

Тут плагин предлагает с конвертировать все имеющиеся изображения в формат *.webp . А также конвертировать изображения при их загрузке на сайт.

Категория AlterHTML отвечает за автоматическую вставку кода в ваши изображения. Без данного параметра отображение формата *.webp на сайте с WordPress и Nginx так и не заработала.

Также отказывалось работать, если установить в параметре What to replase переключатель в положение Replase image URLs

Если есть вопросы, то пишем в комментариях.

Источник

Как настроить плагин 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 «>».

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):

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:

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

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

NGINX перезагружал. Но на сайте и после обновления кэша не происходит подмены адреса картинки. Может быть я что-то забыл? Или какой то параметр конфига NGINX мешает? Подскажите пожалуйста.

Источник

WebP Express – плагин сжатия изображений WordPress

Внедрите новый формат WebP в WordPress с помощью плагина WebP Express. Сожмите свои изображения до 30% без потери качества!

Скорость загрузки сайта – один из важнейших факторов для вебмастера. Сделать страницы сайта информативнее и полезней с помощью изображений – лучший вариант. Но тогда появляется проблема долгой загрузки изображений.

WebP – это современный формат изображений, который обеспечивает превосходное сжатие без потерь и с потерями для изображений в Интернете. На данный момент этот формат могут использовать 80% пользователей пользователей на основе данных сайта caniuse.com.

Глупо имея такую технологию не использовать её у себя. PageSpeed Insights говорит нам “Используйте современные форматы изображений – Для изображений в форматах JPEG 2000, JPEG XR и WebP используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем изображения PNG и JPEG.”

JPEG 2000 и JPEG XR могут открыть меньше 20% пользователей, это пользователи IE и Safari, поэтому мы будет сжимать изображения для большинства.

Плагин WebP Express для WordPress

WebP Express – бесплатный плагин из библиотеки WordPress. Установить плагин и скачать можно по ссылке – https://ru.wordpress.org/plugins/webp-express. Плагин работает с последней версией WordPress и бесплатно оптимизирует изображения на всем сайте, даже на страницах магазина WooCommerce работает WebP.

Настройка

После установки зайдите в Настройки > WebP Express. На скришоте вы можете увидеть мои настройки плагина:

Настройки плагина WebP Express

General

В разделе General > Image types to work on выберите, какие форматы плагин будет оптимизировать. Формат WebP поддерживает прозрачность, поэтому за место “Only jpegs” выберите “Both jpegs and pngs”.

В Destination folder выберите место расположение изображений нового формата:

• Mingled: при выборе «Mingled» изображения webp будут помещаться в ту же папку, что и оригинал, но только для изображений в папке Uploads. Другие изображения, например изображения тем, хранятся отдельно.
• Если вы используете WebP Express вместе с Cache enabler или Shortpixel, выберите этот параметр
• In separate folder: изображения хранятся в отдельной папке (wp-content / webp-express / webp-images / doc-root).

Redirection rules

В разделе Redirection rules есть 2 параметра.

• Redirect directly to existing converted images – Это добавит правила в .htaccess, которые перенаправляют непосредственно в существующие преобразованные файлы. Если вы не активируете этот параметр, это будет PHP-скрипт, который обрабатывает перенаправление на существующие файлы webp. Наилучшая производительность достигается путем перенаправления в .htaccess, поэтому включаем этот параметр.
• Redirect requests for non-existing webp-files to converter – правило позволяет создавать WebP версию изображения автоматически, если оно ещё не создано. То есть когда человек заходит к вам на сайт, но у изображения нет WebP версии, она автоматически сгенерируется.

Conversion

Раздел Conversion отвечает за качество и способ сжатия. Я не хотел, чтобы качество изображений падало, поэтому установил значение 100. WebP сжимает изображения без потери качества, поэтому размер файла уменьшится, а качество нет. Вы можете экспериментировать с этим значением и установить то, что Вам подходит.

Conversion method определятся автоматически на основе значения сжатия. Также здесь присутствует возможность использовать платные API, что нам не интересно.

Ставим галочку напротив Convert on upload, чтобы изображения конвертировались при загрузки. Разработчик плагина всё учел, поэтому конвертируются также миниатюры изображения.

Alter HTML

Раздел Alter HTML поможет вам решить, что делать, если браузер посетителя не поддерживает формат WebP. Я рекомендую ставить настройки как у меня – Replace image URLs. Так изображения WebP будет показываться только в поддерживаемых браузерах, проблем с отображением фото не будет.

Если изображения не отображаются, то попробуйте выбрать “Replace img tags with picture tags, adding the webp to srcset” и поставьте галочку у “Dynamically load picturefill.js on older browsers”. Тэг

могут использовать более 93% пользователей.

Заключение

Теперь вы знаете, как загрузить WebP в WordPress с помощью плагина. Благодаря нему Ваши пользователи будут быстрее получать ваш контент на экраны своих устройств и ваш сайт сможет вырваться выше и получить больше положительных оценок.

В комментариях расскажите, удалось ли вам настроить WebP Express, на сколько сайт стал быстрее загружаться. Также пишите, какие инструкции, обзоры вы хотите видеть на сайте!

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Источник

WordPress.org

Русский

Проблемы в плагине Webp

Всех приветствую. Помогите мне пожалуйста. Проблема с плагином Webp express. Я значит настроил плагин и решил сохранить настройки с внесением правил в .htaccess, но вышло вот такое сообщение:
It seems your server setup does not support headers in .htaccess. You should either fix this (install mod_headers) or deactivate the «Enable direct redirection to existing converted images?» option. Otherwise the Vary:Accept header will not be added and this can result in problems for users behind proxy servers (ie used in larger companies)

Я написал хостеру с вопросом, включен ли у них mod_headers. Они сказали, что все ок, mod_headers работает и входит в конфиг. И я вот сижу теперь и не знаю, что делать. Page Speed орет на современные форматы, а я не могу победить эту проблему в Webp express. Помогите пожалуйста, я уже 3 дня с этим мучаюсь.

Вы можете потестировать сайты самого Google в их же PageSpeed, удивитесь…

ИТОГ: ради увеличения скорости загрузки, вы отказались от показа картинок всем посетителям. Разницу в скорости человеческий глаз уловить не может. Отсутствие/наличие картинки — может.
Вы в очередной раз сделали верный и очень правильный выбор.

И да, с точки зрения гугля, идиальный сайт — это чистая пустая страница. Так что вам есть еще куда стремиться.

tuxfighter, плохая аура от вас, за все время бурной переписки от вас исходит какой-то негатив. Может быть я не прав, но по сообщениям складывается именно такое впечатление. Я не такой профи как многие из вас, я только учусь и постигаю совершенно новую для себя науку. По поводу у всех не у всех картинки будут загружаться. Проводил тест на дешевом, старом смартфоне и к моему удивлению, картинка Webp загрузилась без проблем. Если говорить о компьютерах, то мне кажется единственный браузер, который не поддерживает Webp, это Enternet explorer, разве есть люди кто сидят в Enternet explorer. Все уже давно загрузили себе гугол браузер либо яндекс браузер, как на компьютер, так и на смартофоны, которые поддерживают Webp, даже сафари уже поддерживает Webp. Мне вот интересно, кто не увидит фото в формате Webp?

• Ответ изменён 5 месяцев, 2 недели назад пользователем anfil .

Источник