Понимание низкой пропускной способности и высокой задержки

Важно понимать, что ощущается при использовании вашего приложения или сайта, когда соединение плохое или ненадежное, и строить его соответствующим образом. Вам может помочь ряд инструментов.

Все больше людей пользуются Интернетом на мобильных устройствах. Даже дома многие люди отказываются от фиксированной широкополосной связи в пользу мобильной связи .

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

Эмулировать регулирование сети

При создании или обновлении сайта вы должны обеспечить адекватную производительность в различных условиях подключения. Несколько инструментов могут помочь.

Инструменты браузера

Chrome DevTools позволяет тестировать ваш сайт с различными скоростями загрузки/выгрузки и временем передачи , используя предустановки или пользовательские настройки на панели «Сеть». См. раздел «Начало работы с анализом производительности сети», чтобы изучить основы.

Регулирование Chrome DevTools

Системные инструменты

Network Link Conditioner — это панель предпочтений, доступная на Mac, если вы устанавливаете Hardware IO Tools для Xcode:

Панель управления Mac Network Link Conditioner

Настройки кондиционера сетевых ссылок Mac

Пользовательские настройки Mac Network Link Conditioner

Эмуляция устройства

Эмулятор Android позволяет моделировать различные условия сети во время запуска приложений (включая веб-браузеры и гибридные веб-приложения) на Android:

Android-эмулятор

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

На iPhone можно использовать Network Link Conditioner для имитации нарушенных условий сети (см. выше).

Тестируйте из разных мест и сетей

Производительность подключения зависит от местоположения сервера, а также типа сети.

WebPagetest — это онлайн-сервис, который позволяет запускать набор тестов производительности вашего сайта с использованием различных сетей и расположений хостов. Например, вы можете опробовать свой сайт с сервера в Индии в сети 2G или по кабелю из города в США.

Настройки веб-страницы

Выберите местоположение и в дополнительных настройках выберите тип подключения. Вы даже можете автоматизировать тестирование с помощью скриптов (например, для входа на сайт) или с помощью их RESTful API . Это поможет вам включить тестирование подключения в процессы сборки или ведение журнала производительности.

Fiddler поддерживает глобальное проксирование через GeoEdge , а его пользовательские правила можно использовать для имитации скорости модема:

Прокси-сервер Fiddler

Тестирование в поврежденной сети

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

Расширенный контроль трафика Facebook (ATC) — это набор приложений под лицензией BSD, которые можно использовать для формирования трафика и эмуляции нарушенных сетевых условий:

Расширенный контроль трафика Facebook

Facebook даже ввел вторники 2G , чтобы помочь понять, как люди, использующие 2G, используют их продукт. По вторникам сотрудники получают всплывающее окно с возможностью имитировать соединение 2G.

Прокси-сервер Charles HTTP/HTTPS можно использовать для регулировки пропускной способности и задержки . Charles — коммерческое программное обеспечение, но доступна бесплатная пробная версия.

Настройки пропускной способности и задержки прокси-сервера Charles

Дополнительную информацию о Чарльзе можно получить на сайте codewithchris.com .

Борьба с ненадежным соединением и «ложью»

Что такое ложь-фантастика?

Термин «ложь-фи» появился как минимум в 2008 году (когда телефоны выглядели вот так ) и относится к возможности подключения, которая не является тем, чем кажется. Ваш браузер ведет себя так, как будто у него есть подключение, хотя по какой-либо причине его нет.

Неправильно интерпретированное подключение может привести к ухудшению работы, поскольку браузер (или JavaScript) упорно пытается получить ресурсы, а не сдается и выбирает разумный запасной вариант. Ложь на самом деле может быть хуже, чем офлайн; по крайней мере, если устройство определенно отключено от сети, ваш JavaScript может предпринять соответствующие обходные действия.

Лживый Интернет, вероятно, станет более серьезной проблемой, поскольку все больше людей переходят на мобильную связь и отказываются от фиксированного широкополосного доступа. Последние данные переписи населения США показывают отход от фиксированной широкополосной связи . На следующей диаграмме показано использование мобильного интернета дома в 2015 году по сравнению с 2013 годом:

Диаграмма на основе данных переписи населения США демонстрируя переход к мобильной связи от фиксированной широкополосной связи, особенно в домохозяйствах с низкими доходами

Используйте таймауты для обработки прерывистого подключения

Раньше для проверки прерывистого подключения использовались хакерские методы с использованием XHR , но сервис-воркер предлагает более надежные методы установки тайм-аутов сети. Этого можно добиться с помощью Workbox всего несколькими строками кода:

workboxSW.router.registerRoute(
 
'/path/to/image',
  workboxSW
.strategies.networkFirst({networkTimeoutSeconds: 3}),
);

Подробнее о Workbox можно узнать из выступления Джеффа Посника на саммите разработчиков Chrome Workbox: Flexible PWA Libraries .

Функциональность таймаута также разрабатывается для Fetch API , а Streams API должен помочь, оптимизируя доставку контента и избегая монолитных запросов. Джейк Арчибальд дает более подробную информацию о борьбе с ложью в разделе «Суперзарядная загрузка страницы» .

Обратная связь