Сохраняя трафик. Редизайн интернет-магазина на 40 000 товаров

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

Главная страница сайта после редизайна
Главная страница сайта после редизайна

Немного истории

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

«Строймашсервис» предлагает полный цикл услуг — от производства оборудования до продажи и обслуживания гидроцилиндров. Это заставило нас задуматься: что мы можем сделать, чтобы выделиться? Так родился проект «Намедни» — где знаменательные события из истории компании переплетаются с актуальными событиями в стране. Таким образом, мы оформили страницу «История компании». Наше сотрудничество длится уже два с половиной года года, и за это время мы разработали три сайта для заказчика — Hydrocylinders. ru, SMS7.ru и ZAO-SMS. ru.

  • Hydrocylinders. ru — это интернет-магазин, где можно приобрести гидроцилиндры и гидравлическое оборудование.
  • SMS7.ru — это площадка, которую мы создали специально для выставки. Здесь рассказывается о компании, ее истории, структуре и многом другом. Этот сайт не предназначен для продажи, но выполняет важную функцию — привлекает внимание к «Строймашсервису» и укрепляет его имидж.
  • ZAO-SMS. ru — главный сайт компании. Это интернет-магазин, где собраны все товары и услуги.
Проект «Намедни» — наша идея и реализация
Проект «Намедни» — наша идея и реализация

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

Богдан Квитка, основатель агентства GoodFellazz

«Боль» клиента

Предыдущий сайт был далек от совершенства. Его главной проблемой была хаотичная система каталогов. У них были родительские категории, затем подкатегории и так далее, до семи уровней. Часто пользователи терялись в этом лабиринте, и даже сама компания забыла о некоторых позициях, зарытых глубоко внизу каталога. Для SEO это сказывалось не лучшим образом. Требовались изменения, но у заказчика были опасения, что редизайн сайта сильно снизит трафик и негативно скажется на продвижении.

Так выглядит новый каталог — основное меню вынесли в левую панель и сделали простую навигацию

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

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

Мы тоже немного погрустили

Сайт использовал PHP 5.4 и MySQL, при этом в каждом классе отсутствовала UML-система подключения к базе данных. Некоторые страницы содержали более 1000 товаров, но не имели пагинации, что приводило к медленной 20-секундной загрузке.

Хостинг и доменные имена были разбросаны по разным сервисам, что делало проблематичным объединение всего на одной платформе. Перенос устаревшего сайта в одиночку оказался сложной задачей, поскольку используемые языки уже не поддерживались современными хостинговыми средами. А создание сервера, способного работать с этими старыми языками, было проблематичным и трудоемким. Сервер не справлялся с нагрузкой из-за устаревших технологий, что приводило к блокировке сайта даже при незначительном увеличении посещаемости.

При обсуждении этой статьи, наш технический директор глубоко вздыхал, вспоминая, как тратил по 10 часов на внесение любых изменений на сайте.

Перенести контент и ничего не потерять

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

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

Сохраняя трафик. Редизайн интернет-магазина на 40 000 товаров

В итоге мы создали специальную страницу с различными категориями, направляя пользователей к основному каталогу. Также поработали над дизайном — он стал удобным для пользователя, а навигация по нему не составляет труда. Теперь найти категорию стало очень просто с удобной панелью навигации слева. Учитывая внушительный каталог, мы также поработали над тем, чтобы пользователи могли экспортировать категории в Excel. Эта возможность была и ранее, но работала достаточно криво. Новый сайт был запущен недавно, но уже получил положительные отзывы от пользователей, которые отметили его удобство в использовании. Это подтверждают наши наблюдения в вебвизоре и тепловой карте.

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

Админка

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

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

Немного про технические моменты

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

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


Однако на этом миграционный путь не закончился. При синхронизации с 1С мы столкнулись с тем, что система не соответствовала стандартным протоколам и технологиям. Данные клиента поступали в формате, не подходящими требованиям 1С. Нам нужны были дополнительные решения для правильной идентификации продуктов и извлечения важной информации из системы клиента. Благодаря мощному сочетанию Laravel и Vue JS, мы смогли разработать индивидуальные решения, отвечающие всем требованиям клиентов. Эти фреймворки обеспечивают гибкость и реализацию нестандартных функций, не полагаясь на дополнительные плагины или предварительно упакованные решения.

Также реализовали новую модульную сетку, потому что старая была мелкой и устаревшей. Это привело к увеличению размера сайта, что позволило эффективнее обслуживать целевую аудиторию. Сейчас сайт использует PHP 8.1.

Простой в использовании интерфейс корзины увеличил ее популярность на сайте
Простой в использовании интерфейс корзины увеличил ее популярность на сайте

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

Клиент на «всю жизнь»

Да, звучит громко, но мы сейчас расскажем, почему «Строймашсервис» работает с нами уже два с половиной года. И почему это партнерство продолжается.

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

Наша команда состоит технических специалистов и экспертов по продвижению. У клиентов есть возможность обратиться к нам за комплексным решением, охватывающим все аспекты от разработки сайта до продвижения. Например, когда руководство «Строймашсервиса» сталкивается со сложностями, они просто пишут нашему менеджеру. Мы сами распределяем запросы по ответственным сотрудникам. И им не приходится тратить время на обдумывание, кто отвечает за вопрос и как связаться с нужными людьми. Такой подход помогает нашим клиентам сосредоточиться на своем бизнесе без лишних хлопот.

Какие изменения в дизайне сайта, описанные в статье, вы считаете наиболее эффективными? Поделитесь своим мнением.

44
2 комментария

Очень крутой кейс! Молодцы!

1
Ответить

Спасибо!)

Ответить