• »
  • »

Ускорили интернет-магазин шаров и улучшили дизайн для пользователя

Айрат Рахимзянов    |    21 ноября 2024
Время чтения 11 минут
Выкладываю кейс от нашего тех. отдела о проведенных работах и достигнутых результатах. Каждое изменение было нацелено на комплексное улучшение ресурса: увеличение скорости работы, повышение удобства для пользователей и улучшение показателей SEO. В результате интернет-магазин стал не только технологически совершенен, но и адаптирован к потребностям целевой аудитории.

О проекте

Интернет-магазин воздушных шаров разных цветов, форм и тематик. А также оформление мероприятий.

Сайт: sharhouse.ru
Регион: Россия, Москва
Период работы: с января 2024 г.

Переезд на более производительный хостинг

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

Ранее был результат замера производительности встроенными инструментами Битрикс:
После переезда результаты следующие:

SEO-текст под пейджинатором

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

Оптимизация заголовков <h2> и <h3>

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

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

Переработка шаблона хлебных крошек

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

Дизайн и обновление страниц

1. Новая страница "Вопрос-ответ"
Добавлена страница для часто задаваемых вопросов, что позволяет пользователям быстро находить ответы и снижает нагрузку на службу поддержки.
2. Новая страница "Сертификаты"
Создана отдельная страница для размещения сертификатов, что добавляет доверие пользователей к сайту и подтверждает подлинность предоставляемых товаров или услуг.
3. Редизайн страницы "Гарантия и возврат"
Создана отдельная страница для размещения сертификатов, что добавляет доверие пользователей к сайту и подтверждает подлинность предоставляемых товаров или услуг.
(опечатку в слове “Гарантия” позже исправят).
4. Редизайн страницы "О нас"
Обновленный дизайн страницы помог лучше рассказать о компании, подчеркнув её уникальные особенности и достижения, что усиливает доверие пользователей.
5. Новая страница "Избранное"
Добавлена возможность сохранять избранные товары для авторизованных пользователей в базе данных и для неавторизованных в cookies, что упрощает использование функционала "Избранное".
6. Редизайн карточки товара
Карточка товара была обновлена, чтобы предоставить более понятное представление о товаре и улучшить пользовательский опыт, повысив конверсию.
До:
После:
Было реализовано следующее:
  • Вывели артикул.
  • Добавили рейтинг к отзывам.
  • Сделали возможность поделиться товаром в соцсетях.
  • Реализовали кнопку “Купить в 1 клик”.
В описании блок преимуществ ранее был в виде картинки, обновили его и сделали в верстке.
7. Редизайн меню каталога
Обновили меню каталога на десктопе.
До:
После:
8. Редизайн футера
Футер был переработан, чтобы сделать его более информативным и визуально приятным, с акцентом на контактные данные и ссылки на важные страницы.
До:
После:
9. Редизайн страницы оформления заказа
Полностью обновлен дизайн и функционал страницы оформления заказа.

До проведения работ страница оформления была максимально простой, не имеющая автоматических расчетов доставки:
Сейчас полностью обновили интерфейс:
  • Полноценное управление товарами в корзине.
  • Блок с итоговой суммой вынесен справа и всегда на виду.
  • Разработана логика расчета доставки. Используя API яндекса, рассчитываем расстояние до покупателя и даем максимально верную стоимость доставки.
  • Улицы подгружаются из базы DaData, есть возможность исправлять опечатки, количество улиц в базе максимально полное.
  • Разработан модуль с выбором даты и времени доставки. Осуществить доставку ранее двух часов после оформления заказа нельзя. Также автоматически устанавливается дата оформления заказа +2ч по умолчанию.
10. Редизайн шапки сайта
Шапка сайта была обновлена, чтобы сделать её более компактной и удобной, улучшив доступ к важной информации и элементам навигации.
До:
После:
11. Поиск по сайту
Полностью переработали систему поиска. В результатах вывели изображения на товары, их стоимость. Реализовали возможность поиска по разделам, подключили поисковой движок Sphinx.
До:
После:
12. Модальные окна
В соответствии с дизайном обновлено модальное окно покупки товара:

Итог

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

В результате проведенных редизайнов страницы стали более удобными и визуально привлекательными, а добавление новых страниц и функций, таких как «Вопрос-ответ» и «Избранное», повысило уровень доверия и взаимодействия. Полное обновление карточек товаров и системы оформления заказов позволило пользователям более интуитивно и удобно совершать покупки, увеличив вероятность конверсии.