Клиент и задачи
К нам обратился маркетолог компании «Энерджи Консалтинг». Их текущий ресурс давно не обновлялся, и не отвечал современным требованиям поисковых систем.
Клиент пришел к нам с конкретной целью — превратить сайт в эффективный инструмент для генерации лидов.
Для достижения этой цели перед нами стояли следующие задачи:
- Разработать сайт на Next.js;
- Провести внутреннюю SEO-оптимизацию, чтобы ресурс вышел в ТОП-выдачу поисковиков и начал привлекать потенциальных клиентов.
Этапы работы над сайтом
1. Сбор семантического ядра
Перед проектированием структуры страниц категорий и услуг мы собрали обширное семантическое ядро для каждой страницы. При формировании ядра разделили все ключевые запросы на три категории:
- Основной костяк ключевых слов
- Дополнительные слова
- Не подходит
Эти данные легли в основу структуры сайта: мы определили навигацию, архитектуру страниц и функциональные блоки.
2. Разработка прототипов
Разработанную структуру на основе семантики мы описали в техническом задании и согласовали структуру будущего ресурса с клиентом. Следующий этап — это прототипы.
Текстовое наполнение для сайта предоставил клиент. Мы же сосредоточились на том, чтобы подать этот контент максимально эффективно: структурировали информацию, выделили ключевые преимущества и расставили акценты, направляющие пользователей к совершению целевых действий: запрос консультации или звонка, регистрация на мероприятие, запрос коммерческого предложения.
3. Разработка дизайн-макетов
На основе утвержденных прототипов мы перешли к созданию дизайна. Особое внимание уделили анимациям — они легкие, ненавязчивые, не мешают восприятию контента, и делают взаимодействие пользователей с сайтом приятнее.
Отказались от излишней декоративности в пользу:
- Четкой типографической иерархии. Настроили размеры и насыщенность шрифтов так, чтобы заголовки, подзаголовки и основной текст четко отличались друг от друга, и пользователи легче ориентировались в информации;
- Продуманной композиции. Мы грамотно расположили все элементы, оставив между ними достаточно места. Страницы выглядят аккуратно и информация легко считывается;
- Важных акцентов. Кнопки с целевыми действиями привлекают внимание с первого взгляда, а ключевые разделы выделяются за счет размера и расположения.
4. Верстка и программинг
Мы выбрали современную архитектуру, которая объединяет лучшие практики разработки для создания надежной и производительной платформы.
Технологический стек:
Next.js | WordPress | GraphQL
Такой подход открывает следующие преимущества для бизнеса:
- Мгновенная загрузка всех страниц. Сайт выдерживает высокие нагрузки: одновременно 60 пользователей могут выполнять до 6 000 запросов в секунду. Каждый запрос обрабатывается всего за 0,5 секунды даже при пиковой посещаемости;
- Удобство обновлений. Контент-менеджеры могут работать в привычном интерфейсе WordPress: легко обновлять тексты, добавлять новости и редактировать услуги;
- Масштабируемость. Модульная архитектура на Next.js позволяет быстро добавлять новые разделы и функции без риска нарушить работу текущего функционала.
Результаты
Сайт стабильно работает даже при высоких нагрузках. Мы провели тесты и убедились, что система:
- Выдерживает до 100 одновременных пользователей и обрабатывает до 100 запросов в секунду, что эквивалентно ~8.6 миллионам запросов в сутки;
- Высокую скорость загрузки. Время ответа сервера составляет от 60.5 до 536.3 мс при 50 активных пользователях;
- Гарантирует надежную защиту — многоуровневое кэширование и защита от DDoS обеспечивают бесперебойную работу.
Для компании это означает:
- Технологическое преимущество на рынке — за счет архитектуры на Next.js высокая скорость загрузки сайта даже в пиковых нагрузках повышает доверие пользователей и поисковых систем;
- Масштабируемую платформу — модульная архитектура позволяет легко добавлять на сайт новые разделы, услуги или функции по мере развития компании, при этом риск нарушить текущую структуру сайта минимален;
- Увеличение конверсии — удобная навигация и правильная структура подачи информации положительно влияют на поведенческие факторы, а это, в свою очередь, повышает вероятность совершения целевых действий на сайте.