Как ускорить загрузку сайта с WebP
Исследование Experienced Dynamics показало, что неоптимизированный контент — это причина роста отказов. 70% пользователей закрывают неудобные сайты. А поведение пользователей влияет на позицию в поисковой выдаче. Поэтому все стараются сделать сайты максимально комфортными в использовании и быстрыми.
JPEG 2000, JPEG XR и WebP — это форматы изображений, которые обладают превосходными характеристиками сжатия и качества по сравнению с аналогами JPEG и PNG. По данным Google, кодирование изображений в этих форматах помогает быстрее загружать веб-страницы и потреблять меньше мобильного трафика.
Рассказываем о формате WebP и его подключении к онлайн-проекту.
Чем отличается формат WebP
WebP — современный формат сжатия изображений, который за счет меньшего размера картинок позволяет ускорить загрузку сайта у пользователей.
По результатам исследования Google:
- Картинка в WebP, сжатая без потерь, меньше PNG на 26%.
- Картинка в WebP, сжатая с потерями, меньше JPEG на 25-34%.
Формат WebP разработан в 2010 году компанией Google. Поддерживает сжатие с потерями и без, а также полупрозрачность и анимацию. Он считается одним из лучших, поскольку дает значительное улучшение производительности сайта.
Как преобразовать изображения в WebP
Изображения можно преобразовать самостоятельно или с помощью модуля хостинга.
Конвертация с помощью специальных сервисов
Для конвертации используйте один из специальных сервисов. Выбирайте любой — все просты в применении:
Загружаете картинку и получаете ее в новом формате на сайте или по почте.
Конвертация на стороне хостинга
Другой способ: подключить модуль на хостинге. Он доступен на виртуальных серверах RED.Site и включается за 2 клика. Это бесплатно.
Как это работает: вы загружаете изображения в любом формате, например в JPG или PNG. Модуль конвертирует их в формат WebP. Отметим, что новые изображения займут дополнительное место на тарифе, но будут в несколько раз меньше оригиналов. Поэтому перед подключением убедитесь в достатке места.
После изображения автоматически отдаются браузеру в подходящем формате: тем браузерам, которые пока не поддерживают WebP, будет отдаваться обычный формат изображения. Например, это устаревшие версии браузеров.
Ускоряйте работу сайта с форматом WebP!
Статья подготовлена Reddock — хостинг для 1С-Битрикс.
WebP лишь с недавних пор поддерживается на маках, начиная с Big Sur. Частично.
На iOS тоже есть свои накладки. Не у всех пользователей устройств Apple самая свежая версия ОС.
JPEG 2000, JPEG XR - форматы, разработанные Google и активно продвигаемые в Page Speed Insights... Вот только ни один браузер на основе гугловского Chromium (включая Chrome) их не поддерживает.
После перехода на webp в проекте сразу же выросла глубина просмотра и время на сайте примерно на 20%, соответственно отразилось на конверсии - min 5%
Крутые результаты!
Должно становиться лучше, но по факту, если вы изначально следили за оптимизацией своих фото, то такого эффекта не будет. У меня есть сайт, где переход на webp дал результат в пределах погрешности.
Вячеслав, благодарим за участие. Можете поделиться подробнее, в каком случае не удается оптимизировать изображения? Ваш опыт может помочь другим.
У нас была проблемка, мы ее заметили именно в процессе перехода, когда считали размеры и время отклика.
У WebP действительно хорошие показатели сжатия (это не единственный новый формат такого типа - с 2015 года есть к примеру формат AVIF, AV1 Still Image File Format), но
1) все сохранённые картинки тоже будут в формате webp, что не всем пользователям нравится (не все десктопные просмотрщики и не все файловые менеджеры полноценно работают с новыми графическими форматами).
2) превью сайта в TG/VK (возможно, и в других случаях) придётся формировать с помощью JPEG или PNG, поэтому при внимании к этой детали стоит заложить в проект необходимость конверсии части картинок в один из старых форматов.
Другой способ: подключить модуль на хостинге. Отметим, что новые изображения займут дополнительное место на тарифе, но будут в несколько раз меньше оригиналов.
Могут быть промежуточные решения с разным потреблением процессорного времени и места на диске, например картинка может быть пропущена через сервер генерации превью (imgproxy/thumbor/picfit/imaginary), затем результат может быть закэширован nginx/apache. В случаях, когда картинка в итоговом формате генерируется из своего прообраза на сервере, дополнительное место долговременно не занимается - тратится только немного дополнительного времени на генерацию.