Кейс: разработка веб-портала для ВДНХ. Интеграция 14 сайтов в единый сервис

 

Интеграция 14 сайтов ВДНХ в единый портал с 15-кратным ростом скорости отклика

Опыт объединения разрозненных ресурсов в современную платформу

Выставка достижений народного хозяйства (ВДНХ) — это огромный комплекс с музеями, лекториями, выставками и событиями. Для понимания масштаба: ВДНХ сегодня — это 325 гектаров с павильонами, парками, аллеями и скульптурами. На территории — 49 объектов культурного наследия. 9 млн гостей посетили главную выставку страны по итогам 2024 года. Выставка достижений народного хозяйства сегодня — крупнейший в мире музейно-выставочный и рекреационный комплекс.

Однако до 2025 года цифровая экосистема ВДНХ состояла из 14 разрозненных сайтов, каждый из которых жил своей жизнью. Это создавало неудобства для пользователей и сотрудников, а также тормозило развитие комплекса. 

• Наша задача заключалась в разработке единого корпоративного портала, который объединил бы все ресурсы, ускорил работу и упростил управление контентом. 

 

Рассказываем, как нам удалось объединить разрозненные сайты в современную платформу, ускорить отклик в 15 раз и повысить вовлеченность аудитории на 40%.

 

Проблемы исходной системы

Зачем ВДНХ понадобился новый портал? Заказчик хотел получить современную платформу с интуитивным интерфейсом, встроенными механизмами SEO-оптимизации, высокой производительностью и возможностью масштабирования под растущую аудиторию. Проект должен был не только решить текущие проблемы, но и заложить основу для будущих цифровых инициатив.

До старта проекта разделы ВДНХ — от музея космонавтики до лектория — существовали на отдельных сайтах собранных на CMS «1С-Битрикс: Управление сайтом», с разным дизайном и логикой работы. 

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

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

 

Решение: разработка единого интернет-портала на современной архитектуре

Чтобы решить проблемы заказчика, мы разработали единый интернет-портал, объединивший 14 сайтов в одну систему на базе связки Laravel (бэкенд) и Nuxt.js (фронтенд). Такой выбор технологий позволил сократить время разработки до 6 месяцев, обеспечив высокую производительность и гибкость.

 

Почему выбрали Laravel и Nuxt.js

Laravel обеспечил надежный бэкенд с поддержкой API для внешних приложений, таких как мобильное приложение и информационные стелы ВДНХ. Nuxt.js с серверным рендерингом (SSR) ускорил загрузку страниц и улучшил SEO, так как поисковые системы сразу видели готовый HTML-код. Эта связка также упростила обучение команды заказчика, уже знакомой с этими технологиями.

Рис. 1. Схема архитектуры портала ВДНХ (пунктир — точки масштабирования)

 

Микросервисная архитектура для масштабируемости

Мы разделили систему на три независимых микросервиса: API, фронтенд и админ-панель. Это позволило масштабировать каждый компонент отдельно, например, увеличивать мощности API во время массовых мероприятий. Для управления использовали Docker Swarm, который распределял нагрузку между контейнерами по алгоритму Round Robin. Такой подход обеспечил стабильность даже при резком росте трафика.

 

---

Админ-панель, созданная на Laravel Orchid, получилась настолько удобной, что обучение контент-менеджеров заняло всего 2 часа. Разработчики заказчика смогли самостоятельно дорабатывать её уже через неделю. Хотите также? Оставляйте заявку на разработку или модернизацию вашего веб-портала.

---

 

Гибридный рендеринг и кэширование

Для повышения производительности портала ВДНХ мы внедрили гибридный рендеринг, сочетающий серверный рендеринг (SSR) и клиентскую подгрузку. SSR обеспечивает мгновенное отображение ключевых элементов страниц, сокращает время загрузки и улучшает SEO-позиции в поисковых системах за счёт быстрой индексации готового HTML. Динамические элементы — фильтры и афиши — подгружаются асинхронно через REST API, сохраняя интерактивность SPA-приложений и снижая нагрузку на сервер.

 

---

Почему гибридный рендеринг улучшает SEO? Серверный рендеринг формирует HTML на стороне сервера, позволяя поисковым роботам сразу видеть весь контент страницы. Это повышает её релевантность в поисковой выдаче. Асинхронная подгрузка динамических данных минимизирует процент отказов и улучшая поведенческие метрики. Комплекс факторов положительно влияет на позиции в поисковиках.

---

 

Мы также внедрили многоуровневое кэширование: Nginx сохраняет SSR-страницы → Memcached кэширует запросы к базе данных → Redis с Sorted Sets ускоряет обработку динамических данных. Тегированное кэширование в PHP-бэкенде автоматически обновляет изменённые данные, обеспечивая их актуальность.

 

Результаты:

• Время отклика на бэкэнде сократилось в 15 раз — с 900 мс до 62 мс.
• TTFB (Time To First Byte) снизился, устранив задержки при массовых запросах.
• LCP (Largest Contentful Paint) улучшился на 40%, обеспечив быструю загрузку контента.
• Lighthouse-тесты подтвердили загрузку первого экрана менее чем за 2 секунды даже при пиковых нагрузках.

 

SEO-позиции выросли благодаря быстрой индексации и улучшенным поведенческим метрикам.

 

Оптимизация фильтров для быстрого поиска мероприятий

При разработке информационного портала ВДНХ, где одновременно аккумулируется информация о сотнях мероприятий, было критично обеспечить мгновенный поиск по сложным фильтрам, таким как категории, даты или стоимость. Мы внедрили решение Redis Sorted Sets, что позволило обрабатывать запросы, вроде «бесплатные концерты для детей в выходные», за 3–5 мс. 

• Это решение заменило прямые запросы к базе данных, которые не справлялись с нагрузкой при большом числе параметров.

 

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

 

Рис. 2. Настройки тестирования производительности главной страницы в Jmeter

 

Рис. 3. Показатели скорости работы Nuxt-приложения

 

Рис. 4. Метрики производительности API портала

 

Автоматизация обновлений через CI/CD

Разрабатывая веб-сервисы, необходимо автоматизировать процесс сборки, тестирования и развертывания системы. Для ускорения выпуска обновлений на портал использовали CI/CD на базе Gitea: система автоматически собирает код, запускает тесты с проверкой уязвимостей и деплоит изменения в продакшен. При возникновении сбоев Docker Swarm обеспечивает быстрый откат до стабильной версии за несколько минут.

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

 

Единый стиль с гибкой настройкой

Объединить 14 сервисов в один портал, сохранив уникальность каждого направления, было одной из ключевых задач. Мы разработали систему динамических цветовых схем, где сервер мгновенно генерирует HTML с нужным оформлением для каждого раздела — например, тёмно-синяя палитра с анимацией звёзд для «Космоса» или бежевые тона с книжными иконками для «Лектория».

Рис. 5. Визуальные стили тематических разделов портала

CSS-переменные, встроенные в SSR-каркас, устранили проблему «мерцания стилей», обеспечивая мгновенное отображение страниц в правильном оформлении. Контент-менеджеры настраивают стили через админ-панель, а кэширование в Redis ускоряет загрузку. Модульная структура позволяет собирать страницы из готовых блоков, упрощая добавление новых событий или баннеров.

Узнать больше о создании веб-порталов и сервисов под задачи вашего бизнеса.

 

Гибкий редактор для контент-менеджеров

Для удобства работы с контентом при разработке портала услуг мы внедрили drag-and-drop систему сборки страниц на базе Editor.js. Решение дополнили готовыми плагинами и механизмом кастомных блоков, чтобы учесть требования заказчика. Контент-менеджеры могут собирать страницы из блоков — текста, слайдеров, карт, афиш и других элементов — с помощью drag-and-drop системы. Отдельно был внедрён Editor.js как основной редактор с поддержкой плагинов и кастомных блоков. Специально разработанный кастомный блок для событий и мест адаптирован под задачи ВДНХ, позволяя быстро публиковать контент.

Рис. 6. Интерфейс редактора с базовыми и кастомными блоками

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

 

Многоязычная поддержка

Для англоязычной и китайской версий портала мы создали модуль локализации с экспортом и импортом данных через Excel. Контент-менеджеры меняют элементы интерфейса — кнопки или меню — в файле, после чего система автоматически применяет изменения. Если перевод для раздела отсутствует, он не отображается для соответствующей языковой версии, что упрощает управление контентом.

Рис. 7. Интерфейс импорта и экспорта переводов в Excel

 

Рис. 8. Вкладки для редактирования контента на разных языках

 

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

 

Гибкое меню с динамическими обновлениями

Для удобства навигации по порталу ВДНХ мы создали адаптивное меню как отдельный модуль, работающий через API. Как это работает? Контент-менеджеры могут в реальном времени изменять структуру, добавлять временные разделы для акций или скрывать неактуальные пункты, не останавливая работу сайта. Благодаря серверному рендерингу (SSR) и кэшированию в Redis изменения мгновенно отображаются пользователям.

 

Рис. 9. Динамическое меню портала с возможностью редактирования в реальном времени

Временные разделы (например, афиши мероприятий) автоматически исчезают по истечении срока действия. 

 

Мобильная оптимизация для 85% трафика

С учётом того, что 85% пользователей заходят на сайт с мобильных устройств, особое внимание уделили разработке веб-портала с упором на мобильную производительность.

• Ленивая загрузка (lazy-loading) подгружает изображения и компоненты только при прокрутке. 
• Сервер определяет тип устройства, выдавая для смартфонов облегчённую версию страниц.

 

Технология Nuxt PWA позволила пользователям просматривать афишу или карту офлайн, кэшируя ключевые данные через сервис-воркеры. 

 

Рис. 10. Показатели оптимизации портала в PageSpeed Insights

Оптимизация через PageSpeed Insights устранила лишние стили и скрипты, обеспечив загрузку первого экрана менее чем за 2 секунды даже при слабом интернете.

 

Документация API через Swagger

Для упрощения сопровождения и онбординга разработчиков мы внедрили Swagger, который автоматически генерирует интерактивную документацию API на основе Laravel. Это позволило быстро интегрировать существующие приложения ВДНХ, такие как мобильное приложение и информационные стелы, сохранив их функциональность без доработки.

 

Результаты в цифрах

Консолидация 14 сайтов в единый портал решила не только технические, но и бизнес-задачи: улучшила клиентский опыт, сократила затраты на поддержку и заложила основу для роста.

Каких результатов удалось достичь?

• Время отклика на бэкенде сократилось с 900 мс до 62 мс — в 15 раз быстрее.
• LCP (Largest Contentful Paint) улучшился на 40%, обеспечив быструю загрузку страниц.
• TTFB (Time To First Byte) снизился, исключив задержки при массовых запросах.
• Lighthouse-тесты подтвердили загрузку первого экрана менее чем за 2 секунды.

 

Эти результаты сделали портал устойчивым к пиковым нагрузкам и удобным для пользователей.

---

Единый портал объединил разрозненные ресурсы ВДНХ, упростил навигацию и управление контентом. Масштабируемая архитектура позволяет выдерживать рост аудитории без апгрейда серверов, а SEO-оптимизация повысила видимость в поисковых системах. Удобная админ-панель сократила время на обучение сотрудников до 2 часов.

 

Клиент высоко оценил проект. Айк Гасоян, проектный менеджер ВДНХ, отметил: «Новая платформа стала мощным инструментом для оптимизации внутренних процессов и повышения качества взаимодействия с посетителями. Её производительность и гибкость полностью соответствуют нашим стратегическим целям».

 

Проект ВДНХ доказал, что разработка информационных порталов способна радикально улучшить цифровую инфраструктуру и повысить бизнес-эффективность комплекса. 

А вы готовы вывести цифровую инфраструктуру компании на новый уровень? Мы разрабатываем надёжные веб-порталы и сервисы под ключ: с гарантией сроков, прозрачной архитектурой и поддержкой после запуска. Узнать больше о разработке веб-порталов.