Как мы повысили скорость интернет-магазина воздушных шаров и сделали покупку удобнее: технический кейс
В результате интернет-магазин стал быстрее работать, получил обновленный интерфейс и функциональность, а также стал лучше соответствовать требованиям поисковых систем.
О проекте
Интернет-магазин воздушных шаров различных форм, цветов и тематик, а также услуг по оформлению мероприятий.
Регион: Москва, Россия
Период работ: с января 2024 года
Перенос сайта на более производительный хостинг
Одной из основных технических проблем была недостаточная производительность прежнего хостинга. Из-за этого страницы открывались медленно, а при увеличении нагрузки возрастал риск снижения стабильности работы сайта.
Для решения задачи проект был перенесен на более мощный сервер. Это позволило сократить время отклика, обеспечить устойчивую работу при пиковом трафике и положительно повлияло как на пользовательский опыт, так и на поисковые показатели.
Гугл доверяет тем, кто не заставляет его ждать. Техническая оптимизация — это вежливость вашего сайта к поисковику.
Результаты проверки производительности до переноса:
После смены хостинга показатели значительно улучшились:
SEO-текст под пагинацией
Для категорий был реализован вывод SEO-текста после блока пагинации. Такой подход позволяет разместить описание раздела и ключевые запросы без ущерба для удобства навигации пользователей.
Это решение помогает повысить релевантность страниц для поисковых систем, сохранив привычный сценарий просмотра каталога.
Оптимизация структуры заголовков H2 и H3
На главной странице, в разделах каталога и карточках товаров были устранены лишние заголовки H2 и H3. Это позволило привести структуру страниц в соответствие с рекомендациями поисковых систем, не меняя внешний вид сайта.
Дополнительно был разработан механизм автоматического определения корректных HTML-тегов. Это позволило сохранить привычный процесс работы редакторов в административной панели Битрикс.
Например, ранее в карточках товаров редактор Битрикс автоматически использовал теги заголовков при оформлении описания. Чтобы не изменять процесс наполнения контента и не редактировать вручную большое количество карточек, была реализована автоматическая обработка этих элементов.
Так описание выглядит в административной панели:
Обновление шаблона хлебных крошек
Навигационная цепочка была переработана в соответствии с актуальными требованиями Schema.org. Благодаря этому структура сайта стала более понятной для поисковых роботов, что положительно влияет на качество индексации.
Обновление дизайна и функциональности страниц
1. Страница «Вопрос-ответ»
Появился отдельный раздел с ответами на популярные вопросы пользователей. Это помогает посетителям быстрее находить нужную информацию и снижает количество обращений в службу поддержки.
2. Страница «Сертификаты»
Для сертификатов была создана отдельная страница. Она помогает подтвердить качество товаров и услуг, а также повышает доверие посетителей к компании.
3. Обновление страницы «Гарантия и возврат»
Страница была переработана для более удобного восприятия информации о гарантийных обязательствах и условиях возврата.
(Опечатка в слове «Гарантия» на макете была исправлена позже.)
4. Редизайн страницы «О компании»
Страница получила новое оформление, благодаря которому стало проще рассказать о компании, ее преимуществах и опыте. Это помогает формировать больше доверия со стороны потенциальных покупателей.
5. Страница «Избранное»
Добавлена возможность сохранять понравившиеся товары. Для авторизованных пользователей список хранится в базе данных, а для гостей сайта — в cookies. Благодаря этому пользоваться разделом стало значительно удобнее.
6. Обновленная карточка товара
Основная задача редизайна заключалась в том, чтобы сделать карточку более информативной и упростить принятие решения о покупке.
До:
После:
В карточке были реализованы следующие изменения:
- отображение артикула товара;
- рейтинг рядом с отзывами;
- возможность поделиться товаром в социальных сетях;
- кнопка «Купить в 1 клик»;
- блок преимуществ, который раньше представлял собой изображение, был сверстан как полноценный HTML-элемент.
7. Обновление меню каталога
Для десктопной версии сайта было полностью переработано меню каталога.
До:
После:
8. Новый футер
Нижняя часть сайта стала более информативной и удобной. В обновленном футере сделан акцент на контактной информации и ссылках на наиболее важные разделы.
До:
После:
9. Полный редизайн оформления заказа
Страница оформления заказа была практически полностью переработана как визуально, так и функционально.
До начала работ оформление заказа выглядело максимально просто и не поддерживало автоматический расчет стоимости доставки.
После обновления пользователи получили новый интерфейс:
- полноценное управление товарами в корзине;
- отдельный блок с итоговой стоимостью, который постоянно остается в поле зрения.
Также была реализована система автоматического расчета доставки. С помощью API Яндекса определяется расстояние до адреса покупателя, после чего рассчитывается максимально точная стоимость доставки.
Для ввода адреса используется база DaData. Система предлагает подходящие варианты улиц, помогает исправлять опечатки и работает с максимально полной базой адресов.
Кроме того, разработан модуль выбора даты и времени доставки. Ограничение настроено таким образом, чтобы оформление доставки было возможно не раньше чем через два часа после создания заказа. По умолчанию система автоматически подставляет ближайшее доступное время — дата оформления плюс два часа.
10. Обновление шапки сайта
Шапка сайта стала компактнее и удобнее. Благодаря переработанной структуре пользователям проще получить доступ к навигации и ключевой информации.
До:
После:
11. Новая система поиска
Поиск по сайту был полностью переработан.
Теперь в результатах отображаются изображения товаров и их стоимость, появился поиск по разделам каталога, а в качестве поискового движка подключен Sphinx.
До:
После:
12. Обновление модальных окон
В соответствии с новым дизайном было переработано модальное окно оформления покупки товара.
Итоги проекта
Комплекс выполненных работ позволил существенно улучшить техническое состояние интернет-магазина и сделать его удобнее для покупателей.
Переезд на более производительный сервер обеспечил стабильную работу сайта даже в периоды высокой нагрузки. Одновременно была проведена техническая оптимизация структуры страниц и контента, благодаря чему ресурс стал лучше соответствовать требованиям современных поисковых алгоритмов.
Значительная часть работ была посвящена пользовательскому интерфейсу. Обновленные страницы, переработанные карточки товаров, новая система поиска, улучшенный процесс оформления заказа и дополнительные разделы, такие как «Вопрос-ответ» и «Избранное», сделали взаимодействие с сайтом более простым и понятным. В результате интернет-магазин стал удобнее для пользователей, а процесс выбора и покупки товаров — быстрее и комфортнее, что создает предпосылки для роста конверсии.