[Разработка веб-сайтов, Клиентская оптимизация, Серверная оптимизация, Браузеры] А ваш CDN умеет так?
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Изображение взято с сайта 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 обратил внимание на приоритет потоков, перераспределил ресурсы и загрузил изображения с высоким приоритетом в сравнимое с эталонным время, гораздо раньше низкоприоритетных.
Cloudflare
Я решил сравнить результаты теста с каким-нибудь известным CDN и взял для этого Cloudflare от AWS. Результат меня удивил:
Как оказалось, Cloudflare не учитывает приоритеты потоков: время выполнения первого приоритетного запроса было на порядок выше эталонного, а второй приоритетный запрос и вовсе закончился позже многих низкоприоритетных.
Заключение
Мы рассмотрели механизм приоритизации потоков в HTTP/2 и протестировали работу некоторых CDN. Выяснилось, что не все CDN, даже самые крупные и известные, поддерживают эту опцию стандарта HTTP/2.
Ссылки
Стандарт HTTP/2 RFC7540
Книга O'Reilly High Performance Browser Networking
Репозиторий с тестом CDN by Patrick Meenan
Статья Clouldflare о Stream prioritization
===========
Источник:
habr.com
===========
Похожие новости:
- [Разработка веб-сайтов, Python, Django] Отношение один к одному: связывание модели пользователя с кастомной моделью профиля в Django (перевод)
- [JavaScript, Программирование, Разработка веб-сайтов] Основные команды bash, git, npm и yarn, а также немного о package.json и semver
- [Laravel, PHP, Разработка веб-сайтов] Laravel–Дайджест (28 сентября – 4 октября 2020)
- [Веб-дизайн, Разработка веб-сайтов, Google Web Toolkit, Поисковая оптимизация, Голосовые интерфейсы] Современное SEO: качество страниц
- [Браузеры] Изучаем субъективную реальность
- [Разработка веб-сайтов, Java] Разработка веб-приложений на встраиваемом портале
- [Высокая производительность, Разработка веб-сайтов, Поисковые технологии, Социальные сети и сообщества] Vespa лучше Elasticsearch для поиска пар среди миллионов мужчин и женщин (перевод)
- [JavaScript, Программирование, Разработка веб-сайтов] Drag'n'Drop API: пример использования
- [Высокая производительность, Работа с видео, Сетевые технологии, Распределённые системы] Готовим видеосервис к нагрузке в сотни Гбит/с. Доклад Яндекса
- [Серверная оптимизация, Серверное администрирование, Хранение данных, Хранилища данных] Я был неправ. Будущее за CRDT (перевод)
Теги для поиска: #_razrabotka_vebsajtov (Разработка веб-сайтов), #_klientskaja_optimizatsija (Клиентская оптимизация), #_servernaja_optimizatsija (Серверная оптимизация), #_brauzery (Браузеры), #_http/2, #_chrome, #_cdn, #_brauzery (браузеры), #_performance, #_performance_optimization, #_blog_kompanii_domklik (
Блог компании ДомКлик
), #_razrabotka_vebsajtov (
Разработка веб-сайтов
), #_klientskaja_optimizatsija (
Клиентская оптимизация
), #_servernaja_optimizatsija (
Серверная оптимизация
), #_brauzery (
Браузеры
)
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 14:14
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
 Изображение взято с сайта www.aerotime.aero Всем привет, меня зовут Семён, я руковожу разработкой партнёрских сервисов в ДомКлике. Недавно, работая над оптимизацией загрузки страниц, я наткнулся на интересную заметку от Cloudflare о приоритизации потоков при работе с CDN. Я заинтересовался и решил проверить, поддерживает ли наш CDN эту опцию стандарта HTTP/2? Тех, кому интересно узнать больше, прошу под кат, где мы рассмотрим механизм приоритизации HTTP/2-потоков и протестируем работу некоторых CDN. Немного теории. HTTP/2 Раз уж мы заговорили про HTTP/2, давайте вспомним, что нового нам предложил этот протокол:
Среди прочего, HTTP/2 позволяет приоритизировать потоки при мультиплексировании. Как работает приоритизация потоков в HTTP/2 Каждому потоку при мультиплексировании:
Комбинация веса и зависимостей потоков позволяет клиенту (браузеру) построить «дерево приоритизации» для описания порядка получения ответов. В свою очередь, сервер может использовать эту информацию для выделения ресурсов приоритетным ответам. Важно заметить, что использование механизмов приоритизации потоков клиентом не гарантирует определённого порядка обработки и пересылки сервером.
Например, есть два потока, которые запускаются в рамках одного 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. Необходимо задать параметры эксперимента:
Тест для проверки CDN написан разработчиком Chrome, поэтому реализует логику приоритизации, используемую в этом браузере.
Результаты теста CDN, который используем мы (внешний подрядчик)  Как видно из графика, наш CDN обратил внимание на приоритет потоков, перераспределил ресурсы и загрузил изображения с высоким приоритетом в сравнимое с эталонным время, гораздо раньше низкоприоритетных. Cloudflare Я решил сравнить результаты теста с каким-нибудь известным CDN и взял для этого Cloudflare от AWS. Результат меня удивил:  Как оказалось, Cloudflare не учитывает приоритеты потоков: время выполнения первого приоритетного запроса было на порядок выше эталонного, а второй приоритетный запрос и вовсе закончился позже многих низкоприоритетных. Заключение Мы рассмотрели механизм приоритизации потоков в HTTP/2 и протестировали работу некоторых CDN. Выяснилось, что не все CDN, даже самые крупные и известные, поддерживают эту опцию стандарта HTTP/2. Ссылки Стандарт HTTP/2 RFC7540 Книга O'Reilly High Performance Browser Networking Репозиторий с тестом CDN by Patrick Meenan Статья Clouldflare о Stream prioritization =========== Источник: habr.com =========== Похожие новости:
Блог компании ДомКлик ), #_razrabotka_vebsajtov ( Разработка веб-сайтов ), #_klientskaja_optimizatsija ( Клиентская оптимизация ), #_servernaja_optimizatsija ( Серверная оптимизация ), #_brauzery ( Браузеры ) |
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 14:14
Часовой пояс: UTC + 5