Определение скорости интернета в JavaScript: реальное время

Быстрый ответ

Для измерения скорости интернета можно загрузить файл определенного размера и замерить время, за которое он будет получен. Вот пример кода:

// Размер файла в байтах (500 Кб)
const fileSize = 500 * 1024;

// Включаем счетчик времени
const start = performance.now();

// Загружаем файл (например, "speedTest.png")
fetch('speedTest.png?cache=' + Math.random()) // Обход кэширования
  .then(response => response.blob())
  .then(() => {
    // Вычисляем скорость в Мбит/с
    const speed = fileSize * 8 / (1024 * 1024 * ((performance.now() – start) / 1000));
    console.log(`Скорость соединения: ${speed.toFixed(2)} Мбит/с. Летим как на крыльях ветра!`);
  });

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

Оптимизация производительности: Особенности тестирования

Используйте API сетевой информации

С помощью API сетевой информации можно оценить скорость интернета без загрузки файлов:

if ('connection' in navigator) {
  console.log(`Приближенная скорость: ${navigator.connection.downlink} Мбит/с. Будто в гороскоп глядишь!`);
}

Обратите внимание, что это API не во всех браузерах работает одинаково хорошо, и представленная информация является приблизительной.

Подробнее об этом расскажет наш спикер на видео

Повышайте стабильность результатов с помощью многократных тестов

Для получения более надежной информации о скорости проведите серию загрузок файла и вычислите среднее значение:

async function testSpeed(iterations, file) {
  let speeds = [];

  for (let i = 0; i < iterations; i++) {
    const start = performance.now();
    await fetch(file + "?no-cache=" + Math.random()).then(response => response.blob());
    const end = performance.now();
    speeds.push(fileSize * 8 / (1024 * 1024 * (end – start) / 1000));
  }

  return (speeds.reduce((sum, speed) => sum + speed, 0) / speeds.length).toFixed(2);
}

Увеличивайте точность: Используйте файлы разных размеров

В зависимости от задачи используйте файлы разного размера: меньшие — для быстрых тестов, большие — для подробной проверки.

Гибкость обязательна: Адаптируйтесь к различным условиям устройств

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

Визуализация

Вот схематичная иллюстрация процесса:

1. Начинаем с загрузки небольшого файла (🏁).
2. Запускаем секундомер (⏱️).
3. По окончании загрузки файла останавливаем секундомер (🎌).
4. Рассчитываем скорость как отношение размера файла к времени (🚗💨).

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

Работа с реальными сценариями

Не дайте медленной связи замедлить процесс: Предложите альтернативные варианты

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

Используйте подход "lightweight": Минимизируйте нагрузку на слабые соединения

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

Держите пользователей в курсе: Информируйте о скорости интернета

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

Полезные материалы

1. API сетевой информации – Веб API | MDN — основательное руководство по использованию функций для работы со сведениями о сетевых соединениях в JavaScript.
2. GitHub – beradrian/jsbandwidth: Оценка пропускной способности браузера — исходный код для тестирования скорости интернета с помощью JavaScript и XMLHttpRequest.
3. Как определить скорость интернета с помощью JavaScript? – Stack Overflow — полезные советы от сообщества разработчиков о тестировании скорости интернета.
4. network-speed – npm — весьма полезный NPM-пакет для оценки скорости загрузки и выгрузки данных.
5. Performance: now() method – Веб API | MDN — API для точного измерения времени, что необходимо для анализа производительности.
6. API сетевой информации | Can I use... Support tables for HTML5, CSS3, etc — проверьте поддержку API сетевой информации различными браузерами. Совершенно бесценный инструмент, подобный Сигналу Бэтмана.