Desktop vs Mobile

Lighthouse — это инструмент для анализа производительности, доступности и SEO веб-приложений. Одним из ключевых аспектов при проведении аудита является выбор среды тестирования: Desktop или Mobile. Понимание различий между этими режимами позволяет точнее интерпретировать результаты и корректно оптимизировать сайт.

Основные различия

  1. Конфигурация сети и устройства

    • Mobile эмулирует слабое соединение и ограничения мобильного процессора. По умолчанию используется:

      • Скорость сети: 4G с высокой латентностью (latency ~150 ms)
      • CPU throttling: замедление процессора примерно в 4 раза
      • Размер экрана и DPR (Device Pixel Ratio), близкие к типичным смартфонам

    • Desktop использует более высокую пропускную способность сети, отсутствие throttling CPU и разрешение экрана, близкое к стандартным мониторам.

  2. Метрики производительности

    • First Contentful Paint (FCP) и Largest Contentful Paint (LCP) часто хуже в мобильном режиме, поскольку ограничения процессора и сети задерживают рендеринг.
    • Time to Interactive (TTI) также выше на мобильных устройствах, особенно для тяжёлых JavaScript-бандлов.
    • Speed Index зависит от визуальной скорости рендеринга, и различие между мобильной и десктопной оценкой может быть значительным при использовании сложной анимации или крупных изображений.

  3. Доступность и SEO

    • Режим Mobile более реалистично отражает пользовательский опыт большинства посетителей сайта, так как основная часть трафика приходится на смартфоны.
    • Некоторые элементы интерфейса, корректно работающие на Desktop, могут быть недоступны или плохо отображаться на Mobile, что снижает оценки Accessibility и SEO.

Настройка и использование режимов

  • CLI: при запуске Lighthouse через командную строку выбор стратегии осуществляется через флаг --form-factor:

    lighthouse https://example.com --form-factor=mobile
lighthouse https://example.com --form-factor=desktop

  • Node API: объект конфигурации позволяет детально настраивать параметры:

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

const options = {
  port: chrome.port,
  formFactor: 'desktop',
  screenEmulation: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1,
    mobile: false,
  },
  throttling: {
    rttMs: 40,
    throughputKbps: 10240,
    cpuSlowdownMultiplier: 1,
  },
};

    Здесь важно различать screenEmulation.mobile и formFactor, так как они влияют на рендеринг и измерение производительности.

  • Chrome DevTools: при запуске аудита через DevTools можно выбрать «Desktop» или «Mobile» прямо в интерфейсе. Это автоматически применяет эмуляцию сети, CPU и размеров экрана.

Влияние на показатели Lighthouse

  • Перфоманс:

    • Mobile: низкий FPS, задержки рендеринга, замедленная загрузка скриптов.
    • Desktop: высокая скорость загрузки, минимальное влияние throttling.

  • Лучшие практики:

    • Мобильный аудит чаще выявляет проблемы с адаптивностью и крупными изображениями.
    • Desktop выявляет ошибки, связанные с высокими разрешениями и тяжелыми стилями.

  • PWA и Accessibility:

    • Mobile выявляет узкие места при взаимодействии с сенсорным экраном и меньшей шириной окна.
    • Desktop показывает различия в фокусе клавиатуры и масштабировании.

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

  • Сравнивать показатели между Desktop и Mobile напрямую не стоит, так как они измеряются в разных условиях.
  • Mobile показывает реальный пользовательский опыт для большинства сайтов, особенно для e-commerce и новостных ресурсов.
  • Desktop удобен для выявления «пиковых» проблем, которые проявляются только на мощных устройствах или больших экранах.

Особенности эмуляции

  • Lighthouse не тестирует конкретное устройство, а использует эмуляцию характеристик. Для Mobile это:

    • Эмуляция сенсорного экрана
    • Ограничение производительности CPU
    • Ограничение скорости сети
    • Переопределение размера экрана и DPR

  • Для Desktop эмуляция минимальна:

    • Полная производительность процессора
    • Быстрое соединение
    • Крупное разрешение экрана

Различия между Desktop и Mobile в Lighthouse критически важны для точного понимания показателей сайта. Игнорирование этих режимов приводит к некорректной интерпретации результатов и неверным решениям по оптимизации.

Оглавление