chain doc dot ok back item-arrow angle-left angle-right vk instagram linkedin facebook play-button mail-ic nda
Все статьи Бизнес-wiki

WebP: ускоряем сайт по PageSpeed Insights за 30 минут.

Святослав Волков
Задать вопрос

Владельцы сайтов часто задумываются над тем, как получить хорошие показатели Google PageSpeed Insights (GPSI), считая, что от них зависит SEO-продвижение сайта. Это не совсем так, но косвенно показатели GPSI действительно влияют на SEO и конверсию.

Мы расскажем, как за 30 минут прокачать показатель от Google на пару десятков баллов и тем самым приблизиться к заветной зеленой зоне в GPSI.

Почему WebP и SEO неразделимы?

Одним из первых предупреждений при сканировании сайта в PageSpeed Insights обычно выходит это: «Используйте современные форматы изображений»:

Google хочет, чтобы на нашем сайте были только next-gen image formats изображения. Это может быть:

  • JPEG 2000 (поддерживается только в Safari),
  • JPEG XR (для Internet Explore),
  • AVIF (Firefox и Chrome, а также некоторые мобильные браузеры),
  • WebP (поддерживается всеми, кроме Internet Explore)

AVIF прекрасен: он меньше по размеру, чем WebP, а также обладает гораздо лучшим визуальным качеством картинки.

НО: AVIF не индексируется Яндексом, держите ссылку на официальное подтверждение.

В перечне Яндекса есть WebP, а вот AVIF отсутствует. Поэтому в нашем случае выбор очевиден – используем WebP.

По нашему опыту, использование WebP на сайте в среднем способно добавить до 20-30 баллов прироста по шкале GPSI. Это средняя температура по больнице, т.к. у кого-то может не быть вовсе изображений на странице или наоборот – могут использоваться TIFF-изображения размером в несколько десятков мегабайт. Одно можно сказать точно – WebP помогает, но всем по разному.

WebP при одинаковом визуальном качестве обычно меньше на 25 и более процентов, чем аналогичное изображение в JPG-формате. WebP поддерживает прозрачные слои (может заменить PNG), а также поддерживает анимацию.

Хороший бал в GPSI не равно хорошее SEO. Но нужно помнить, что чем выше бал – тем быстрее ваш сайт. Cейчас, когда многие пользователи используют VPN и общее качество интернета от постоянных блокировок страдает – быстрый сайт это уже не роскошь, а необходимость.

Если показатель GPSI будут совсем скромным (10-20 баллов из 100), то можно получить уведомление, где даже Яндекс.Вебмастер (неожиданно) сообщит, что медленный сайт - это нехорошо. Иногда за этим может последовать проседание позиций. Скорее всего Яндекс измеряет TTFB (время ответа сервера) и хорошо бы, чтобы он был в рамках 200-400 мс. При выходе за эти рамки – можно получить уведомление и в GPSI о долгом TTFB.

Таким образом, быстрый сайт → это лучшее поведение пользователей → положительное влияние на SEO (хоть и косвенное) → бонусом рост конверсии от быстрого сайта.

GPSI - отличный инструмент для измерения скорости работы сайта, поэтому идея получить красивые цифры в этой метрике не такая уж и плохая.

Минусы и плюсы использования WebP

Начнем с минусов:

  1. Свободное пространство на хостинге уменьшится. Учтите, что кроме WebP изображений важно хранить и оригинальную картинку (jp(e)g, png, gif – для браузеров, что не поддерживают *.webp). Если папка с изображениями занимала 100 Мб, то с WebP копиями будет где-то 140-170 Мб.
  2. WebP можно просмотреть в любом браузере, но отредактировать в Photoshop или другом популярном редакторе сходу вряд ли получится (нужны специальны плагины).
  3. Качество изображений все-таки чуть-чуть, но снижается (при сжатии с потерями, но с ощутимым уменьшением веса изображения). Часто это разница не заметна, но есть исключения.
  4. Анимация WebP более прожорлива к нагрузке CPU, чем GIF-анимация.
  5. Не поддерживается в Internet Explorer, доля браузера в рунете на момент написания статьи 0,25% по данным radar.yandex.ru.
  6. Поддерживать актуальность WebP изображений на сайте в ручном режиме – та еще задача. Она требует время на сжатие изображений, возможно изменение кода сайта, что значительно усложняет процесс поддержки. Такой способ нам не подходит, поэтому ниже мы рассмотрим способ – «раз настроил и забыл».

Плюсы WebP с использованием нашего метода:

  1. Добровольно-принудительный плюс WebP - это обязательность использования next-gen image formats по мнению Google (помним, что AVIF нам не подходит). Внедрение WebP вместо слабо оптимизированных изображений на сайте способно показать рост GPSI на 20-30 баллов.
  2. Неоспоримый плюс WebP в том, что он действительно делает сайты легче. При обилии использования прозрачных PNG-изображений на сайте мы обычно получаем экономию в 40-50% от общего веса всех изображений.
  3. При нашем методе использования WebP, вам не нужно будет задумываться о предварительном сжатии изображений и их специальной загрузке на сайт. Алгоритм работы с контентом на сайте не изменится. Метод универсален и подходит для всех CMS и framework-ов.

Подключение WebP на сайт.

Начальные данные для работы:

  • рассмотрим вариант подключения WebP на сервере с установленной панелью ISP Manager.
  • в качестве режима работы PHP используется FastCGI (Nginx + PHP-FPM) – это наиболее быстрый режим.

Большинство наших проектов размещено именно на этой технологической cвязке. Если вы используете shared-хостинг или другие панели – напишите нам в tenchat.

Алгоритм использования WebP на сайте следующий:

В шаблоне сайта мы практически никогда не используем изображения в форматах *.jp(e)g и *.png. Всегда переносим их в контентную часть, поэтому подключение скрипта обработки шаблона сайта не делаем - обрабатываем только контентную часть.

Шаг 1. Скачиваем WebP конвертер

Скачиваем скрипт-конвертер на сервер. Исходные файлы берём из текущего пакета.

Выбираем нужную версию, например, у нас: vendor → linux → x64 → качаем файл «cwebp»:

Шаг 2. Заливаем WebP-скрипт на сервер

Скрипт можно залить в любое место и сделать его универсальным для всех пользователей сервера. Например, его можно залить в папку /opt/script_webp/bin.

Шаг 3. Создаём исполняемый скрипт конвертации

Создаём в папке script_webp shell-скрипт (назовём его run.sh) для запуска нашего конвертора. Содержание файла shell-скрипта должно быть таким:

#!/bin/bash
find . -type f \( -iname "*.png" -o -iname '*.jpg' -o -iname '*.jpeg' \) -exec sh -c '[ ! -f "${1}.webp" ] && /opt/script_webp/bin/cwebp -m 6 -mt $1 -o "${1}.webp" || echo "skipped"' _ {} \;

Что делает скрипт:

  • Просматривает директории на наличие файлов в расширениях *.png, *.jpg, *.jpeg.
  • В том числе просматривает вложенные директории.
  • Cкрипт находит изображения, смотрит есть ли подобное изображение в формате webp. Например, нашел изображение image.jpg – смотрит, есть ли image.jpg.webp. Если нет – создаёт его, если есть – пропускает.
  • Цифра 6 внутри скрипта run.sh указывает на степень сжатия (это максимальная степень).
  • Путь /opt/script_webp/bin/cwebp указывает место, где лежит скаченный файл по шагу 2.

Шаг 4. Назначаем права для скриптов

Обязательно установите на файл run.sh и cweb атрибут «executable» (исполняемый). Для этого в консоле переместитесь в папку со скриптом run.sh и введите chmod +x run.sh. Это позволит запускать run.sh как исполняемый скрипт.

Аналогично необходимо сделать исполняемым файл cweb и поставить права на файл 644:

chmod 644 cweb
chmod +x cweb

Шаг 5. Выставляем расписание для конвертации в WebP

Заходим в ISP под пользователем и идём в планировщик задач (CRON). В CRON добавляем следующие параметры:

Что означают внесенные параметры:

  • cd /var/site.ru/img/ && /opt/script_webp/run.sh – в папке img ищем изображения и конвертируем их, если необходимо указать несколько папок например, img и pictures, то наш параметр примет такой вид:
    cd /var/site.ru/img/ && /opt/script_webp/run.sh && cd /var/site.ru/pictures/ && /opt/script_webp/run.sh
  • выполняем ежедневно в 0:00 по понедельникам – это означает, что скрипт будет выполняться раз в неделю по понедельникам.

Мы не будем ждать понедельника и запустим CRON-задачу прямо сейчас, в результате чего все изображения начнут иметь клон в webp - формате.

Важно: скрипт не понимает названия файлов на кириллице, возможно ограничение по времени выполнения скрипта на вашем сервере – учитывайте это.

Шаг 6. Даём понять системе, что используем WebP

Возвращаемся на уровень root-пользователя в панели ISP. Настраиваем общий конфигурационный файл Nginx на работу с расширением *.webp. Для этого идем в папку /etc/nginx/conf.d/ и создаем файл webp.conf следующего содержания:

map $http_accept $webp_extension {
	default "";
	"~*webp" ".webp";
}

Данная конфигурация указывает, что файлы с расширением webp будут использоваться в работе сервера (в настройках конфигурации регулярных выражений), если браузер не поддерживает *.webp – то будет грузиться оригинальное изображение формата *.png, *.jp(e)g.

Шаг 7. Настройка сайта

Идем в конфигурационный файл Nginx для конкретного сайта, в противном случае делаем правки в файле .htaccess (если сервер использует Apache) и вносим корректировки в главную секцию:

location ~* ^(/(img|pictures)/.+)\.(png|jpe?g|JPE?G)$ {
	expires max;
	add_header Vary Accept;
	try_files $uri$webp_extension $uri =404;
}

У вас это может выглядеть так:

Шаг 8. Проверяем работу сайта

Изменения в конфигурационных файлах должны примениться автоматически. Открываем сайт в браузере в режиме инспектирования кода (F12). Видим, что все наши изображения имеют оригинальные расширения: png, jp(e)g, но загружаемый тип (столбец Type) уже показывает webp:

Перед проведением работ по внедрению WebP мы измерили показатели Google PageSpeed Insights – было порядка ~60 баллов:

Видно, что Google сигнализирует нам о неоптимизированных изображениях.

После внедрения WebP – результат примерно ~75 баллов:

Поздравляю! Прирост составил порядка 15 баллов.

Основной плюс данного метода в том, что он универсален. С контентом можно продолжать работать также как работали раньше: грузить png и jpg без каких-либо предварительных обработок. Метод подойдет для любого сайта на любой системе управления.