5 причин, почему сайты грузятся медленно

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

Александр Астапенко из Caspowaрассказал блогу "Нетологии", как увеличить быстродействие сайта. Первая часть - о причинах, из-за которых все грузятся медленно.

Bandwidth и latency

Есть две метрики интернет-соединения, которые помогают определить скорость загрузки сайта.

1. Bandwidth (полоса пропускания) - пропускная способность канала передачи данных. Если объяснять простыми словами, bandwidth - это ширина "трубы", через которую проходят данные. Чем она шире, тем больше данных может идти через нее одновременно.

2. Latency (время ожидания, лэтенси) - время, за которое пакет данных проходит от источника (сервера) до принимающей стороны (браузера пользователя).

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

1. Сетевые задержки

Когда пользователь вводит URL в адресной строке браузера, происходит инициация запроса к серверу. На пути от браузера к серверу запрос проходит больше десяти узлов глобальной сети и сталкивается с различными типами задержек. Рассмотрим их подробнее:

Задержка распространения (propagation delay) - время, которое требуется для того, чтобы данные прошли от одного сетевого узла к другому со скоростью приблизительно в 1,52 раза ниже скорости света. Например, сигнал в оптическом кабеле дойдет от Нью-Йорка до Лондона за 28 мс. Обратный путь займет столько же, следовательно, суммарно один запрос будет идти 56 мс.

Задержка передачи (transmission delay) - время, которое требуется для того, чтобы данные попали в канал передачи. Оно зависит от размера пакетов и скорости обработки данных.

Задержка обработки (processing delay) - время, которое требуется на обработку заголовков пакетов данных, а также на выявление ошибок и определение места назначения пакета.

Задержка в очереди (queuing delay) - время, которое пакет данных тратит на ожидание обработки.

Задержки последней мили (last mile latency) - время, которое требуется, чтобы данные попали из глобальной сети к пользователю через оборудование провайдера и "домашнюю" инфраструктуру (Wi-Fi- или промежуточные роутеры).

Из суммы всех задержек формируется время ожидания - показатель latency, о котором мы говорили в самом начале.

2. Количество передаваемых файлов

Каждая веб-страница содержит несколько десятков файлов (HTML, JavaScript, CSS, изображения, шрифты и так далее). Чтобы отобразить страницу, браузер загружает все файлы с сервера (либо из кэша, если страница загружается повторно). Соответственно, чем больше файлов необходимо загрузить браузеру, тем дольше будет грузиться страница.

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

Современные браузеры поддерживают параллельную загрузку файлов (количество зависит от браузера, но не более 810). Если используется защищенный протокол HTTPS, количество запросов увеличивается на два.

Источник

На диаграмме видно, что в среднем страница состоит из 30100 файлов. Даже если учитывать 68 параллельных соединений, которые устанавливает браузер с сервером, время чисто сетевых задержек составит 23 секунды
(в мобильных сетях - в 23 раза больше).

3. Размер передаваемых файлов

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

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

Когда речь идет о простой веб-странице, браузер загружает большое количество небольших по размеру файлов. В таком ракурсе latency значительно важнее.

Источник

Хотя большинство веб-страниц требуют передачи не более 1 Мб данных, более четверти страниц "весят" все-таки больше 23 Мб. Для соединений с низким bandwidth это уже значительно.

Источник

Средний размер веб-страницы составляет 1,9 Мб (данные на 1 октября 2014 года). На диаграмме видно, что более 60 процентов от общего объема передаваемых данных занимают изображения. Легко сделать вывод, что недостаточная компрессия изображений - это одна из ключевых причин медленной загрузки сайтов.

Источник

Вместе с ростом среднего bandwidth, который предлагают интернет-провайдеры, растет размер страниц и количество запросов на страницу. Так, за последние два года средний размер страницы вырос в два раза - от менее чем 1 Мб до почти 2 Мб. Эта цифра продолжает расти.

4. Загрузка сторонних скриптов

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

Блокирующая загрузка скриптов не позволяет парсеру продолжить рендеринг страницы, пока идет процесс выполнения скриптов. Если возникнут трудности, страница будет грузиться значительно дольше (или загрузится некорректно).

5. Дополнительные задержки Wi-Fi- и мобильных сетей

Wi-Fi-сети

На сегодняшний день параллельно существует несколько стандартов Wi-Fi-сетей - с частотами в 2,4 и 5 ГГц. 2,4-гигагерцевые сети часто используются в публичных местах, и задержки в таких перегруженных сетях достигают 60 мс. Это же касается мест, где пересекаются десятки сетей (современные многоквартирные дома).

"Конкуренция" за свободный канал между точками доступа также приводит к дополнительным задержкам. На производительность Wi-Fi-сети влияет множество факторов, поэтому предсказать, какое влияние это окажет на скорость загрузки сайта, практически невозможно.

Мобильные сети

В зависимости от поколения мобильные сети обеспечивают различные показатели bandwidth и latency.

Основной особенностью мобильных сетей, которая влияет на скорость загрузки сайтов, является использование протокола RRC (radio resource control). Его основное предназначение - сделать передачу данных между мобильным устройством и базовой станцией наименее ресурсоемкой.

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

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

Выводы

• Сетевые задержки, возникающие при передаче данных, составляют суммарный показатель latency запроса.
• Каждая веб-страница состоит из нескольких десятков файлов, которые требуют отдельного запроса к веб-серверу.
• Bandwidth начинает играть роль только при загрузке больших файлов - например, изображений. Ключевой характеристикой сети является latency.
• Сторонние скрипты не контролируются владельцами сайта и приводят к значительным задержкам или некорректной загрузке страниц.
• Мобильные и Wi-Fi-сети несут дополнительные сетевые задержки, которые в значительной степени влияют на скорость загрузки сайта.

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