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 に至るまで、ストリーミングを優先する方向に向かう広範なフロントエンド エコシステムのトレンドを確認できることにも興奮しています。
前: