Пресеты эмуляции

Библиотека Lighthouse в JavaScript предоставляет возможность использовать пресеты эмуляции, которые позволяют тестировать веб-страницы в различных условиях, моделируя поведение разных устройств и сетевых соединений. Это критически важно для оценки производительности, доступности и SEO в условиях, приближенных к реальной эксплуатации.

Настройка пресетов эмуляции

В Lighthouse пресеты эмуляции задаются через объект config, который может содержать ключ emulatedFormFactor и дополнительные параметры в settings. Основные варианты пресетов:

  • mobile – эмуляция мобильного устройства с узким экраном и низкой производительностью процессора.
  • desktop – эмуляция десктопного устройства с высокой производительностью процессора и стандартными размерами экрана.
  • none – отключение эмуляции, используется реальная среда.

Пример конфигурации:

const lighthouseConfig = {
  extends: 'lighthouse:default',
  settings: {
    emulatedFormFactor: 'mobile', // возможные значения: 'mobile', 'desktop', 'none'
    screenEmulation: {
      disabled: false,
      width: 360,
      height: 640,
      deviceScaleFactor: 2,
      mobile: true,
      disabled: false
    },
    throttling: {
      rttMs: 150,
      throughputKbps: 1600,
      cpuSlowdownMultiplier: 4,
      requestLatencyMs: 0
    }
  }
};

Компоненты эмуляции

Эмуляция в Lighthouse делится на три основных блока:

  1. Screen Emulation – настройка размеров экрана, коэффициента масштабирования (deviceScaleFactor) и флага mobile. Определяет, как страница будет отображаться на устройстве.
  2. User-Agent Emulation – подмена заголовка User-Agent для имитации браузера мобильного или десктопного устройства.
  3. Throttling – ограничение пропускной способности сети и скорости процессора, что позволяет измерять реальную производительность под ограниченными условиями.

Использование кастомных пресетов

Помимо стандартных пресетов mobile и desktop, можно создавать кастомные пресеты эмуляции, комбинируя параметры:

const customPreset = {
  emulatedFormFactor: 'mobile',
  screenEmulation: {
    width: 414,
    height: 896,
    deviceScaleFactor: 3,
    mobile: true,
    disabled: false
  },
  throttling: {
    rttMs: 200,
    throughputKbps: 1200,
    cpuSlowdownMultiplier: 5
  }
};

Кастомные пресеты позволяют тестировать страницы на конкретных устройствах, например, iPhone 14 Pro, с точной настройкой ширины, высоты, масштабирования и сетевых условий.

Применение пресетов в командной строке

Lighthouse CLI позволяет применять пресеты напрямую, без программной конфигурации. Примеры:

lighthouse https://example.com --preset=mobile
lighthouse https://example.com --preset=desktop

Если требуется кастомная эмуляция, используется конфигурационный файл JSON с указанием всех параметров screenEmulation и throttling.

Влияние эмуляции на отчёт

Эмуляция влияет на показатели First Contentful Paint, Largest Contentful Paint, Time to Interactive и другие метрики. Использование мобильного пресета показывает реальные задержки на медленных устройствах и сетях, а десктопный пресет помогает оценить производительность на высокопроизводительных машинах.

Ограничения и нюансы

  • Эмуляция не учитывает реальное аппаратное ускорение GPU, что может немного искажать показатели анимаций.
  • Эмуляция сети и CPU работает только в пределах Chrome DevTools Protocol и не всегда идеально отражает поведение физических устройств.
  • Некоторые компоненты, такие как датчики ориентации или геолокации, требуют дополнительной настройки через API эмуляции, если тестируется функциональность на мобильных устройствах.

Рекомендации по применению

  • Использовать стандартные пресеты для быстрого анализа страниц в разных форм-факторах.
  • Для глубокого тестирования производительности создавать кастомные пресеты с учетом конкретных характеристик устройств и сетей.
  • Включать эмуляцию сети и CPU, чтобы оценивать реальное время загрузки страниц для пользователей с медленным подключением.

Пресеты эмуляции в Lighthouse предоставляют мощный инструмент для точного моделирования поведения сайта в различных условиях, обеспечивая объективную и воспроизводимую оценку веб-страниц.

Оглавление