Airbnb повышает производительность Интернета с помощью потоковой передачи HTTP

InfoQ Домашняя страница Новости Airbnb повышает производительность Интернета с помощью потоковой передачи HTTP

20 июня 2023 г., чтение на 2 минуты

Рафаль Ганчарц

Airbnb представила потоковую передачу HTTP, чтобы улучшить производительность загрузки страниц своего веб-сайта. Они снизили показатель First Contentful Paint (FCP) примерно на 100 миллисекунд на каждой протестированной странице, включая домашнюю. Они также свели к минимуму влияние медленных внутренних запросов на время загрузки.

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

Источник: https://medium.com/airbnb-engineering/improving- Performance-with-http-streaming-ba9e72c66408.

Хорошо известная практика, позволяющая браузеру раньше загружать внешние ресурсы, заключается в размещении всех тегов, ссылающихся на них, внутри тега в начале HTML-документа. Браузер загружает внешние ресурсы при чтении тега . Обычно это происходит только после доставки всего HTML-документа, что может занять некоторое время, если контент основан на медленных внутренних запросах.

Ранняя очистка — это один из методов, который использует потоковую передачу HTTP, чтобы браузер мог узнать о внешних ресурсах еще раньше. Для этого требуется разделить HTML-документ на две части и отправить их отдельно с использованием фрагментированного кодирования передачи. Браузер может начать загрузку внешних ресурсов, как только будет получен и проанализирован исходный фрагмент, содержащий только начало HTML-документа.

Несмотря на то, что метод ранней очистки не нов, он не получил широкого распространения, поскольку требует рендеринга и отправки неполных частей HTML без закрывающих тегов. Airbnb использует сервер NodeJS на базе Express для рендеринга веб-страниц с помощью React, и ей пришлось переработать единственный компонент React, который ранее использовался для рендеринга всего HTML-документа, на три отдельных компонента.

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

Airbnb продолжила свой подход к потоковой передаче, представив третий фрагмент, который они назвали отложенным блоком данных, содержащий данные, необходимые странице. Они использовали MutationObserver для определения момента загрузки отложенных данных и вводили их в сетевое хранилище данных приложения, по сути заменяя дополнительный сетевой запрос.

Рендеринг на стороне сервера (SSR) и выборка данных на стороне клиента выполняются параллельно.

Источник: https://medium.com/airbnb-engineering/improving- Performance-with-http-streaming-ba9e72c66408.

Команде пришлось решить некоторые проблемы, чтобы включить потоковую передачу HTTP в своем технологическом стеке. Они отключили буферизацию ответов в NGINX и алгоритм Нэгла в своем балансировщике нагрузки haproxy, чтобы позволить фрагментированным ответам доходить до браузера без изменений.

Виктор Лин, инженер-программист Airbnb, резюмирует опыт своей команды и растущую экосистему, поддерживающую потоковую передачу HTTP:

Хотя на этом пути были трудности, мы обнаружили, что адаптация нашего существующего приложения React для поддержки потоковой передачи была очень осуществимой и надежной, несмотря на то, что изначально она не была предназначена для этого. Мы также рады видеть более широкую тенденцию в экосистеме внешнего интерфейса в направлении расстановки приоритетов потоковой передачи: от @defer и @stream в GraphQL до потоковой SSR в Next.js.