Как эмулировать медленное сетевое соединение (троттлинг) в браузере с помощью DevTools?

Троттлинг (throttling) сети в DevTools позволяет симулировать работу приложения на медленных или нестабильных соединениях, что критически важно для тестирования производительности и пользовательского опыта.

Инструкция для Chrome/Edge DevTools:

1. Откройте инструменты разработчика (F12 или Ctrl+Shift+I / Cmd+Opt+I).
2. Перейдите на вкладку Network.
3. Найдите выпадающий список, который по умолчанию отображает Online (или No throttling). Он расположен на панели инструментов вкладки Network.
4. Выберите один из предустановленных профилей или создайте свой:
   • Online: Без ограничений.
   • Fast 3G / Slow 3G: Стандартные профили для мобильных сетей.
   • Offline: Полное отсутствие сети.
   • Custom > Add...: Создание собственного профиля.

Настройка кастомного профиля:

При создании профиля можно задать три ключевых параметра:

• Throughput (Пропускная способность):
  • Download: Скорость загрузки (например, 500 Kbps).
  • Upload: Скорость отдачи (например, 250 Kbps).
• Latency (Задержка): Время прохождения пакета туда и обратно (RTT), например, 200 ms.

Пример профиля "Очень медленный DSL":

Download: 256 Kbps
Upload: 128 Kbps
Latency: 300 ms

Что тестировать с помощью троттлинга?

• Время загрузки страницы (Page Load Time): Как быстро страница становится интерактивной на медленной связи.
• Поведение ленивой загрузки (Lazy Loading): Корректно ли подгружаются изображения и контент при скролле.
• Индикаторы загрузки (Loading States): Видны ли спиннеры, скелетоны или сообщения о загрузке.
• Обработка ошибок: Как приложение ведет себя при таймаутах или обрывах соединения.
• Логика работы с кэшем: Правильно ли кэшируются статические ресурсы, чтобы уменьшить трафик.

Важное замечание:

Троттлинг в DevTools эмулирует только скорость сети. Он не влияет на производительность CPU или рендеринг браузера. Для комплексного тестирования производительности на слабых устройствах используйте также CPU throttling во вкладке Performance.