Симуляция мобильных устройств

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

Lighthouse предоставляет встроенные возможности эмуляции мобильных устройств для анализа производительности и доступности сайтов в условиях, приближенных к реальным мобильным устройствам. Эмуляция осуществляется через изменение User-Agent, размеров экрана, плотности пикселей и скорости сетевого соединения. Основные параметры эмуляции включают:

  • Viewport: размеры экрана, задаваемые в пикселях (ширина и высота).
  • Device Pixel Ratio (DPR): плотность пикселей, влияющая на рендеринг графики.
  • User-Agent: строка, идентифицирующая устройство для сервера.
  • Throttling: симуляция ограниченной скорости сети и процессора.

Эти настройки позволяют Lighthouse воспроизводить реальные условия, в которых пользователь взаимодействует с сайтом на мобильном устройстве.

Использование встроенных профилей устройств

Lighthouse включает предустановленные профили для популярных мобильных устройств, таких как iPhone X, Pixel 5 и других. Эти профили автоматически настраивают:

  • Размер экрана и ориентацию.
  • DPR.
  • Эмуляцию сетевого соединения (например, 4G).
  • Ограничение вычислительных ресурсов процессора для более точного измерения времени загрузки.

Применение профиля упрощает тестирование и обеспечивает сопоставимые результаты между разными анализами.

Симуляция медленной сети и процессора

Для точной оценки производительности на мобильных устройствах важна эмуляция ограниченной вычислительной мощности и сетевых условий:

  • CPU throttling: замедляет процессор браузера на заданный коэффициент, имитируя менее мощные мобильные процессоры.
  • Network throttling: позволяет задавать пропускную способность и задержку сети, например, имитацию сети 3G или слабого LTE.

Lighthouse использует комбинацию этих параметров для измерения First Contentful Paint (FCP), Time to Interactive (TTI) и других метрик в условиях, близких к реальным.

Настройка эмуляции через Node.js

При использовании Lighthouse в Node.js эмуляция настраивается через объект config:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const options = { port: chrome.port, formFactor: 'mobile' };
  const config = {
    extends: 'lighthouse:default',
    settings: {
      emulatedFormFactor: 'mobile',
      throttlingMethod: 'simulate',
      screenEmulation: {
        mobile: true,
        width: 375,
        height: 667,
        deviceScaleFactor: 3,
        disabled: false
      },
      throttling: {
        rttMs: 150,
        throughputKbps: 1600,
        cpuSlowdownMultiplier: 4
      }
    }
  };
  const result = await lighthouse('https://example.com', options, config);
  await chrome.kill();
})();

В этом примере задаются ширина и высота экрана, DPR, а также параметры сетевой и процессорной эмуляции для мобильного устройства.

Влияние на метрики производительности

Симуляция мобильных устройств позволяет измерять реальные показатели для конечного пользователя:

  • First Contentful Paint (FCP) – время до первого отображения содержимого.
  • Largest Contentful Paint (LCP) – время до загрузки основного контента.
  • Cumulative Layout Shift (CLS) – стабильность макета при загрузке.
  • Time to Interactive (TTI) – момент, когда сайт становится полностью интерактивным.

Использование эмуляции позволяет выявлять узкие места, которые не проявляются при анализе на десктопе, такие как медленная загрузка изображений, блокировка основного потока JavaScript или высокая нагрузка на процессор.

Настройка ориентации и плотности пикселей

Для более точного тестирования можно задавать ориентацию экрана (portrait или landscape) и deviceScaleFactor, что особенно важно для адаптивных интерфейсов и рендеринга графики. Например, изображения с высокой плотностью пикселей будут корректно масштабироваться, а тестируемая верстка не будет искажена.

Практические рекомендации

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

Эмуляция мобильных устройств в Lighthouse является мощным инструментом анализа, позволяющим выявлять проблемы производительности, доступности и UX именно в тех условиях, в которых их видят реальные пользователи.

Оглавление