Сапожники с сапогами: улучшаем сайт Rocket Business

О клиенте

Хочешь сделать хорошо, сделай это сам. Именно так подумала команда Rocket Business и разработала новый красивый сайт.

Задачи по техподдержке передали команде RocketDev.

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

О части таких работ мы и расскажем.

О проекте

Сайт собран на фреймворках Next.js 14 App Router + React и работает как реактивное приложение.

На сайте использовали:

• Формат обмена данными — JSON
• Библиотеку для создания анимаций — Framer Motion
• Библиотеку для работы с React — Redux Toolkit
• CSS Modules

Добавили титульную заставку

При первом визите на сайт мы показывали пользователю сложную анимацию, реализованную с использованием JavaScript и SVG.

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

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

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

Так мы снизили вес информации в 10 раз — до 15 кБ.

Заставка не замедляет загрузку сайта и не влияет на показатели по Pagespeed.

Настроили управление командой

Все данные о сотрудниках собраны в одном массиве: имена, фото, описания, профессиональный опыт. Данные выводятся там, где это нужно — например, в кейсах. Авторы цитат всегда отображаются с корректной должностью и фотографией.

Оптимизировали раздел «Кейсы»

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

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

Еще одна фича — функционал «До/После» в кейсах. Картинка меняется по движению мышки: не нужно нажимать на кнопку или тянуть границу между двумя изображениями.

Проработали анимацию блока «Премии и рейтинги»

Здесь — о нескольких эффектных мелочах.

Блок «Премии и рейтинги» на главной. Здесь выстроена сложная анимация погружения, которая зависит от силы скролла.

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

Бургер в шапке сайта. Он меняет цвет в зависимости от фона, а еще появляется, если пользователь делает скролл вверх в середине или конце страницы. Такое решение добавили вместо ScrollUP кнопки.

Нет предела совершенству

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

О результатах

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

После доработки сайта мы зафиксировали рост показателей, важных для любого бизнеса:

• Конверсия выросла на 7%
• Среднее время на сайте увеличилось в 1,5 раза
• Отказы снизились на 11%