Lighthouse и производительность
Lighthouse проверяет скорость, доступность, базовые web best practices и SEO публичных страниц. Запускайте его после установки, изменения темы и крупных обновлений.
Что проверять
Проверяйте минимум четыре состояния:
- главная страница без авторизации;
- страница входа;
- личный кабинет после входа;
- наиболее тяжёлая страница модуля, например магазин или рынок.
Для каждого состояния выполните mobile и desktop audit. Повторите проверку на русском и английском языке, если текст заметно меняет layout.
Chrome DevTools
- Откройте страницу в режиме Incognito.
- Откройте DevTools -> Lighthouse.
- Выберите Navigation.
- Отметьте Performance, Accessibility, Best Practices и SEO.
- Сначала выберите Mobile, затем повторите для Desktop.
- Нажмите Analyze page load.
Закройте лишние вкладки и отключите расширения браузера. Один запуск может отличаться из-за сети, поэтому сравнивайте медиану трёх запусков.
CLI для повторяемой проверки
npx lighthouse https://cabinet.example.com/ \
--chrome-flags="--headless --no-sandbox" \
--output=html \
--output-path=./lighthouse-home.html
Для автоматической проверки используйте Lighthouse CI и сохраняйте отчёт как результат сборки. Не передавайте рабочие пароли через командную строку для проверки авторизованных страниц; используйте отдельный тестовый стенд и настройку Playwright.
Практичные пороги
| Категория | Минимум перед запуском | Цель |
|---|---|---|
| Performance | 75 | 90+ |
| Accessibility | 90 | 95+ |
| Best Practices | 90 | 95+ |
| SEO | 90 | 95+ |
Performance зависит от темы, изображений, сети и сторонних скриптов. Регрессия относительно предыдущего релиза важнее одной абсолютной цифры.
Частые проблемы
Большие изображения
Используйте WebP/AVIF, реальные размеры отображения, lazy loading ниже первого экрана и стабильные width/height.
Render-blocking CSS и JavaScript
Удалите неиспользуемые библиотеки темы, не подключайте один и тот же bundle дважды и отложите сторонние скрипты, которые не нужны до первого взаимодействия.
Layout shift
Задайте размеры логотипов, баннеров, таблиц и динамических блоков. Проверяйте RU/EN отдельно: длинный перевод не должен менять ширину кнопки или перекрывать соседний элемент.
Медленный backend
Проверьте TTFB через Network panel, состояние API, запросы базы, фоновые задания и локальный файловый кэш. CDN не исправляет медленный персонализированный кабинет.
Accessibility
Исправьте контраст, label у полей, доступность dropdown с клавиатуры, порядок заголовков и focus state. Не скрывайте focus outline без замены.
После исправлений
Повторите те же URL и режимы, сравните отчёты и сохраните результат рядом с версией релиза. Затем выполните проверку перед запуском.