Ускорение фронтенда сайта CULT

CULT - бренд дизайнерской одежды с магазином и розничными точками. Сайт грузился медленно, и клиент пришёл с запросом на ускорение.

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

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

Тяжёлые анимации заменили видео и картинками

Главный вес забирали анимации, местами с трёхмерными объектами. Они считаются в браузере на лету: каждый кадр — работа процессора пользователя, плюс вес библиотек и самих моделей в загрузке.

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

Значит, их можно посчитать один раз заранее. Тяжёлые сцены заменили видео и изображениями — тем же движением, снятым в готовый файл. Браузер вместо расчёта трёхмерной сцены проигрывает ролик, а пользователь видит прежнюю картинку.

Сжатие при загрузке в CMS

Файлы ужимаются автоматически в момент заливки в систему управления.

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

Такое решение работает дальше без нас. Контент-менеджер заливает новую съёмку коллекции обычным способом, сжатие срабатывает само, и никто не вспоминает про оптимизацию вручную.

Объём фронтенда

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

Редизайн главной

Главную страницу переделали отдельным блоком работ по запросу клиента. Остальной сайт при этом сохранил прежний вид.

CULT получил сайт легче прежнего и с тем же внешним видом. Тяжёлые сцены заменены готовыми файлами, изображения ужимаются при заливке сами, объём сборки сокращён. Главная страница обновлена.