Посмотрим как ускорить сайт на Битрикс с помощью webp изображений. Формат .webp более эффективен.
Формат .webp более эффективен, а значит изображения занимают меньше дискового пространства и быстрее загружаются. Однако, правильная настройка часто вызывает вопросы.Конвертер webp для Битрикс
Будем работать со стандартным веб-окружением Битрикс, сервер под управлением CentOS 7. Так как формат webp поддерживается не всеми браузерами, нам нужно будет не только конвертировать все изображения, но и оставить оригиналы. Тогда браузеры без поддержки webp смогут загружать привычные форматы изображений.Обратите внимание, объем сайта на диске существенно увеличится, так как каждое изображение будет продублировано в формате webp.
Установка утилиты cwebp
Для конвертации изображений в формат WebP будем использовать утилиту cwebp, следующей командой установим ее на сервер:
Исходный код:
Сразу после установки ее можно использовать из консоли. Но для удобства лучше оформить всё в простенький скрипт. yum install libwebp-tools
Скрипт конвертера WebP
Следующим шагом создадим небольшой скрипт, который будет преобразовывать изображения в формат .webp:
Исходный код:
Разместим скрипт в папке /root/ и назовем файл webp.sh. На этом подготовительные работы закончены, теперь достаточно перейти в терминале в нужную директорию с изображениями и запустить скрипт командой:#!/bin/bash
# converting JPEG images
find $1 -type f -and \( -iname "*.jpg" -o -iname "*.jpeg" \) \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -q 90 "$0" -o "$webp_path";
fi;' {} \;
# converting PNG images
find $1 -type f -and -iname "*.png" \
-exec bash -c '
webp_path=$(sed 's/\.[^.]*$/.webp/' <<< "$0");
if [ ! -f "$webp_path" ]; then
cwebp -quiet -lossless "$0" -o "$webp_path";
fi;' {} \;
Исходный код:
Скрипт продублирует все изображения в формат .webp и положит их рядом с оригиналом, будет обработана текущая директория и рекурсивно все вышестоящие директории. То есть если вы запустите его из корневой директории сайта, то будут обработаны все изображения, в том числе и те что относятся к ядру Битрикса. В этом нет ничего страшного, но лучше запускать скрипт непосредственно в директориях с изображениями, обычно это /upload/ или /images/./root/webp.sh
Конвертация изображений займет некоторое время, зависит от мощности сервера и текущей нагрузки. Для примера, 2 гигабайта изображений на нашем любимом облачном сервере обрабатываются около 15 минут. Для сайтов на 1С-Битрикс мы рекомендуем тарифы линейки Turbo - это наиболее мощные решения в линейках бюджетных серверов.
Конфигурация nginx для отдачи WebP
Пока конвертер webp работает, мы можем настроить конфигурацию веб-сервера nginx для работы с .webp изображениями. Сервер будет проверять на лету поддержку формата webp браузером клиента и, если браузер поддерживает webp и изображение в формате .webp существует, то сервер будет отдавать изображения в формате .webp. В любом другом случае сервер отдает оригиналы изображений в исходном формате. Вариант хорош тем, что клиент всегда увидит изображения, даже если webp-копии не существует или браузер клиента не поддерживает формат webp.Найдите файл виртуального хоста по пути /etc/nginx/bx/site_available/, обычно это файл s1.conf или ssl.s1.conf (если на сайте включен https). После строки include bx/conf/bitrix_general.conf; добавляем:
Исходный код:
Теперь надо перезапустить nginx, чтобы применились изменения в конфигурации:location ~* ^.+\.(jpg|jpeg|png)$
{
if ( $http_accept ~* webp ) {
set $webp "A";
}
if ( $request_filename ~ (.+)\.(png|jpe?g)$ ) {
set $file_without_ext $1;
}
if ( -f $file_without_ext.webp ) {
set $webp "${webp}E";
}
if ( $webp = AE ) {
add_header Vary Accept;
rewrite ^(.+)\.(png|jpe?g)$ $1.webp break;
}
expires 365d;
}
Исходный код:
service nginx restartЕсли что-то пошло не так, то можно удалить все webp-копии изображений, просто введите команду:
Исходный код:
find . -type f -name '*.webp' -exec rm {} +
Важные замечания
Представленное решение больше подойдет для единоразовой работы по конвертации всех изображений. Конечно, вы можете запускать скрипт по CRON на регулярной основе, но учтите следующие моменты:- скрипт не учитывает даты создания и проверяет все изображения подряд
- скрипт не проверяет актуальность оригинального изображения
- скрипт не обновляет webp изображения
- скрипт не удаляет webp изображения
