12 советов по оптимизации изображений для ускорения вашей электронной коммерции (SEO + производительность)

Хотите знать, почему и как оптимизировать изображения для вашего сайта электронной коммерции? Конечной целью оптимизации изображения является создание файла наименьшего размера без ущерба для качества изображения. Вы хотите показывать высококачественные изображения, не влияя на производительность вашего сайта.

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

Изображения необходимы для интернет-магазина; большая часть ваших продаж зависит от изображений продукта. Клиенты всегда хотят проверить детали продуктов (например, цвета или материал) перед совершением каких-либо покупок.

Вы знали? По данным Salsify, 73% покупателей должны увидеть как минимум три изображения, чтобы принять решение о покупке.

Теперь, если вы посмотрите на наш пример ниже, какой продукт вы бы купили для своей следующей летней вечеринки? Ответ А, верно?

Изображения необходимы для увеличения конверсии, но неоптимизированные изображения замедляют работу вашего сайта электронной коммерции (отталкивая потенциальных клиентов от вашего магазина). Чтобы избежать этих проблем с производительностью, мы делимся нашими лучшими советами по оптимизации изображений, увеличению скорости вашего интернет-магазина и улучшению вашего рейтинга в Google.

12 советов по SEO и производительности для оптимизации изображений электронной коммерции

Вот 12 советов по SEO и производительности, которые вы можете применить для оптимизации изображений электронной коммерции, ускорения вашего магазина электронной коммерции и повышения рейтинга в Google:

1. Правильно масштабируйте изображения
2. Сжать изображения
3. Выберите правильный формат файла
4. Использовать кеширование браузера
5. Предварительно загрузите изображения для их более быстрого отображения и повышения эффективности LCP
6. Используйте атрибут Fetchpriority
7. Включите атрибуты размера ширины и высоты, чтобы избежать внезапных перемещений макета (CLS)
8. Используйте CDN изображений
9. Включить ленивую загрузку
10. Используйте адаптивные изображения
11. Оптимизируйте имена файлов изображений и включите SEO-дружественный альтернативный текст
12. Создайте карту сайта для изображений

Давайте углубимся в каждый из методов оптимизации изображений, которые повысят SEO и производительность вашего сайта электронной коммерции.

1. Правильно масштабируйте изображения

Наилучший размер изображений для электронной коммерции — попытаться сохранить размер файла изображения ниже 70-80 КБ. Фактическое измерение зависит от того, какую CMS или интернет-магазин вы используете.

• Изображения WooCommerce: 600 x 600 (минимум)

• Изображения Amazon: 1000 x 1000 пикселей (минимум)
• Shopify изображения: 800 x 800 пикселей (минимум, чтобы получить функцию масштабирования)

2. Сжимайте изображения

Сжатие изображений означает уменьшение размера изображения без потери качества. Существует два типа сжатия: с потерями и без потерь.

• Без потерь — небольшое уменьшение размера файла без изменения качества.
• Lossy — более значительное уменьшение размера файла, но может повлиять на качество. В сжатии с потерями есть несколько уровней: некоторые даже не видны человеческому глазу, а некоторые более агрессивны и влияют на качество.

3. Выберите правильный формат файла

Google PageSpeed ​​Insights рекомендует использовать формат следующего поколения, такой как WebP, для оптимизации ваших изображений. Размещая изображения в WebP на своем сайте электронной коммерции, вы сэкономите на размере файла изображения, как показано на рисунке ниже:

4. Используйте кеширование браузера

Одним из наиболее эффективных методов оптимизации является кэширование изображений. С плагином WordPress, таким как WP Rocket, вы можете хранить файлы изображений в кеше браузера пользователя или на прокси-сервере для более быстрого и легкого доступа в будущем.

5. Предварительно загрузите изображения для их более быстрого отображения и повышения эффективности LCP

Предварительная загрузка самого большого изображения в верхней части страницы улучшит самую большую содержательную отрисовку (LCP), ключевую роль в сети. Как? Предварительная загрузка изображения LCP может отобразить главное изображение или баннер веб-сайта намного раньше при загрузке страницы, что положительно скажется на пользовательском опыте.

Как следует из названия, предварительная загрузка позволяет установить приоритет загрузки элемента страницы. Опять же, WP Rocket может помочь вам предварительно загрузить изображения, шрифты и ссылки:

Если вы предпочитаете, вы также можете вручную применить этот тег предварительной загрузки к своим изображениям:

 <link rel="preload" as="image" href="https://mysite.com/images/myimagename.webp" />

6. Используйте атрибут Fetchpriority

Еще один совет по оптимизации изображений и получению лучшего LCP — сообщить браузеру, какое изображение он должен получить первым, используя атрибут fetchpriority .

Ваше изображение LCP должно иметь fetchpriority="high", чтобы установить приоритет загрузки, в то время как изображения нижнего колонтитула должны иметь fetchpriority="low", поскольку они не нужны немедленно. Google исследовал свою собственную поисковую систему по боям и обнаружил, что 99% контента в верхней части страницы отображалось менее чем за 2 секунды благодаря подсказкам о приоритете:

7. Включите атрибуты размера ширины и высоты, чтобы избежать внезапных перемещений макета (CLS)

Если PageSpeed ​​Insights обнаружит, что некоторый контент внезапно перемещается, это повлияет на работу пользователей и общую скорость веб-сайта. Cumulative Layout Shift (CLS) — это еще один Core Web Vitals, который измеряет, происходят ли какие-либо внезапные изменения макета во время загрузки. Если вы зарезервируете место для изображения, добавив к изображениям атрибуты высоты и ширины, Google Page Insights поставит вам хорошую оценку CLS.

Ширина и высота изображения не указаны: внезапный сдвиг макета после загрузки изображения = плохой CLS	Ширина и высота указаны: без смещения макета = хороший CLS

8. Используйте CDN изображений

Image CDN (сети доставки контента) являются одними из лучших доступных на рынке инструментов для оптимизации изображений. По данным web.dev, это может даже привести к экономии 40–80% размера файла изображения. Все изображения, загруженные из CDN, будут обслуживаться по URL-адресу изображения, который указывает не только на то, какое изображение нужно загрузить, но и на такие параметры, как размер, формат и качество. Это удобно для создания вариантов изображения для разных сценариев:

Настройка CDN с нуля может показаться сложной задачей. Если вы предпочитаете автоматическую установку, вы можете попробовать RocketCDN.

9. Включить ленивую загрузку

Ленивая загрузка — еще одна стратегия оптимизации изображений интернет-магазина. Он направлен на идентификацию ресурсов как неблокирующих и загрузку их только при необходимости. Короче говоря, он загружает изображения только тогда, когда ваш посетитель прокручивает этот контент.

Если вам неудобно применять скрипт отложенной загрузки вручную, вы можете использовать плагин, такой как WP Rocket, чтобы помочь вам.

10. Используйте адаптивные изображения

Оптимизация ваших изображений для мобильных устройств — это еще один способ повысить удобство работы пользователей и скорость загрузки вашего магазина. Адаптивные изображения — это набор методов, используемых для загрузки правильного изображения в зависимости от устройства, используемого пользователем: настольного компьютера, планшета или мобильного телефона. Он рассчитывается на основе разрешения устройства, ориентации, размера экрана, макета страницы и сетевого подключения.

Атрибуты srcset и size могут помочь вам сделать ваши изображения отзывчивыми, повысить производительность и улучшить взаимодействие с пользователем. Это работает следующим образом:

• srcset = описывает фактическую ширину исходных файлов
• размеры = сообщает браузеру, насколько широко изображение должно отображаться на экране.

Dev.to написал отличную подробную статью о том, как использовать оба варианта для адаптивных изображений. Мы рекомендуем вам прочитать полное руководство.

11. Оптимизируйте имена файлов изображений и включите SEO-дружественный альтернативный текст

Оптимизация изображения не ограничивается качеством самого файла. Он также расширяется до имени, данного файлу, и альтернативного текста. Всегда выбирайте релевантное и конкретное имя для вашего изображения с четким альтернативным текстом. Это поможет вашим изображениям ранжироваться в Google, описывая, о чем изображение.

12. Создайте карту сайта для изображений

Добавление изображений в карту сайта помогает Google обнаруживать изображения, которые невозможно найти иначе (например, изображения, загруженные с помощью JavaScript). Это дает небольшой SEO-ускоритель для вашего интернет-магазина. Вот необходимые теги карты сайта, необходимые Google для поиска ваших изображений:

Теперь, когда вы знаете наши лучшие советы по оптимизации для ускорения вашего интернет-магазина, есть несколько инструментов, которые помогут вам их реализовать. Например, вы можете использовать плагин Imagify для устранения большинства моментов оптимизации за несколько кликов. Давайте пройдемся по каждому из них.

Оптимизация изображений электронной коммерции с помощью Imagify

Плагин Imagify может помочь вам справиться с большинством советов по оптимизации, которые мы дали в предыдущем разделе, чтобы ускорить ваш интернет-магазин. Установив бесплатный плагин на WordPress, вы разблокируете несколько функций, которые помогут вам ускорить работу вашего сайта и повысить его видимость в Google. Давайте углубимся в лучшие функции Imagify!

Благодаря Imagify вы можете оптимизировать изображения следующими способами:

• Сжимайте и оптимизируйте изображения, используя три уровня сжатия: нормальный, агрессивный и ультра. Качество вашего изображения практически не изменится, но размер вашего файла станет намного меньше.

• Сжимайте и изменяйте размер нескольких изображений одновременно:

• Оптимизация из библиотеки WordPress — вы также можете выполнить оптимизацию выбранных изображений, как в нашем примере ниже. Imagify сохранил 94% размера моего файла!

• Преобразуйте свои изображения в WebP одним щелчком мыши:

• Автоматически изменяйте размер самых больших изображений:

И последнее, но не менее важное: Imagify оптимизирует ваши изображения в соответствии с рекомендациями Google в PageSpeed ​​Insights, такими как «предоставлять изображения в форматах нового поколения» (благодаря функции преобразования WebP), «эффективно кодировать изображения» и «иметь правильный размер изображений».

Проблемы с PSI без Imagify	Пройден аудит с Imagify

Наконец, цена Imagify проста: вы получаете 200 МБ бесплатных данных каждый месяц, а если вам нужны неограниченные ресурсы, то всего 9,99 долларов США!

Подведение итогов

Изображения сильно влияют на восприятие и продажи вашего продукта. Оптимизация их с помощью плагина, такого как Imagify, повысит производительность вашего интернет-магазина и повысит рейтинг поисковой оптимизации (SEO). Результатом является значительная экономия нагрузки, улучшенный пользовательский интерфейс и лучшая позиция в Google. Попробуйте Imagify бесплатно и расскажите нам, как продвигается сжатие изображений в вашем интернет-магазине!