Фотографии каталога по десять мегабайт: как съёмка обрушила продажи

Компания потратила приличные деньги на профессиональную съёмку каталога. Наняли фотографа, арендовали студию, отсняли четыреста позиций — красиво, с правильным светом, на хорошую камеру. Фотографии залили на сайт как есть, прямо из папки. И после этого продажи через сайт упали почти вдвое. Причину искали три месяца, подозревали всё что угодно, кроме того, что оказалось на самом деле.

Что за компания и что было до

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

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

Именно это и решили исправить. Логика была здравая: свои фотографии выгодно отличают от конкурентов, которые ставят одни и те же картинки от производителя. Решение правильное. Исполнение подвело.

Как обновляли каталог

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

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

Именно это и обмануло всех. Визуально сайт стал выглядеть заметно лучше: аккуратные, чёткие, свои фотографии. Все были довольны.

Работа заняла три недели. Обновили около четырёхсот самых ходовых позиций.

Что стало происходить

Через месяц заметили, что заказов через сайт стало меньше. Сначала списали на сезон. Ещё через месяц стало очевидно, что это не сезон: заявок с сайта было почти вдвое меньше, чем годом раньше в тот же период, при том что звонков осталось примерно столько же.

Начали искать причину.

Подумали на конкурентов. Проверили — ничего особенного не появилось.

Подумали на цены. Сравнили — цены были в рынке.

Подумали, что «просело продвижение». Обратились к подрядчику по рекламе. Тот посмотрел и сказал, что переходов на сайт столько же, сколько было, — упала именно доля тех, кто доходит до заказа.

Подумали на новый дизайн карточки. Ничего не меняли, кроме фотографий.

Три месяца ушло на перебор версий. За это время потеряли, по их прикидкам, около двух с половиной миллионов рублей оборота.

Что оказалось

Разгадка нашлась, когда посмотрели данные Яндекс.Метрики не в целом, а в разрезе устройств и скорости.

Картина была такая:

- Доля посетителей с мобильных устройств — около шестидесяти пяти процентов. Это логично: мастера и снабженцы смотрят каталог с телефона, часто прямо на объекте или в мастерской. - Показатель отказов на страницах товаров вырос с тридцати процентов до семидесяти с лишним — и именно на мобильных. - Среднее время загрузки страницы товара выросло с полутора секунд до двадцати с лишним.

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

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

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

Отдельно пострадали клиенты с ограниченным трафиком: просмотр десяти карточек съедал полгигабайта.

Почему этого никто не заметил

Несколько причин, каждая из которых встречается сплошь и рядом.

Все проверяли с офисного компьютера. В офисе быстрый проводной интернет и большой монитор. Там всё открывалось за секунду-две и выглядело прекрасно.

Кеш браузера. Сотрудники, которые смотрели каталог регулярно, видели уже загруженные ранее изображения. Для них сайт был быстрым.

Система управления приняла файлы. Не было никакого предупреждения вроде «файл слишком большой». Загрузилось — значит, нормально.

Никто не смотрел на скорость. В Яндекс.Метрике есть отчёты по времени загрузки, но их не открывали ни разу.

Отказы росли постепенно. Каталог обновляли три недели, и ухудшение накапливалось плавно.

Подрядчик по рекламе смотрел на переходы, а не на поведение. Переходы были в норме — значит, с его точки зрения, всё хорошо.

Что сделали

Исправление заняло два дня.

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

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

Перевели изображения в современный формат, который даёт меньший вес при том же качестве.

Настроили отложенную загрузку: изображения ниже первого экрана подгружаются по мере прокрутки, а не все сразу.

Включили кеширование на стороне сервера и браузера.

Поставили ограничение в административной части: при попытке загрузить файл больше определённого размера система его сама уменьшает, а не принимает как есть.

Результат

Страница товара стала грузиться за полторы-две секунды на мобильном интернете против двадцати с лишним.

Показатель отказов на карточках вернулся к прежним тридцати процентам в течение двух недель.

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

Нагрузка на хостинг упала настолько, что компания смогла перейти на более дешёвый тариф.

Как это связано с продвижением «3 в 1»

История про вес картинок задевает все три канала обращений, и в каждом по-своему.

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

Яндекс.Справочник. Переходы из карточки в Яндекс Картах на сайт шли — и упирались в ту же неоткрывающуюся страницу. Это самая обидная потеря: человек уже выбрал вас в карточке и нажал на ссылку. Когда разбирались с проблемой, заодно навели порядок и в карточке: залили фотографии товаров (уже в нормальном весе), перечислили группы товаров отдельными позициями, проставили цены. Отдельный номер телефона для карточки показал, что она даёт заметно больше обращений, чем все думали.

2ГИС. Здесь оказалось важнее всего, потому что аудитория 2ГИС у них — это ровно те самые мастера с телефонами в руках. Они ищут «где купить свёрла рядом», открывают карточку, переходят на сайт — и раньше не могли дождаться загрузки. После исправления обращения по этому каналу выросли заметнее всего.

Вывод, который стоит вынести: сколько ни вкладывай в три канала, они все ведут на сайт. Если сайт не открывается на телефоне за пару секунд, вложения в любой из каналов не окупаются. Скорость — это не техническая мелочь, это условие, при котором всё остальное вообще имеет смысл.

Как проверить у себя

Несколько простых проверок, которые можно сделать сегодня.

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

Посмотреть отчёты по скорости в Яндекс.Метрике. Там есть данные по времени загрузки страниц, в том числе в разбивке по устройствам.

Сравнить показатель отказов на компьютерах и на телефонах. Если на мобильных он заметно выше — почти всегда виновата скорость.

Посмотреть вес страницы. В панели разработчика браузера, на вкладке «Сеть», видно суммарный объём загруженного. Для страницы товара разумный ориентир — до полутора-двух мегабайт. Всё, что сильно больше, требует разбора.

Проверить, что система уменьшает изображения при загрузке. Загрузить тестовую крупную фотографию и посмотреть, какого размера файл реально отдаётся на странице.

Спросить клиентов. Простой вопрос менеджеров: «Вам удобно смотреть наш каталог с телефона?» — иногда даёт больше, чем любая аналитика.

Что стоит сделать в принципе

Автоматическое уменьшение при загрузке. Самое главное. Сотрудник не должен думать о размерах — система должна делать это сама. На ХостСМС это штатная возможность: для каждого типа материала задаются размеры маленькой и большой копии, и они создаются автоматически при загрузке любого файла. Исходник при этом можно сохранять отдельно. Из распространённых альтернатив 1С-Битрикс тоже умеет это из коробки; на ВордПрессе это обычно решается плагинами, и качество результата сильно зависит от выбранного.

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

Современные форматы изображений. Дают заметно меньший вес при том же виде.

Отложенная загрузка всего, что ниже первого экрана.

Кеширование на сервере и в браузере.

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

Регулярная проверка скорости. Раз в месяц открыть сайт с телефона на мобильном интернете и посмотреть отчёты в Метрике.

Выводы

Хорошие фотографии — правильное решение. Загрузка их без обработки — нет. Одно не отменяет другого: снимать надо, а вот класть на сайт исходники нельзя.

Проверяйте сайт так, как его смотрят клиенты. С телефона, на мобильном интернете, не из офиса.

Медленный сайт не выглядит сломанным. Он выглядит нормально — просто люди до него не доходят. Это самая незаметная форма потери обращений.

Смотрите на поведение, а не только на переходы. Если посетителей столько же, а заявок меньше, дело почти всегда внутри сайта.

Настраивайте так, чтобы ошибку нельзя было совершить. Инструкция для сотрудника — хорошо, автоматическое уменьшение — надёжнее.

Проверяйте после любых массовых изменений. Обновили каталог, залили новые фотографии, поменяли шаблон — пройдите по сайту с телефона.

Коротко о главном

Профессиональные фотографии, залитые на сайт без обработки, способны обрушить продажи сильнее, чем любые действия конкурентов. Тяжёлые изображения не вызывают ошибок и не ломают сайт — они просто делают его недоступным для той части клиентов, которая смотрит с телефона на небыстром интернете, а это чаще всего большинство. Лечится это автоматическим уменьшением изображений при загрузке, современными форматами, отложенной загрузкой и кешированием. Проверяется — открытием сайта с телефона вне офиса и отчётами по скорости в Яндекс.Метрике.

Если вы подозреваете, что ваш сайт медленно открывается у клиентов, — специалисты компании «Сайты Профессионально» проведут бесплатную диагностику скорости. Измерим время загрузки ключевых страниц на разных устройствах, посмотрим вес изображений и данные Яндекс.Метрики по отказам, проверим, как работает переход из карточек Яндекс Карт и 2ГИС, и дадим конкретный список того, что нужно исправить. Диагностика ни к чему не обязывает, а результат обычно заметен в первую же неделю после правок.