ЮрКонсульт — ускорение

О проекте

КлиникаПлюс — сеть частных клиник с 4 филиалами. Сайт разрабатывался в 2018 году на Vue 2 и с тех пор не обновлялся. К 2024 году он безнадёжно устарел технически: медленная загрузка, плохая мобильная версия, устаревшие зависимости.

Задача

Провести рефакторинг: мигрировать с Vue 2 на Vue 3, переработать мобильную версию, ускорить загрузку. Не редизайн — структура и контент остаются, меняем только технологическую начинку.

Анализ проблем

Причины медленной загрузки

Vue 2 + старые плагины дают большой bundle (2.1 МБ gzip)
Все ресурсы загружаются синхронно
Изображения в JPEG без оптимизации
Нет code splitting — весь JS грузится сразу

Мобильная версия

Фиксированная ширина 1024px, горизонтальный скролл на телефоне
Кнопки слишком маленькие для тапа (12px)
Форма записи не адаптирована

Что сделали

Миграция Vue 2 → Vue 3 + Vite

Переписали компоненты на Vue 3 Composition API. Vite вместо webpack дал:

Горячая замена модулей (HMR) — мгновенная в dev-режиме
Автоматический code splitting
Оптимизация bundle (tree shaking, минификация)

Итоговый размер bundle: 2.1 МБ → 480 КБ (gzip)

Оптимизация изображений

Конвертация в WebP через Vite-плагин
Адаптивные изображения с srcset для разных экранов
Lazy loading для изображений вне viewport

Мобильная адаптация

Полностью переработали CSS под mobile-first подход. Особое внимание:

Форма онлайн-записи — упрощённая версия для мобильных
Кнопка «Позвонить» фиксирована внизу экрана на мобильном
Размеры кнопок и полей увеличены до стандарта WCAG (44px min)

Результат

Время загрузки: 5.8с → 1.1с
PageSpeed Mobile: 31 → 89 баллов
Мобильная аудитория: +55% за 2 месяца
Онлайн-записи через сайт: +78%
Размер JS: -77%