ВКонтакте обновила веб-платформу и ускорила загрузку сайта на 25%

Переход на SPA* стал частью большой технологической трансформации ВКонтакте. Команда обновила фронтенд-архитектуру веб-версии сервиса и перевела на новую технологическую основу ключевые пользовательские сценарии: ленту, профили, сообщества, мессенджер, друзей, клипы, фотографии, маркет. После перехода показатели производительности улучшились: первая отрисовка страницы ускорилась на 25%, а среднее время перехода между разделами уменьшилось в 3,5 раза.

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

Обновление затронуло не только пользовательский интерфейс, но и внутренние процессы разработки. В рамках перехода на SPA команда интегрировала в веб-версию компонентный подход, связанный с дизайн-системой ВКонтакте. Теперь новые интерфейсы можно собирать из готовых компонентов: кнопок, модальных окон, навигационных элементов и других блоков. Это снижает объём ручной вёрстки, помогает поддерживать единый визуальный стиль и ускоряет разработку новых функций.

Новая архитектура позволила командам выпускать веб-обновления быстрее: время деплоя фронтенда сократилось до 20 секунд. Релизы происходят в среднем 6-8 раз в сутки; в продакшене ежедневно появляется более 100 мерж-реквестов.

«Переход на SPA - это не просто изменение архитектуры, а большая и сложная инженерная работа, которую мы выполнили в короткие сроки. Веб-версия стала заметно отзывчивее, а платформа - гибче для дальнейшего роста. Новый компонентный подход и независимый деплой фронтенда дают нам возможность быстрее выпускать фичи, безопасно экспериментировать и масштабировать продуктовые сценарии», - прокомментировал Юрий Кочарян, технический директор ВКонтакте.

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