Network throttling

Network throttling — механизм искусственного ограничения скорости сетевого соединения и задержки отклика сервера, используемый в Lighthouse для анализа производительности веб-страниц в условиях различных сетевых условий. Основная цель этого подхода — воспроизвести пользовательский опыт на медленных или нестабильных сетях и выявить узкие места в загрузке контента.

Принципы работы

Lighthouse использует DevTools Protocol для управления сетевыми условиями. При активации throttling устанавливаются следующие параметры:

  • Download throughput — скорость загрузки данных с сервера (в Кбит/с).
  • Upload throughput — скорость отправки данных на сервер (в Кбит/с).
  • Latency — задержка запроса, имитирующая время распространения сигнала по сети (в миллисекундах).

Эти параметры позволяют симулировать различные сетевые сценарии, например:

  • 3G Slow — высокая задержка и низкая скорость передачи данных, характерная для медленных мобильных сетей.
  • 4G — умеренная задержка и высокая скорость передачи данных, приближенная к современным мобильным соединениям.
  • Offline — имитация отсутствия сетевого соединения, полезна для проверки PWA и кэширования.

Настройка throttling в Lighthouse

Throttling можно настроить двумя способами:

  1. Через интерфейс Chrome DevTools при запуске Lighthouse. Здесь предоставляется набор предустановленных профилей сети.
  2. Программно через Node.js API Lighthouse позволяет создавать кастомные конфигурации:
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
  const options = {
    port: chrome.port,
    throttling: {
      rttMs: 150,
      throughputKbps: 1638.4,
      requestLatencyMs: 150,
      cpuSlowdownMultiplier: 4
    }
  };

  const results = await lighthouse('https://example.com', options);
  console.log(results.lhr.categories.performance.score);
  await chrome.kill();
})();

В этом примере:

  • rttMs — эмулирует время отклика сети.
  • throughputKbps — пропускная способность канала в килобитах в секунду.
  • cpuSlowdownMultiplier — замедление работы процессора для моделирования устройств с низкой производительностью.

Влияние network throttling на метрики

Network throttling напрямую влияет на ключевые показатели производительности:

  • First Contentful Paint (FCP) и Largest Contentful Paint (LCP) растут с увеличением задержки сети и снижением скорости передачи данных.
  • Time to Interactive (TTI) становится больше, так как браузер дольше получает и обрабатывает ресурсы.
  • Total Blocking Time (TBT) увеличивается при высокой задержке сети и низкой пропускной способности, особенно если скрипты зависят от внешних API.

Правильная конфигурация throttling позволяет выявить критические узкие места и оптимизировать загрузку ресурсов, уменьшить блокирующие скрипты и улучшить пользовательский опыт.

Продвинутые техники

  • Комбинирование network throttling с CPU throttling: позволяет эмулировать старые или бюджетные устройства.
  • Использование кастомных профилей: позволяет тестировать конкретные сценарии, например, городскую сеть с нестабильным 3G или региональную сеть с ограниченной скоростью.
  • Сценарное тестирование: последовательное воспроизведение сети с различными скоростями для анализа влияния на критические метрики и загрузку сторонних библиотек.

Практические советы

  • Для оценки мобильного опыта рекомендуется использовать медленные 3G-сценарии с задержкой около 400–600 мс.
  • Для тестирования десктопных приложений подходят профили с задержкой 100–150 мс и высокой пропускной способностью.
  • Network throttling следует комбинировать с мониторингом загрузки ресурсов и waterfall-диаграммами для выявления элементов, вызывающих задержки.

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

Оглавление