Rivalry2

HTML Diff

1 added 1 removed

Original 2026-01-01

Modified 2026-02-26

1 Сайты, как и другие источники информации в интернете, доступны только при наличии соединения с сетью. Выражение "соединение с сетью" достаточно сложное, так как есть разница между проводным соединением в квартире и мобильным соединением посреди леса. В последнем случае оно может быть или очень слабым, или совсем отсутствовать.

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

3 В этом уроке разберем, что нам дает понимание скорости работы интернета, насколько 4G быстрее 3G и почему уже на этапе разработки необходимо учитывать различия в скорости соединения.

4 <h2>Скорость соединения</h2>

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

6 Сразу сложно сказать много это или мало, также не понятно, что значат 100Мбит/с.

7 В компьютерах основная единица измерения - бит. Именно из них всё состоит. Мы можем вычислить скорость в мегабайт в секунду. Для этого нужно поделить количество мегабит на восемь, так как в одном байте 8 бит. Получится, что скорость соединения равна 12.5 мегабайт в секунду.

8 Например, одна минута видео, которая записана в разрешении 1920x1080 или FullHD, в среднем весит 30 мегабайт. Значит, с вычисленной скоростью можно смотреть видео без прерываний. Одну минуту такого видео наш интернет способен скачать за три секунды. Поэтому 12.5 мегабайт в секунду - это хорошая скорость, которая позволяет пользоваться интернетом без задержек.

9 Сайты весят значительно меньше, чем одно видео. Например, главная страница Хекслета на январь 2023 года весит 11.7 мегабайт. Получается, ее можно скачать на компьютере за одну секунду при скорости интернета в 100Мбит/с.

10 В мобильном интернете распространены два стандарта подключения к интернету:

11 <ul><li>3G</li>

12 <li>4G</li>

13 </ul>Сравним их по скорости соединения с интернетом:

14 <ul><li>3G - в зависимости от подстандарта скорость может быть 14.4Мбит/с или 42Мбит/с. Если перевести в мегабайты, то максимальная скорость составит 5.25 мегабайта в секунду. Это в два раза меньше скорости при подключении интернета в квартире из примера выше</li>

15 <li>4G - максимальная скорость считается 1Гбит/с (один гигабит в секунду). Но в реальности скорость сопоставима со скоростью домашнего интернета и равняется 100Мбит/с</li>

16 </ul>Основная проблема показателей скорости интернета в том, что это теоретические данные. То есть можно не получить заявленную скорость по разным причинам. Например:

17 <ul><li>Удаление от мобильной станции</li>

18 <li>Плохая погода</li>

19 <li>Большое количество препятствий в виде домов, машин, деревьев, на пути от станции до вашего устройства</li>

20 </ul>Эти факторы могут снизить скорость соединения или отключить от интернета. Поэтому скорость соединения в городе и в лесу различаются. Приложение должно учитывать это, особенно, если оно может помочь человеку в трудной ситуации. Например: карты, приложение для вызова помощи, мессенджер и так далее.

21 <h2>Загрузка сайта</h2>

22 На примере страницы<a>Хекслета</a>проверим, как загружается сайт при низкой скорости интернета. В дальнейшем разберем, как самостоятельно установить разные скорости соединения для тестирования.

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

24 Весь процесс загрузки страницы Хекслета можно разбить на три части:

25 <ul><li>Загрузка тела страницы. Сюда входит текст, его расположение и расположение блоков:</li>

26 </ul><ul><li>Загрузка скриптов и данных, таких как шрифты:</li>

27 </ul><ul><li>Загрузка визуального оформления. Изображения и так далее:</li>

28 </ul>С первого шага загрузки страницы доступен весь текст, его расположение и смысловое значение. То есть, если во время загрузки пропадет соединение с интернетом, то основной посыл страницы останется доступен пользователю для изучения.

29 То, как будет загружаться страница, отчасти зависит от разработчиков. Если выдать пользователю всё, что есть, то видимая загрузка может остановиться в начале и появиться в конце, когда все данные будут скачаны. Это плохой вариант, так как можно оставить пользователя на некоторое время перед белым экраном.

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

31 Представьте, что в начале страницы находится большой код на JavaScript. Тогда браузер не будет ничего загружать до тех пор, пока не обработает и не выполнит весь код. Это может занимать четверть секунды, а может и несколько секунд - всё зависит от сложности и объема кода.

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

33 Именно так загрузится страница Хекслета при плохом соединении с интернетом. На самом деле и при хорошем соединении процесс не изменится, только он произойдет за очень короткое время. Мы даже не успеваем увидеть все стадии загрузки.

34 <h2>Тестирование скорости</h2>

35 В инструментах разработчика браузеров есть функция, которая позволяет эмулировать разную скорость соединения с интернетом. То есть искусственно ограничить скорость, чтобы протестировать приложение. Разберем функцию на примере инструмента разработчика в Firefox.

36 Чтобы открыть инструмент разработчика, нужно воспользоваться комбинацией клавиш Ctrl + Shift + I или клавишей F12. Затем нужно перейти во вкладкуNetwork.

37 В этой вкладке доступно всё, что связано с загрузкой нашего проекта: тип информации, его адрес, вес и время загрузки:

38 Попробуйте изучить эту информацию на любом сайте.

39 Чтобы изменить скорость загрузки, воспользуемся выпадающим списком в правой части вкладки. По умолчанию на ней написано "No Throttling" - "Без ограничений" или "Без регулировки". Если открыть этот список, то можно увидеть предустановленные варианты для разных типов соединения:

40 <ul><li>GPRS: 50 Кбит/с (загрузка), 20 Кбит/с (отправка), 500 мс (задержка)</li>

41 <li>Regular 2G: 250 Кбит/с (загрузка), 50 Кбит/с (отправка), 300 мс (задержка)</li>

42 <li>Good 2G: 450 Кбит/с (загрузка), 150 Кбит/с (отправка), 150 мс (задержка)</li>

43 <li>Regular 3G: 750 Кбит/с (загрузка), 250 Кбит/с (отправка), 100 мс (задержка)</li>

44 <li>Good 3G: 1.5 Мбит/с (загрузка), 750 Кбит/с (отправка), 40 мс (задержка)</li>

45 <li>Regular 4G/LTE: 4 Мбит/с (загрузка), 3 Мбит/с (отправка), 20 мс (задержка)</li>

46 <li>DSL: 2 Мбит/с (загрузка), 1 Мбит/с (отправка), 5 мс (задержка)</li>

47 <li>Wi-Fi: Не имеет строго определённых параметров в DevTools по умолчанию, поскольку скорость Wi-Fi может сильно варьироваться в зависимости от спецификаций, но для эмуляции можно использовать значения, близкие к реальным условиям использования, например, 30-50 Мбит/с для загрузки и 10-30 Мбит/с для отправки, с относительно низкой задержкой.</li>

48 </ul>Чтобы изменить скорость, выполните два действия:

49 <ol><li>Выберите нужный вариант скорости соединения</li>

50 <li>Перезагрузите страницу. Для этого можно использовать клавишу F5</li>

51 - </ol>Сценарий тестирования зависит от приложения и технического задания. Если это приложение помогает людям ориентироваться в пространстве или обмениваться сообщениями, то оно должно достаточно быстро работать даже при нестабильном соединении. Это связано с тем, что такие приложения могут использоваться в критической ситуации. К такому же принципу могут относиться банковские приложения и карты.

51 + </ol>Сценарий тестирования зависит от приложения и технического задания. Если это приложение помогает людям ориентироваться в пространстве или обмениваться сообщениями, то оно должно достаточно быстро работать даже при нестабильном соединен��и. Это связано с тем, что такие приложения могут использоваться в критической ситуации. К такому же принципу могут относиться банковские приложения и карты.

52 Если технического задания нет, то можно проверить следующие пункты:

53 <ol><li>Страница отображает текст еще до загрузки изображений или видео</li>

54 <li>Никакой из компонентов страницы не ругается на отсутствие соединения, если оно есть</li>

55 <li>Отсутствуют ошибки в JavaScript, которые не появляются при обычном соединении. Это можно увидеть на вкладке Console</li>

56 </ol><h2>Выводы</h2>

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

58 Так же мы рассмотрели загрузку одной из страниц Хекслета при низкой скорости соединения. Мы выяснили, что один из главных факторов при низкой скорости - быстрая отрисовка текста и его расположения. Это позволяет даже при обрыве соединения прочитать информацию.

59 В качестве инструмента тестирования можно использовать инструменты разработчика. В нем есть специальная вкладка Network, которая позволяет проанализировать количество скачиваемого контента, его вес и время загрузки. Так же на этой вкладке можно установить тип соединения для тестирования соединения.