Изображения составляют огромную долю интернет-трафика. Если три года назад средний вес страницы был 3 МБ, то сейчас аналитика говорит, что он увеличился до 4 мегабайт.
Экспериментально доказано, что добавление изображений на страницу приводит к увеличению процента конверсий, процесса, когда обычный посетитель становится вашим клиентом. Поэтому мы все понимаем, что картинки с сайтов не уйдут, надо просто найти эффективную стратегию по их сжатию. Полная версия публикации в блоге.
В рамках технической оптимизации на сайте обязательно нужно проводить и оптимизацию изображений. От этого напрямую зависит скорость загрузки страницы, а значит и оценка поисковиков при ранжировании в поисковой выдаче.
В 2021 году алгоритмы будут учитывать такие метрики: Largest Contentful Paint, First Input Delay, Cumulative Layout Shift.Рассмотрим подробнее.
Largest Contentful Paint- метрика анализирует скорость отрисовке на первом экране. Скорость зависит от размера изображений. Хорошими показателями считается загрузка до 2,5 секунд, больше 4 секунд- плохой.
На любом сайте есть изображения и если они не оптимизированы, то результат Largest Contentful Paint будет высоким.
Этапы оптимизации изображений на сайте:
• Ленивая загрузка – прогрессивный метод, включается через атрибут loading=lazy и не оказывает влияния на оценку изображений.
• Выбор размера картинки под размер экрана.
• Сжатие графики.
Мало кто знает , что в арсенале Google есть сервис Google Squoosh для оптимизации изображений без потери качества. Кроме сжатия изображений инструмент позволяет пользоваться расширенными настройками компрессоров изображений. Сервис призван решить вопрос долгой загрузки сайта из-за отсутствия оптимизации опубликованных картинок. Сервис работает во всех браузерах и на мобильном телефоне.
Простой интерфейс облегчает работу пользователя:
1. Входите в Squoosh, загружаете картинку
2. Инструмент преобразовывает файл автоматически. Исходник отображается в левой части экрана, а сжатое изображение в правой. То есть вы всегда можете оценить разницу, перетаскивая ползунок.
3. Сохраняете файл.
Как видно из значений в правом углу, изображение сжато на 91%
Демонстрационное видео работы инструмента
При всей сложности создания такого сервиса инструмент предоставляется совершенно бесплатно. И это еще один довод в пользу того, чтобы его опробовать.
Специалисты рекомендуют использовать на сайте прогрессивные форматы: AVIF или WebP, который требует также внедрения тега picture.
Неделю назад сервис был обновлен до версии Squoosh v2, что внесло в него много хороших изменений:
• Теперь сервис поддерживает новые кодеки – OxiPNG, WebP, AVIF
• Появилась возможность сжатия сразу большого количества изображений
Используя автоматические настройки по умолчанию, вы максимально возможно сожмете изображение, при незначительной потере качества.
Выводы
Оптимизация графики напрямую влияет на ранжирование страниц в поисковой выдаче, а значит правильно сжатые изображения понравятся Google. Практика показывает, что это значительно ускоряет рост позиций сайта. В определенных темах можно получить дополнительный трафик от поиска по картинкам в Yandex и Google.
Удобный инструмент теперь позволяет сжимать даже большое количество изображений без потери качества прямо в браузере с использованием различных кодеков.
Ползунок предварительного просмотра позволяет все время контролировать качество получаемой картинки.
Когда вы размещаете на сайте больше изображений, увеличивается и значение конверсии, но и размер самих страниц параллельно. Инструмент призван решить эту проблему, ведь 74% пользователей просто закрывают сайт, если он грузится дольше 5 секунд.
Работа по оптимизации изображений включена в большую внутреннюю оптимизацию сайта.
Оптимизация сайта это первое, что мы предлагаем клиентам, у которых проблемы с поисковой выдачей или тем, что сайт совсем не приводит клиентов. Очень трудно поменять ситуацию, если ресурс плохо оптимизирован или ему несколько лет никто не занимался. Если не можете позволить себе масштабные вложения, но хотите вернуть эффективность ресурсу, выполняйте продвижение этапами, но начните именно с внутренней оптимизации.
Перечень работ по внутренней оптимизации:
Оптимизация страницы
Оптимизация изображений
Внутренняя перелинковка
Техническая оптимизация