Your network connection is slow. Выявляем проблемы с сетью у пользователя

Обо мне

Павел Дадыкин

• 🛢️ Разработка продуктов для нефтегазовой индустрии​​
• 🌍 Geoscience-решения​
• 🧮 Много математических расчётов
• 💻📱🛠️ Desktop, Web, iOS, Android, SDK, Public API

Работа из офиса

Работа в поле

О чём доклад

• ❓ Зачем пользователям знать о проблемах с соединением​
• ⚙️ Как наш сервис должен реагировать​
• 🌐 Какие браузерные API работают, а какие нет
  • 🧭 navigator.onLine
  • 📡 Network Information API
  • 📊 Resource Timing API
  ​

Зачем пользователям знать о проблемах с их соединением?

Главная цель — улучшить UX

Пользователь не всегда понимает, что происходит

Он может ждать live-данные, а они не придут

Уведомление повышает доверие к продукту

Типы проблем

• 🚫 Полное отключение от интернета​​
• 📉 Временные скачки скорости​​
• 🐢 Постоянно низкая пропускная способность

Браузер должен уметь всё это определять

Определяем Online/Offline

          window.navigator.onLine
        

        
if (navigator.onLine) {
  console.log("online");
} else {
  console.log("offline");
}
        
      

События navigator.onLine

        
window.addEventListener('online', () => {/* сеть есть */});
window.addEventListener('offline', () => {/* сети нет */});
        
      

Особенности navigator.onLine

• Показывает только, есть ли подключение к сети​
• Не делает пинг, запрос или проверку доступности
• Нет информации о скорости или стабильности

navigator.onLine === true

• 😀 С соединением всё в порядке​
• 🙁 DNS не работает​
• 🙁 Wi-Fi есть, но интернет «упал»
• 🙁 Wi-Fi требует авторизации
• 🙁 Проблемы с VPN

Что же показывает navigator.onLine?

• false → проблемы с сетью точно есть 🙁​
• true → возможно, с сетью всё в порядке 🤨​

Как же определить скорость соединения?

Network Information API

          window.navigator.connection
        

Свойства navigator.connection

Network Information API

Network Information API Sample

Resource Timing API

• API для анализа времени загрузки ресурсов на странице
• Позволяет отслеживать фактическую производительность на клиенте
• Работает с: img, script, fetch, link, xhr и др.
• Очень гибкий инструмент

Resource Timing API

Пример Performance Resource Timing

Типичные метрики Resource Timing

Типичные метрики Resource Timing

Timing в Developer Tools

📊 Сбор пользовательских метрик

Благодаря Resource Timing API можно собирать:
• 🖼️ время загрузки изображений, скриптов, иконок, шрифтов
• 🐢 как влияет скорость соединения на время отображения UI
• 🌍 географию/сети пользователей с медленными загрузками
​

Определяем медленное соединение

1. Следим за fetch-запросами
2. Смотрим время загрузки (duration)
3. Смотрим объём (transferSize, в байтах)
4. Вычисляем скорость (transferSize / duration)
5. Если скорость ниже какого-то порога – сигнализируем
​

Получение информации о запросах

        
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log(`${entry.name}, ${entry.startTime}`);
  }
});

observer.observe({ type: 'resource' });
        
      

Типы записей PerformanceObserver

Вычисление скорости ресурса

        
const entries = list.getEntries();
const lastEntry = entries[entries.length - 1];

if (lastEntry.initiatorType === 'fetch') {
  const size = lastEntry.transferSize;
  const duration = lastEntry.duration;
  const speed = size / duration;
  const isConnectionFast = speed > SLOW_CONNECTION_SPEED;
}
        
      

Фильтрация записей

• Не учитываем записи с duration < 100 ms​
• Не учитываем записи объёмом меньше 1536 байт

Что же считать «низкой» скоростью?

Оценка скорости соединения

WebSockets

• WebSocket не попадает в список ресурсов, отслеживаемых через Resource Timing API
• Это постоянное соединение, а Resource Timing предназначен для одноразовых загрузок ресурсов

WebSockets

        
const wsStart = performance.now();
const socket = new WebSocket('wss://...');
socket.addEventListener('open', () => {
  const wsConnected = performance.now();
  console.log(`Connected in ${wsConnected - wsStart}ms`);
});
        
      

Что может пойти не так?

Проблемы с CORS

            
console.log(entry.transferSize); // будет 0
console.log(entry.responseEnd); // тоже 0
            
          

Проблемы с CORS

            
Timing-Allow-Origin: https://yourdomain.com
или
Timing-Allow-Origin: *
            
          

Проблемы с CORS

            
if (entry.name.startsWith(window.location.origin)) {
  // считаем скорость
}
            
          

Как наш сервис должен реагировать?

Показываем уведомление

Отображение уведомлений

• 🌐 Сеть нестабильна: возможны скачки и падения
• 📉 Замеры неточные: 1 медленный ресурс ≠ медленная сеть
• 💡 Уведомляем только по делу: когда это влияет на UX

Блокируем интерактивные действия, которые могут привести к ошибке

Подгружаем облегчённую версию контента

Начинаем повторную отправку запросов

Как же это всё проверить?

Эмуляция в браузере

Выводы

• 📢 Пользователи должны знать о проблемах с сетью​
• 🧭 navigator.onLine работает только, когда точно нет сети
• 🚫 Network Information API не работает
• 📏 Используйте Resource Timing API
• ⚠️ Не забывайте про CORS