Airbnb が HTTP ストリーミングで Web パフォーマンスを向上

InfoQ ホームページニュース Airbnb が HTTP ストリーミングで Web パフォーマンスを向上

2023 年 6 月 20 日 2 分で読む

による

ラファル・ガンカルス

Airbnb は、Web サイトのページ読み込みパフォーマンスを向上させるために HTTP ストリーミングを導入しました。彼らは、ホームページを含むテストされたすべてのページで、First Contentful Paint (FCP) 指標を約 100 ミリ秒短縮しました。また、遅いバックエンドクエリが読み込み時間に与える影響も最小限に抑えられました。

Airbnb は、Web サイトのユーザーにコンテンツをできるだけ早く表示するための改善点を模索しており、特に本文のコンテンツがバックエンドのクエリに依存している場合、完全にレンダリングされた後にのみページ本文を送信することは最高のユーザーエクスペリエンスを提供できないことを確認しました。さらに、Web ページでは通常、コンテンツをユーザーに正しく表示するために、CSS ファイルや外部 Javascript ファイルなどの多くの追加リソースがブラウザによってダウンロードされる必要があります。これらの依存関係により、多くの場合、リソースリクエストのカスケードが発生します。これは、Chrome のウォーターフォールなどのネットワークシーケンスビューで最もよく分かります。

出典: https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408

ブラウザが外部リソースをより早くダウンロードできるようにするためのよく知られた方法は、外部リソースを参照するすべてのタグを HTML ドキュメントの先頭近くのタグ内に配置することです。ブラウザは、タグを読み取るときに外部リソースをダウンロードします。通常、これは HTML ドキュメント全体が配信された後にのみ発生します。コンテンツが遅いバックエンドクエリに基づいている場合は、時間がかかることがあります。

早期フラッシュは、HTTP ストリーミングを利用してブラウザに外部リソースをより早く認識させる 1 つの手法です。 HTML ドキュメントを 2 つの部分に分割し、チャンク転送エンコーディングを使用して別々に送信する必要があります。ブラウザは、HTML ドキュメントの先頭のみを含む最初のチャンクを受信して解析するとすぐに、外部リソースのダウンロードを開始できます。

初期フラッシュ手法は新しいものではありませんが、終了タグを使用せずに HTML の不完全な部分をレンダリングして送信する必要があるため、広く使用されていません。 Airbnb は、Express ベースの NodeJS サーバーを採用して React を使用して Web ページをレンダリングしていますが、以前は HTML ドキュメント全体を 3 つの別々のコンポーネントにレンダリングするために使用されていた単一の React コンポーネントを作り直す必要がありました。

早期フラッシュを使用すると、CSS および Javascript リソースのネットワークウォーターフォールを最適化できますが、ページ本文のレンダリングの遅延には対処できません。最新の Web アプリフレームワークを使用すると、クライアントまたはサーバー側でコンテンツをレンダリングし (サーバーサイドレンダリング)、データを個別に取得することができますが、これには別のネットワークリクエストが必要です。

Airbnb はストリーミングアプローチをさらに推し進め、ページに必要なデータを含む 3 番目のチャンク (遅延データチャンクと呼ばれる) を導入しました。彼らは MutationObserver を使用して、遅延データがロードされるタイミングを検出し、そのデータをアプリケーションのネットワークデータストアに挿入し、基本的に追加のネットワークリクエストを置き換えました。

サーバー側レンダリング (SSR) とクライアント側のデータフェッチが並行して実行される

出典: https://medium.com/airbnb-engineering/improving-performance-with-http-streaming-ba9e72c66408

チームは、テクノロジースタックで HTTP ストリーミングを有効にするために、いくつかの問題を解決する必要がありました。彼らは、NGINX の応答バッファリングと、haproxy ロードバランサーの Nagle アルゴリズムをオフにして、チャンク化された応答が変更されずにブラウザーに到達できるようにしました。

Airbnb のソフトウェアエンジニアである Victor Lin は、チームの経験と HTTP ストリーミングをサポートするエコシステムの成長について次のように要約しています。

途中で課題はありましたが、もともとストリーミング用に設計されていなかったにもかかわらず、既存の React アプリケーションを適応させてストリーミングをサポートすることは、非常に実現可能で堅牢であることがわかりました。また、GraphQL の @defer と @stream から Next.js のストリーミング SSR に至るまで、ストリーミングを優先する方向に向かう広範なフロントエンドエコシステムのトレンドを確認できることにも興奮しています。