エクスペディアは、Webアプリケーションとモバイルアプリケーションに様々な最適化を適用することで、フライト検索を最大52%高速化した（ページ使用可能時間）。これらの改善をサポートするため、同社はアプリケーションのオブザーバビリティを改善した。Expedia FlightsのWebアプリケーションは、柔軟性、再利用性、より優れた最適化を可能にするため、マイクロ・フロントエンド・アーキテクチャ (MFA)に移行された。
フライト検索はエクスペディアのユーザートラフィックの大部分を占める。同社はサードパーティAPIのレイテンシーを 直接制御できないため、ユーザーエクスペリエンスを向上させるためにネットワークコールとプログレッシブWebアプリケーション（PWA）を最適化することにした。
チームは、パフォーマンスの最適化をサポートし、導くために、フロントエンドとバックエンドのコンポーネント全体でオブザーバビリティを改善した。エンジニアは、ページ使用可能時間（Reactコンポーネントのロード時間）、非供給オーバーヘッド（サードパーティのAPIコールを除いたバックエンド全体のコールレイテンシー）、最初のコンテントフルペイント（FCP）、インタラクティブまでの時間（TTI）など、複数のメトリクスを特定し、トラッキングを開始した。
/filters:no_upscale()/news/2024/03/expedia-graphql-micro-frontends/en/resources/1expedia-flight-search-1709895754746.jpeg)
待ち時間の短縮（出典：Expedia Technology Blog）
Expedia Flights PWAの構造を変えた基本的なステップの1つは、マイクロ・フロントエンド・アーキテクチャ（MFA）の採用だった。チームはアプリケーションを独立した共有可能なパッケージに分解し、コードの所有権、柔軟性、再利用性、パッケージレベルの最適化を改善した。さらに、チームはGitHub Actionsを使用したGitコミットフックでパッケージサイズの制限を実施し、低速なネットワークでのユーザーエクスペリエンスを向上させる鍵となる小さなパッケージを促進した。
水平および垂直スライシングや非同期クエリ実行を含むGraphQLクエリの最適化により、レイテンシが大幅に改善された。巨大なペイロードを返す検索結果の組み合わせに対して、単一の高価なGraphQLクエリを実行する代わりに、開発者は一連の小さなクエリを使用して、検索オファーのリストをチャンクで取得した。さらに、オファーの詳細のフェッチは別のクエリーに抽出され、ユーザーがオファーを選択したときにのみ実行された。
さらに、JavaScriptとCSSの静的リソースのプリフェッチ、ホームページで選択された検索条件に基づくフライト検索の先取り実行、Apache Cassandraの上に構築されたバックエンド・キャッシング・レイヤーからの検索結果の取得方法の最適化などの改善が行われた。これらの機能強化をすべて適用した後、チームはページ使用可能時間を52％短縮（90パーセンタイル）し、非供給オーバーヘッドを40％削減（90パーセンタイル）したことを確認した。
InfoQは、エクスペディア・グループのソフトウェア・エンジニア、 Heena Gupta氏に連絡を取り、フライト検索最適化の取り組みに関するいくつかの質問をした。
InfoQ: フライト検索アプリケーションの応答性を見事に改善した。プロジェクトでもっとも困難だった点は？
Heena Gupta氏:ご評価ありがとうございます！最初に、パフォーマンスを改善できる可能性のある範囲を把握するために、Flightsのアーキテクチャをブレインストーミングしました。改善すべき点が診断された後は、地域を超えたチームと協力し、多様なチームとコラボレーションすることで、設計の議論をスピードアップすることができました。
もう1つの課題は、カナリア（外形監視）の自動化に関するもので、パフォーマンス低下に関するアラートを自動化するとともに、ノイズとなるアラートを可能な限り最小化できるようにしました。
InfoQ: GrapQLとマイクロ・フロントエンド・アーキテクチャ（MFA）は、業界内で採用が進んでいる。これらのソリューションの採用を検討しているチームに対して、どのようなアドバイスがあるだろうか？
Heena Gupta氏:GraphQLは、フロントエンドとバックエンド間の契約として機能する非常に強力なものだ。GraphQLで作業していると、開発者はしばしば冗長なフラグメントを渡してしまい、Apolloのレスポンスペイロードが大きくなってしまいます。プラットフォームが実際に必要とするGraphQLノードを消費することが重要です。GraphQLを介してスキーマを設計する場合、再利用性を高めるために、スキーマをどのように標準化すれば一般的な目的に役立つかという観点で考えることが極めて重要です。
マイクロ・フロントエンド・アーキテクチャは、確実にフロントエンドアーキテクチャの改善に役立ちます。マイクロ・フロントエンド・アーキテクチャは、各サブモジュールのコードを効率的に記述するのに役立つが、各モジュールを独立してメンテナンスするのと同時に、パッケージオーナーの数も増えてしまいます。しかし、各モジュールに独立してコードを書く自由を与えることは、マイクロ・フロントエンド・アーキテクチャの利点として機能します。