Аудит с помощью Lighthouse

Что Такое Lighthouse? #

Lighthouse — это автоматизированный open-source инструмент, разработанный Google для аудита качества веб-страниц. Он выполняет серию проверок страницы и генерирует отчёт с оценками и практическими рекомендациями по пяти категориям: Performance, Accessibility, Best Practices, SEO и PWA.

Для QA-инженеров Lighthouse служит комплексным gate качества, способным выявить проблемы от медленной загрузки страниц до отсутствующих атрибутов доступности и ошибок конфигурации SEO — всё из одного инструмента.

Пять Категорий Аудита #

Performance (0-100) #

Измеряет скорость загрузки и интерактивности страницы. Ключевые метрики:

Оценка производительности — это взвешенное среднее этих метрик. TBT имеет наибольший вес, что означает, что эффективность выполнения JavaScript оказывает наибольшее влияние на оценку.

Accessibility (0-100) #

Проверяет соответствие WCAG:

• Коэффициенты контрастности цветов
• Использование ARIA-атрибутов
• Связи label и элементов форм
• Альтернативный текст изображений
• Иерархия заголовков
• Управление фокусом
• Поддержка клавиатурной навигации

Примечание: Lighthouse обнаруживает примерно 30-40% проблем доступности. Ручное тестирование и тестирование со screen reader по-прежнему необходимы.

Best Practices (0-100) #

Оценивает современные практики веб-разработки:

• Использование HTTPS
• Отсутствие устаревших API
• Отсутствие ошибок в консоли
• Правильные пропорции изображений
• Безопасные cross-origin ссылки (rel="noopener")
• Корректное объявление charset
• Отсутствие уязвимых JavaScript-библиотек

SEO (0-100) #

Проверяет базовую поисковую оптимизацию:

• Валидный meta description
• Корректные title-теги
• Индексируемые ссылки
• Валидный robots.txt
• Корректный hreflang для мультиязычных сайтов
• Удобные для мобильных зоны нажатия
• Читаемые размеры шрифтов

PWA (Пройдено/Не пройдено) #

Оценивает критерии Progressive Web App:

• Валидный web app manifest
• Регистрация service worker
• HTTPS
• Корректные иконки и splash screens
• Поддержка offline-режима

Запуск Lighthouse #

Метод 1: Chrome DevTools #

1. Откройте страницу в Chrome
2. Откройте DevTools (F12) > вкладка Lighthouse
3. Выберите категории и тип устройства (Mobile/Desktop)
4. Нажмите Analyze page load
5. Изучите сгенерированный отчёт

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

Метод 2: Командная Строка (Рекомендуется для CI) #

# Установка
npm install -g lighthouse

# Запуск аудита
lighthouse https://example.com --output=html --output-path=./report.html

# Запуск с конкретными категориями
lighthouse https://example.com --only-categories=performance,accessibility

# Вывод в JSON для программной обработки
lighthouse https://example.com --output=json --output-path=./report.json

# С флагами Chrome
lighthouse https://example.com --chrome-flags="--headless --no-sandbox"

Метод 3: PageSpeed Insights #

Перейдите на pagespeed.web.dev — инструмент запускает Lighthouse на серверах Google и комбинирует лабораторные данные с полевыми данными реальных пользователей из Chrome UX Report.

Метод 4: Lighthouse CI #

Для интеграции в CI/CD:

npm install -g @lhci/cli

# Инициализация конфигурации
lhci wizard

# Запуск в CI pipeline
lhci autorun

Чтение Отчёта Lighthouse #

Интерпретация Оценок #

Понимание Opportunities и Diagnostics #

Opportunities показывают конкретные улучшения с оценкой экономии времени:

• “Serve images in next-gen formats” — Экономия 2.4с
• “Eliminate render-blocking resources” — Экономия 1.2с
• “Properly size images” — Экономия 0.8с

Diagnostics предоставляют дополнительную информацию о производительности:

• Размер DOM (количество элементов)
• Цепочки критических запросов
• Разбивка работы основного потока
• Время выполнения JavaScript

Вариативность Оценок #

Оценки Lighthouse могут меняться от запуска к запуску из-за:

• Сетевых условий
• Колебаний времени ответа сервера
• Загрузки CPU на тестовой машине
• Тайминга сторонних скриптов

Лучшая практика: Запускайте Lighthouse 3-5 раз и берите медианную оценку, или используйте Lighthouse CI, который автоматически обрабатывает множественные запуски.

Упражнение: Полный Рабочий Процесс Аудита Lighthouse #

Проведите полный аудит Lighthouse веб-приложения и создайте приоритизированный план действий.

Шаг 1: Запустите Аудит #

Запустите Lighthouse в трёх конфигурациях:

# Мобильный (по умолчанию)
lighthouse https://ваш-сайт.com --output=json --output-path=./mobile.json

# Десктоп
lighthouse https://ваш-сайт.com --preset=desktop --output=json --output-path=./desktop.json

# Конкретная страница (напр. страница товара)
lighthouse https://ваш-сайт.com/product/123 --output=json --output-path=./product.json

Шаг 2: Задокументируйте Оценки #

Шаг 3: Приоритизируйте Находки #

Для каждой проваленной проверки оцените:

1. Влияние: Сколько пользователей затронуто? Насколько серьёзна проблема?
2. Трудозатраты: Насколько сложно исправление? (CSS-изменение vs архитектурное изменение)
3. Приоритет: Высокое влияние + низкие затраты = исправлять первым

Шаг 4: Настройте Lighthouse CI #

Создайте конфигурацию lighthouserc.js:

module.exports = {
  ci: {
    collect: {
      url: [
        'https://ваш-сайт.com/',
        'https://ваш-сайт.com/products',
        'https://ваш-сайт.com/checkout',
      ],
      numberOfRuns: 3,
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 0.8}],
        'categories:accessibility': ['error', {minScore: 0.9}],
        'categories:best-practices': ['warn', {minScore: 0.9}],
        'categories:seo': ['error', {minScore: 0.9}],
      },
    },
    upload: {
      target: 'temporary-public-storage',
    },
  },
};

Lighthouse CI в GitHub Actions #

Пример workflow для автоматических проверок Lighthouse на каждый pull request:

name: Lighthouse CI
on: pull_request

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci && npm run build
      - name: Run Lighthouse
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: |
            http://localhost:3000/
            http://localhost:3000/products
          budgetPath: ./budget.json
          uploadArtifacts: true

Типичные Ошибки #

1. Оптимизация ради оценки, а не пользователей. Оценка 100 не гарантирует хороший пользовательский опыт — это значит, что автоматические проверки пройдены.

2. Тестирование только главной страницы. Страницы товаров, checkout и результаты поиска часто работают хуже. Проводите аудит репрезентативных страниц каждого раздела.

3. Игнорирование мобильных устройств. Оценки для десктопа почти всегда выше. Мобильная производительность — то, что Google использует для ранжирования.

4. Разовые аудиты. Lighthouse наиболее ценен как инструмент непрерывного мониторинга, а не разовая проверка. Настройте CI-интеграцию.

5. Равное отношение ко всем находкам. Улучшение LCP на 2 секунды стоит больше, чем исправление незначительного предупреждения в консоли. Приоритизируйте по влиянию на пользователя.

Ключевые Выводы #

• Lighthouse проверяет пять категорий: Performance, Accessibility, Best Practices, SEO и PWA
• Всегда запускайте в режиме инкогнито и берите медиану из нескольких запусков для надёжных оценок
• CLI и Lighthouse CI предпочтительнее DevTools для воспроизводимых автоматизированных аудитов
• Приоритизируйте находки по влиянию на пользователя и трудозатратам, а не только по дельте оценки
• Интегрируйте Lighthouse CI в CI/CD pipeline для выявления регрессий до попадания в продакшен
• Lighthouse обнаруживает многие проблемы, но не является полной заменой ручного тестирования, особенно для доступности