Ускорение сайта на 1С-Битрикс: внедряем изображения webp

4 октября 2022

Наверное, каждый владелец сайта проверял скорость работы через Google PageSpeed Insights и видел сообщение "Используйте современные форматы изображений".

Рядом обычно была очень существенная цифра, уменьшив которую, точно получили бы прирост в производительности. Сейчас пришло время это сделать на 1С-Битрикс! Будем внедрять формат webp.

За счет чего достигается производительность

Алгоритм сжатия webp пришел на смену стандартному jpeg. Результат обработки получается соизмеримым, но webp физически меньше "весит". Например, на картинке выше видно, что при размере файла в 405Кб внедрение webp позволит сэкономить 392Кб, правда это только для простых файлов, для более сложных фотографий экономия будет меньше, но все равно порядка 30-50%. Если общий объем изображений на странице порядка 3Мб, то с помощью конвертации в webp можно получить всего 1Мб изображений, что весьма существенно. В детали сжатия изображений алгоритмом webp вдаваться не будем, нам это не особо сейчас важно.

Алгоритм внедрения webp на сайт

В 1С-Битрикс есть отличная функция создания изображений при первом выводе и хранении их в папке resized_cache. Именно ее мы и будем использовать.

Для начала проверяем, поддерживает ли серверная библиотека GD работу с форматом webp (практически все современные сервера ее поддерживают). Проверить можно с помощью php функции gd_info(). Если поддерживает, то действуем дальше. Если нет - то пишем в поддержку хостинга и просим обновить ПО на сервере. Если они категорически отказываются, то ищем другой вариант хостинга. Например, на Beget поддержка webp есть и корректно работает. Если у вас сайт работает на VDS, то обновлять ПО придется самостоятельно.
Далее забираем класс обработки отсюда, разархивируем и ложим в папку php_interface вашего сайта.
После этого в init.php подключаем использование класса Pict через функцию CModule::AddAutoloadClasses. Теперь на всем сайте доступен наш класс по namespace, который в нем указан.
Теперь берем компоненты, которые используют изображения и в result_modifier их шаблонов переопределяем изображения с помощью метода getWebp класса Pict (либо для одновременного ресайза - getResizeWebp). После того, как мы это сделали, мы получили копии исходных изображений в формате webp.
Теперь выводим их вместо стандартных картинок с помощью тега picture. Здесь важно оставить вывод стандартных изображений для тех браузеров, которые не поддерживают webp. Это как раз и делается с помощью тега picture.

Узкие места

Трудозатраты сильно увеличиваются в зависимости от количества и громоздкости используемых компонентов на сайте. Для слайдеров, каруселей и прочих элементов, обрабатываемых с помощью JS возможно придется вносить изменения и в JS код для их корректной обработки, и в CSS для корректного отображения.

Необходимо иметь больше свободного места на сервере, т.к. для каждого изображения создается его webp копия.

Изображения шаблонов и медиабиблиотеки необходимо переконвертировать и подключить вручную.

Полученные результаты

После внедрения webp на битрикс сайт вы получаете существенный прирост в скорости, по данным Google PageSpeed - в особо запущенных случаях порядка 30-40 пунктов. Если графики на сайте немного и она уже оптимизирована с помощью удаления метаданных и отресайзена, то прирост будет ниже, но тоже существенным. На практике перевода brainforce.by на webp прирост составил 18-20 пунктов.