Я отлаживал интернет-магазин в прошлом месяце, когда меня осенило. Владелец потратил недели на оптимизацию кода темы, удаление неиспользуемых приложений и минификацию CSS — все стандартные советы по производительности. Но их оценка Lighthouse всё ещё была в районе 40. Виновник? Страница каталога, загружающая 24 изображения товаров, каждое свыше 800 КБ, прямо с камеры.
Вот неудобная правда о производительности интернет-магазинов: у вас может быть самый чистый код темы в мире, но если ваши изображения товаров раздуты, ваши оценки Core Web Vitals никуда не денутся. А с акцентом Google в 2026 году на INP (Interaction to Next Paint), который теперь является жёстким фактором ранжирования, медленные страницы товаров напрямую стоят вам органического трафика и конверсий.
Почему интернет-магазины уникально насыщены изображениями
Большинство контентных сайтов имеют 5–15 изображений на странице. Типичная страница каталога маркетплейса (Wildberries, Ozon, Яндекс.Маркет)? 20–50 миниатюр товаров. Страница карточки товара? Обычно 5–8 изображений вариантов в высоком разрешении, плюс виды с увеличением. Добавьте слайдер на главной, рекламные баннеры и лайфстайл-фото, и вы получаете 60+ изображений за одну сессию.
CDN изображений доставляет их эффективно, но CDN не делает магическим образом файлы размером 2 МБ маленькими. Он просто доставляет их быстро. Браузер всё равно должен скачать, декодировать и отрисовать каждый байт — и на странице каталога это происходит 30 раз подряд.
Математика безжалостна. Если ваше среднее изображение товара весит 1,5 МБ и вы загружаете 30 на странице каталога, это 45 МБ изображений. Даже на быстром соединении (50 Мбит/с) это более 7 секунд чистой загрузки изображений — до того, как начнётся какая-либо отрисовка. На мобильном? Забудьте.
Что на самом деле измеряют Core Web Vitals (и почему изображения их разрушают)
Три метрики Core Web Vitals Google по-разному проявляют себя, когда узким местом являются изображения:
- LCP (Largest Contentful Paint): Обычно это главное изображение или первое фото товара. Если оно весит 1 МБ+, ваш LCP обречён. Google хочет LCP менее 2,5 секунд. Одно неоптимизированное главное изображение может само по себе превысить 5 секунд.
- CLS (Cumulative Layout Shift): Изображения без явных атрибутов ширины/высоты вызывают прыжки контента при загрузке. Темы для маркетплейсов стали лучше с этим справляться, но сетки товаров с ленивой загрузкой всё ещё могут смещаться, если размеры не заданы.
- INP (Interaction to Next Paint): Это новый показатель на 2026 год. Когда пользователь нажимает фильтр каталога или пролистывает варианты изображений, сколько времени проходит до ответа страницы? Большие изображения в памяти замедляют каждое взаимодействие, потому что браузер занят декодированием и композитингом.
Магазин, который я аудировал, имел LCP 6,8 секунд. После сжатия изображений товаров (те же размеры, просто правильно оптимизированные) LCP снизился до 1,9 секунд. Та же тема. Тот же код. Просто меньшие изображения.
Рабочий процесс сжатия изображений для маркетплейсов, который работает
Маркетплейсы автоматически создают версии загруженных изображений с изменённым размером для разных контекстов (миниатюры, сетки каталога, виды с увеличением). Но вот что упускает большинство владельцев магазинов: платформа не сжимает исходное изображение, которое вы загружаете. Она отдаёт именно тот файл, который вы дали, только с изменённым размером. Если вы загрузили неоптимизированный JPEG на 3 МБ, каждый вариант, создаваемый платформой, наследует эту раздутость.
Так что исправление происходит до загрузки. Вот рабочий процесс:
1. Сначала сожмите исходные изображения
Прежде чем что-либо попадёт на серверы маркетплейса, пропустите ваши фото товаров через сжатие. Я использую двухпроходный подход:
- Проход 1: Сжать с качеством 75–80. Для большинства фото товаров это даёт снижение размера файла на 60–70% без видимой потери качества. Фото товара на 3,2 МБ становится примерно 900 КБ.
- Проход 2: Проверьте сжатый результат при фактическом размере отображения (обычно 600–800 пикселей в ширину). Если всё ещё выглядит резким — загружайте. Если есть видимые артефакты, увеличьте качество до 85 и пересожмите.
2. Используйте правильный формат
Маркетплейсы обычно поддерживают JPEG, PNG и WebP. Для фото товаров:
- JPEG качество 75–80: Лучший для большинства снимков товаров. Хорошее сжатие, универсальная поддержка.
- WebP: Примерно на 25% меньше JPEG при том же качестве. Если платформа автоматически конвертирует в WebP для пользователей Chrome/Firefox, загрузка исходников в WebP экономит накладные расходы на серверную конвертацию.
- PNG: Только для изображений товаров, которым нужна прозрачность. Для обычных фотографий JPEG будет в 5–10 раз меньше.
3. Пакетная обработка каталога
Ни у кого нет времени сжимать 200 изображений товаров по одному. CompactJPG обрабатывает пакетное сжатие — перетащите всю папку с фото товаров, установите качество 75 и сожмите всё сразу. Скачайте ZIP и готово.
Реальные метрики после оптимизации магазина
Вот что реально произошло, когда я помог магазину оптимизировать изображения:
| Метрика | До | После |
|---|---|---|
| LCP (страница каталога) | 6,8 с | 1,9 с |
| Общий вес страницы | 28,4 МБ | 6,2 МБ |
| Средний размер фото товара | 1,42 МБ | 310 КБ |
| INP (взаимодействие с фильтром категорий) | 380 мс | 95 мс |
| Органический трафик (через 30 дней) | Базовый | +18% |
Рост трафика не был магией — лучшие оценки CWV улучшили их позиции по существующим ключевым словам. Тот же контент, те же товары, более быстрые страницы.
Распространённые ошибки с изображениями в интернет-магазинах
- Загрузка прямо с зеркальной камеры: Камеры выдают массивные файлы, предназначенные для печати, а не для веба. Всегда сжимайте перед загрузкой.
- Использование PNG для фотографий: Я вижу это постоянно. Фото товара в PNG на 4 МБ, которое могло бы быть JPEG на 300 КБ. Прозрачность не стоит штрафа к скорости страницы, если она вам действительно не нужна.
- Изображения двойного разрешения «retina»: Изображения шириной 2000 пикселей на карточке товара шириной 400 пикселей. Да, они выглядят резко на retina-экранах. Нет, большинство пользователей не видят разницы между плотностью 2x и 1,5x. Рассмотрите 1,5x, где позволяет качество.
- Игнорирование мобильных устройств: Ваша аналитика, вероятно, показывает 60%+ мобильного трафика. Те изображения для десктопа шириной 800 пикселей подаются на экраны телефонов шириной 375 пикселей. Используйте адаптивные теги изображений и отдавайте варианты подходящего размера.
Итог
Маркетплейсы предоставляют вам отличную платформу. Но они не могут исправить то, что вы в них загружаете. Если вы загружаете неоптимизированные изображения, ваш магазин будет медленным — точка. Хорошая новость в том, что сжатие изображений — это самый лёгкий выигрыш в производительности, который вы можете получить. Никакого кодинга. Никакого редактирования темы. Просто пропустите ваши фото товаров через хороший компрессор перед загрузкой и наблюдайте, как растут ваши оценки Core Web Vitals.
Ваши покупатели не заметят сжатия. Они просто заметят, что ваш магазин загрузился до того, как они потеряли терпение и ушли.