Влияние Производительности на Бизнес
Производительность напрямую влияет на доход и вовлечённость. Медленные страницы увеличивают показатель отказов и снижают конверсию. QA играет критическую роль, устанавливая бюджеты, отслеживая регрессии и проверяя работу техник оптимизации.
Техники Оптимизации для Тестирования
Оптимизация Изображений
| Техника | Что тестировать |
|---|---|
| Современные форматы (WebP, AVIF) | Изображения в современном формате с fallback |
| Responsive (srcset) | Корректный размер для viewport |
| Lazy loading | Изображения ниже fold загружаются при скролле |
| Сжатие | Без видимой потери качества |
| Размеры | Атрибуты width/height (предотвращает CLS) |
Оптимизация JavaScript
| Техника | Что тестировать |
|---|---|
| Code splitting | Только код текущей страницы загружается |
| Tree shaking | Неиспользуемый код удалён из продакшена |
| Минификация | JS-файлы минифицированы |
| Defer/async | Некритичные скрипты не блокируют рендеринг |
Performance Budgets
| Метрика | Пример бюджета |
|---|---|
| Общий вес | <500КБ |
| JavaScript | <150КБ |
| CSS | <50КБ |
| Изображения | <200КБ на страницу |
| LCP | <2.5с |
| TBT | <200мс |
Waterfall-Анализ
Waterfall-график в DevTools показывает последовательность загрузки. Ищите: длинный TTFB, ресурсы блокирующие рендеринг, большие ресурсы, цепочки зависимостей и сторонние скрипты.
Упражнение: Аудит Оптимизации Производительности
Шаг 1: Базовая Линия
| Метрика | Значение | Бюджет | Пройдено/Нет |
|---|---|---|---|
| Общий вес | КБ | <500КБ | |
| JS-бандл | КБ | <150КБ | |
| CSS | КБ | <50КБ | |
| Запросы | <50 | ||
| LCP | с | <2.5с | |
| TBT | мс | <200мс |
Шаг 2: Аудит Изображений
| Проверка | Пройдено/Нет |
|---|---|
| Изображения в WebP или AVIF | |
| Responsive srcset реализован | |
| Изображения ниже fold с lazy loading | |
| Hero-изображение загружается eager | |
| Все изображения с width/height |
Шаг 3: Аудит JavaScript
| Проверка | Пройдено/Нет |
|---|---|
| Code splitting реализован | |
| JS-файлы минифицированы | |
| Нет блокирующих скриптов в head | |
| Сторонние скрипты async |
Решение: Пример Аудита Производительности
Базовая линия: Общий вес 2.3МБ (НЕ ПРОЙДЕНО), JS 450КБ (НЕ ПРОЙДЕНО), LCP 4.2с (НЕ ПРОЙДЕНО)
Основные узкие места:
- Hero-изображение: 1.4МБ PNG → WebP (экономия ~1.1МБ)
- JavaScript: единый бандл 450КБ → Code-split (экономия ~300КБ)
- Виджет чата: 200КБ синхронно → Загрузка по взаимодействию
После оптимизации: Вес ~480КБ, JS ~150КБ начальный, LCP ~2.0с
Приоритет: Изображения WebP → lazy loading → code split → defer сторонних → budgets в CI
Ключевые Выводы
- Тестирование производительности должно быть непрерывным — используйте performance budgets в CI/CD
- Изображения — главная возможность оптимизации (50-70% веса)
- Code splitting и lazy loading снижают начальный вес без удаления функций
- Waterfall-анализ определяет конкретные ресурсы-узкие места
- Сторонние скрипты — частая скрытая цена — загружайте асинхронно
- Всегда тестируйте на мобильных с ограниченным CPU и сетью