Открыть список
Как стать автором
Обновить
263.74
Рейтинг
ДомКлик
Место силы

А ваш CDN умеет так?

ДомКликРазработка веб-сайтовКлиентская оптимизацияСерверная оптимизацияБраузеры


Изображение взято с сайта www.aerotime.aero


Всем привет, меня зовут Семён, я руковожу разработкой партнёрских сервисов в ДомКлике. Недавно, работая над оптимизацией загрузки страниц, я наткнулся на интересную заметку от Cloudflare о приоритизации потоков при работе с CDN. Я заинтересовался и решил проверить, поддерживает ли наш CDN эту опцию стандарта HTTP/2? Тех, кому интересно узнать больше, прошу под кат, где мы рассмотрим механизм приоритизации HTTP/2-потоков и протестируем работу некоторых CDN.


Немного теории. HTTP/2


Раз уж мы заговорили про HTTP/2, давайте вспомним, что нового нам предложил этот протокол:


  • HTTP/2 бинарный, не текстовый.
  • Мультиплексированные потоки (возможность параллельно пересылать фреймы из многих потоков, используя одно TCP-соединение).
  • Сжатие заголовков.
  • Сервер пуш.
  • Расширение Application-Layer Protocol Negotiation (ALPN) для быстрой работы по TLS.
  • Отпала необходимость шардировать домены со статикой (практика создания нескольких доменов, например, static[1-3], призванная обойти ограничения браузеров по количеству параллельных подключений к одному хосту).

Среди прочего, HTTP/2 позволяет приоритизировать потоки при мультиплексировании.


Как работает приоритизация потоков в HTTP/2


Каждому потоку при мультиплексировании:


  • можно присвоить вес — целочисленное значение от 1 до 256;
  • можно присвоить номер потока, от которого он зависит.

Комбинация веса и зависимостей потоков позволяет клиенту (браузеру) построить «дерево приоритизации» для описания порядка получения ответов. В свою очередь, сервер может использовать эту информацию для выделения ресурсов приоритетным ответам.


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

«Родительские» потоки (от которых зависят другие потоки) получают ресурсы первыми. Если у двух «потомков» одинаковый родитель, потомки получают ресурсы пропорционально значению weight в заголовке HTTP/2 Stream.


Например, есть два потока, которые запускаются в рамках одного TCP-соединения:


HTTP/2 Stream: 57, weight 15, depends on 55, EXCLUSIVE

HTTP/2 Stream: 63, weight 5, depends on 55, EXCLUSIVE

Оба потока зависят от потока №55, поэтому он должен первым получить ресурсы сервера (CPU, memory, output buffers) на выполнение. Далее ресурсы должны быть распределены между потоками 57 и 63 согласно весам: 57 должен получить 15/20, а 63 — 5/20, т.е. поток 57 должен получить в три раза больше ресурсов.


Почему вообще это важно?


При использовании HTTP/2 клиент открывает одно соединение к серверу. По этому соединению загружается вся статика: CSS, JS, изображения, шрифты и т.д. В каком порядке их загружать? А может, всё вместе параллельно?


Загружать все артефакты одновременно — плохо, так как это увеличивает общее время загрузки страницы и зачастую не имеет смысла для пользователя на первом экране. Скажем, у нас есть страница, на которой отображается тридцать изображений, но на первом экране пользователь видит только пять из них. В этом случае лучше загрузить первые пять изображений, а остальные после того, как пользователь увидит первый экран. Или, например, есть JS-скрипты, которые загружаются с async или defer — их тоже можно оставить на потом. Т.е. сначала необходимо использовать всю ширину канала для загрузки артефактов, которые помогут пользователю увидеть первый экран (CSS, JS, шрифты), и уже потом загружать менее важные вещи.


А что же CDN?


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


Патрик Минан из Google создал простой тест для проверки поддержки сервером стандарта HTTP/2 Stream prioritization.


Тест


Тест выполняется с помощью специального ресурса на https://www.webpagetest.org.


Необходимо задать параметры эксперимента:


  • Выбрать картинку размером около 100 Кб на проверяемом ресурсе;.
  • Web Site URL: указать https://www.webpagetest.org/http2priorities.html с параметром image из предыдущего шага.
  • Browser выбрать Chrome.
  • Location не так важно, но логично выбрать ближе к edge location вашей CDN.
  • Connection лучше указать помедленнее, "3G Fast" (1,6 Мбит/с. / 768 Кбит/с., 150 мс RTT).
  • Runs указать побольше, до девяти.

Тест для проверки CDN написан разработчиком Chrome, поэтому реализует логику приоритизации, используемую в этом браузере.

После запуска тест выполнит следующие шаги:


  • Загрузит HTML документ (запрос №1).
  • Дважды загрузит указанную в тесте картинку (запросы №2 и №3).
  • Установит и «прогреет» TCP-соединение с сервером.
  • Добавит уникальный хэш к каждому из запросов, чтобы убедиться, что изображения будут доставлены по сети, а не из кэша.
  • Запросит изображение с сервера 30 раз с низким приоритетом (запросы №4-33).
  • Подождёт, пока два низкоприоритетных изображения загрузятся, чтобы дать серверу возможность заполнить буферы данными.
  • Запросит изображение с высоким приоритетом и дождётся полной загрузки (запрос №34).
  • Запросит изображение с высоким приоритетом (запрос №35).

Результаты теста


CDN, который используем мы (внешний подрядчик)



Как видно из графика, наш CDN обратил внимание на приоритет потоков, перераспределил ресурсы и загрузил изображения с высоким приоритетом в сравнимое с эталонным время, гораздо раньше низкоприоритетных.


Cloudfront


Я решил сравнить результаты теста с каким-нибудь известным CDN и взял для этого Cloudfront от AWS. Результат меня удивил:



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


Заключение


Мы рассмотрели механизм приоритизации потоков в HTTP/2 и протестировали работу некоторых CDN. Выяснилось, что не все CDN, даже самые крупные и известные, поддерживают эту опцию стандарта HTTP/2.


Ссылки


Стандарт HTTP/2 RFC7540
Книга O'Reilly High Performance Browser Networking
Репозиторий с тестом CDN by Patrick Meenan
Статья Clouldflare о Stream prioritization

Теги:http/2chromecdnбраузерыperformanceperformance optimization
Хабы: ДомКлик Разработка веб-сайтов Клиентская оптимизация Серверная оптимизация Браузеры
Всего голосов 28: ↑28 и ↓0 +28
Просмотры4.4K

Похожие публикации

Лучшие публикации за сутки

Информация

Дата основания
Местоположение
Россия
Сайт
domclick.ru
Численность
501–1 000 человек
Дата регистрации
Представитель
Лера Лисичкина

Блог на Хабре