- PVSM.RU - https://www.pvsm.ru -
Изображение взято с сайта www.aerotime.aero [1]
Всем привет, меня зовут Семён, я руковожу разработкой партнёрских сервисов в ДомКлике. Недавно, работая над оптимизацией загрузки страниц, я наткнулся на интересную заметку от Cloudflare [2] о приоритизации потоков при работе с CDN. Я заинтересовался и решил проверить, поддерживает ли наш CDN эту опцию стандарта HTTP/2? Тех, кому интересно узнать больше, прошу под кат, где мы рассмотрим механизм приоритизации HTTP/2-потоков и протестируем работу некоторых CDN.
Раз уж мы заговорили про HTTP/2 [3], давайте вспомним, что нового нам предложил этот протокол:
Среди прочего, HTTP/2 позволяет приоритизировать [4] потоки при мультиплексировании.
Каждому потоку при мультиплексировании:
Комбинация веса и зависимостей потоков позволяет клиенту (браузеру) построить «дерево приоритизации» для описания порядка получения ответов. В свою очередь, сервер может использовать эту информацию для выделения ресурсов приоритетным ответам.
Важно заметить, что использование механизмов приоритизации потоков клиентом не гарантирует определённого порядка обработки и пересылки сервером.
«Родительские» потоки (от которых зависят другие потоки) получают ресурсы первыми. Если у двух «потомков» одинаковый родитель, потомки получают ресурсы пропорционально значению 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, шрифты), и уже потом загружать менее важные вещи.
С помощью механизма приоритизации потоков браузеры могут сообщать серверу о предпочитаемом порядке получения ресурсов. Однако оказывается, что не все серверы используют этот механизм для аллокации ресурсов.
Патрик Минан [5] из Google создал простой тест [6] для проверки поддержки сервером стандарта HTTP/2 Stream prioritization.
Тест выполняется с помощью специального ресурса на https://www.webpagetest.org [7].
Необходимо задать параметры эксперимента:
image
из предыдущего шага.Тест для проверки CDN написан разработчиком Chrome, поэтому реализует логику приоритизации, используемую в этом браузере.
После запуска тест выполнит следующие шаги:
Как видно из графика, наш CDN обратил внимание на приоритет потоков, перераспределил ресурсы и загрузил изображения с высоким приоритетом в сравнимое с эталонным время, гораздо раньше низкоприоритетных.
Я решил сравнить результаты теста с каким-нибудь известным CDN и взял для этого Cloudfront от AWS. Результат меня удивил:
Как оказалось, Cloudfront не учитывает приоритеты потоков: время выполнения первого приоритетного запроса было на порядок выше эталонного, а второй приоритетный запрос и вовсе закончился позже многих низкоприоритетных.
Мы рассмотрели механизм приоритизации потоков в HTTP/2 и протестировали работу некоторых CDN. Выяснилось, что не все CDN, даже самые крупные и известные, поддерживают эту опцию стандарта HTTP/2.
Стандарт HTTP/2 RFC7540 [4]
Книга O'Reilly High Performance Browser Networking [9]
Репозиторий с тестом CDN by Patrick Meenan [6]
Статья Clouldflare о Stream prioritization [2]
Автор: Семён Багреев
Источник [10]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/chrome/357636
Ссылки в тексте:
[1] www.aerotime.aero: https://www.aerotime.aero/
[2] Cloudflare: https://blog.cloudflare.com/better-http-2-prioritization-for-a-faster-web/
[3] HTTP/2: https://tools.ietf.org/html/rfc7540
[4] HTTP/2 позволяет приоритизировать: https://tools.ietf.org/html/rfc7540#section-5.3
[5] Патрик Минан: https://github.com/pmeenan
[6] создал простой тест: https://github.com/pmeenan/http2priorities
[7] https://www.webpagetest.org: https://www.webpagetest.org
[8] https://www.webpagetest.org/http2priorities.html: https://www.webpagetest.org/http2priorities.html
[9] Книга O'Reilly High Performance Browser Networking: https://hpbn.co/
[10] Источник: https://habr.com/ru/post/521634/?utm_source=habrahabr&utm_medium=rss&utm_campaign=521634
Нажмите здесь для печати.