Перевод изображений Bitrix сайтов на WebP для ускорения загрузки
В эпоху, когда более 70% пользователей используют смартфоны для выхода в Интернет, просто необходимо, чтобы сайт быстро загружался на телефоне. Один из способов увеличить скорость загрузки - это уменьшить объем передаваемых данных. Не секрет, что часто картинки занимают более половины объема трафика, передаваемого на телефон, а в некоторых случаях этот показатель вырастает до 90%.
Чтобы решить эту проблему, компания Google настаивает на переводе ваших изображений на более современный формат WebP. По нашим наблюдениям, при одинаковом качестве картинки, формат WebP выигрывает перед Jpg в 7-10 раз. Иными словами, если вы перейдете на этот формат, то выиграете многократно на скорости передачи данных, т.к. их объем существенно уменьшится.
Уйдем от теории и посмотрим на реальные данные работающего проекта на 1С-Битрикс с Битрикс окружением. В начале июня мы внедрили WebP на этом интернет магазине. Статистику берем для Айфонов, потому что это самый хороший показатель. Они достаточно мощные, чтобы быстро рендерить страницу в браузере и узкое место у них именно в скорости загрузки. Смотрим на графике времени от начала загрузки страницы до отображения её на экране.
Как мы видим из графика, средняя скорость загрузки страниц сайта на айфонах увеличилась более чем в 2 раза. Заказчик говорит, что это заметно, сайт стал загружаться практически моментально.
Повлияло ли это на SEO, конверсию или поведенческие факторы? Для изменений по SEO продвижению слишком мало времени прошло, а вот поведенческие и конверсия никак не изменились. Но, надо отметить, сайт и до этого достаточно быстро загружался. Да и не надо верить тем seo-маркетологам, которые во главу угла ставят скорость загрузки сайта (для них это всего лишь оправдание своих неудач, чтобы снять с себя ответственность, но об этом в другой раз).
Из коробки Bitrix не поддерживает WebP, нужны дополнительные доработки. Но о них позже, сначала обратим внимание на поддержку технологии WebP.
Как мы видим — всё не так плохо, но 5% посетителей картинку в WebP - не увидят, и просто так использовать новый формат вместо старого не получится. Поэтому внедрять WebP приходится одним из двух способов:
- либо на уровне сервера отдавать различным посетителям различные картинки (у кого устройство поддерживает WebP - тому WebP, остальным JPG, PNG)
- либо на уровне верстки использовать тег <picture>, в котором указаны версии файлов с WebP и старые форматы (например, на нашем сайте именно так)
Нельзя определенно сказать, какой вариант лучше, удобнее. Надо выбирать возможность по месту. Большие сайты легче на уровне сервера сделать (решение фактически одно на любую систему управления), небольшие вторым способом.
Если вы хотите ускорить свой сайт, перевести его картинки на WebP — обращайтесь!