Как держать производительность большого фронтенд-приложения под контролем?
- Что такое бюджет производительности?
- Как не дать бандлу разрастись?
Производительность деградирует незаметно — по килобайту в каждом PR. Удержать её помогают бюджеты (размер JS на маршрут, LCP, INP) с проверкой в CI, которая блокирует превышение, мониторинг реальных пользователей (RUM) по маршрутам и устройствам с алертами, разделение кода по маршрутам и владельцы у ключевых страниц. Плюс правило: новая зависимость — с оценкой её веса.
- Измерять на слабых устройствах и медленной сети — там живут проблемы
- Отчёт о размере бандла в каждом PR (разница с main)
- Сторонние скрипты (аналитика, чаты, реклама) — главный источник регрессий
А ещё Производительность — продуктовая метрика: связь скорости с конверсией убеждает бизнес лучше аргументов
Подробно
Инструменты:
- бюджеты размера: size-limit, bundlesize, проверки сборщика;
- лабораторные замеры: Lighthouse CI на ключевых страницах;
- RUM: библиотека web-vitals с отправкой в свою аналитику или готовые сервисы, разрезы по странице, устройству, региону;
- анализ бандла: визуализатор сборки, поиск дублей библиотек.
Процесс:
- бюджеты согласованы с продуктом и записаны;
- CI сравнивает с main и блокирует превышение без обоснования;
- еженедельный обзор полевых метрик, регрессии — задачи с владельцем;
- сторонние скрипты — через ревью и асинхронную загрузку.
Архитектурные меры: разделение по маршрутам, ленивая загрузка тяжёлых виджетов, серверный рендеринг важных страниц, контроль общих зависимостей.
Что хотят услышать
- Бюджеты с автоматической проверкой.
- Мониторинг реальных пользователей.
- Процесс и владельцы, а не разовая оптимизация.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Проверять производительность раз в год
- ✗Производительность сама остаётся стабильной
- ✓Бюджеты на размер JS, LCP и INP с проверкой в CI плюс мониторинг реальных пользователей
- ✗Достаточно один раз сжать картинки и включить gzip — дальше производительность сама не ухудшится
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.