プロダクトの詳細ページのインタラクティビティを最適化し、Lighthouse での FID の最大値を 90% 削減、Chrome ユーザー エクスペリエンス レポートの FID を 9% 改善。
Mercado Libre は、ラテンアメリカ最大の e コマースと決済のエコシステムです。18 か国に拠点があり、ブラジル、メキシコ、アルゼンチンのマーケット リーダー（ユニーク ユーザー数とページビュー数に基づく）です。
同社では、以前からウェブ パフォーマンスに重点的に取り組んできましたが、最近では、パフォーマンスをモニタリングし、サイトのさまざまな部分に最適化を適用するチームを結成しました。
この記事では、Mercado Libre のフロントエンド アーキテクチャ チームの Guille Paz、Pablo Carminatti、Oleh Burkhay が、ウェブに関する主な指標の一つである First Input Delay（FID） とそのラボプロキシである Total Blocking Time（TBT）を最適化するために行った作業の概要を説明します。
90%
Lighthouse での FID の最大値の減少率
9%
CrUX で FID を「速い」と考えるユーザーが増えている
長時間のタスク、First Input Delay、Total Blocking Time
高コストの JavaScript コードを実行すると、長時間のタスク（ブラウザのメインスレッドで 50 ミリ秒以上実行されるタスク）が発生する可能性があります。
FID（First Input Delay）は、ユーザーが最初にページを操作してから（たとえば、リンクをクリック）、ブラウザがその操作に応じてイベント ハンドラの処理を実際に開始できるまでの時間を測定します。高コストな JavaScript コードを実行するサイトでは長時間のタスクがいくつか発生する可能性があり、FID に悪影響を及ぼすことになります。
優れたユーザー エクスペリエンスを提供するため、サイトは初回入力遅延を 100 ミリ秒未満にする必要があります。
Mercado Libre のサイトは、ほとんどのセクションで良好なパフォーマンスを示していますが、Chrome ユーザー エクスペリエンス レポートによると、商品の詳細ページの FID が低いことが判明しました。この情報に基づいて、同社はサイト上の商品ページのインタラクティビティを向上させることに力を入れることにしました。
ユーザーはこのページを使用して複雑な操作を行えるため、重要な機能を妨げずにインタラクティビティを最適化することでした。
商品詳細ページのインタラクティビティを測定する
FID は実際のユーザーを必要とするため、ラボでは測定できません。ただし、Total Blocking Time（TBT）指標はラボで測定可能で、現場の FID とよく相関しており、インタラクティビティに影響する問題も捕捉できます。
たとえば、次のトレースでは、メインスレッドでのタスクの実行に費やされた合計時間は 560 ms ですが、合計ブロック時間（各タスクで 50 ms を超える部分の合計）と見なされるのは 345 ms のみです。
Mercado Libre は、実際の商品詳細ページのインタラクティビティを測定して改善するために、ラボのプロキシ指標として TBT を採用しました。
その一般的なアプローチは次のとおりです。
- WebPageTest を使用して、実際のデバイスでメインスレッドをビジー状態にしているスクリプトを正確に特定します。
- Lighthouse を使用して、[Max Potential First Input Delay（Max Potential FID）] の変更による影響を確認します。
WebPageTest を使用して長いタスクを可視化する
WebPageTest（WPT）は、世界中のさまざまな場所にある実際のデバイスでテストを実行できるウェブ パフォーマンス ツールです。
Mercado Libre は WPT を使用して、実際のユーザーに似たデバイスタイプと場所を選択して、ユーザーのエクスペリエンスを再現しました。具体的には、メキシコの Mercado Libre ユーザーとほぼ同じ操作性を提供するため、Moto 4G デバイスとバージニア州ダレスを選択しました。Mercado Libre は、WPT のメインスレッド ビューを監視することで、複数の長いタスクが連続して 2 秒間メインスレッドをブロックしていることを発見しました。
対応するウォーターフォールを分析すると、この 2 秒間の大部分が分析モジュールからのものであることがわかりました。アプリケーションのメインバンドル サイズは大きく（950 KB）、解析、コンパイル、実行に時間がかかりました。
Lighthouse を使用して最大 FID を決定する
Lighthouse では、デバイスや場所を選択することはできませんが、サイトを診断してパフォーマンスに関する推奨事項を取得するのに非常に便利なツールです。
Mercado Libre が商品の詳細ページで Lighthouse を実行したところ、赤色でマークされた指標は [Max Potential FID] のみで、値が 1,710 ミリ秒であることが判明しました。
これに基づき、Mercado Libre は、Lighthouse や WebPageTest などのラボツールで最大 FID スコアを改善するという目標を設定しました。この改善は実際のユーザーに影響するため、Chrome ユーザー エクスペリエンス レポートなどの実際のユーザー モニタリング ツールに反映されると想定しました。
時間のかかるタスクを最適化する
1 回目の反復
Mercado Libre は、メインスレッド トレースに基づいて、高コストなコードを実行していた 2 つのモジュールを最適化するという目標を設定しました。
そこで同社は、内部トラッキング モジュールのパフォーマンスの最適化を開始しました。このモジュールには、モジュールの動作に重要ではない CPU 負荷の高いタスクが含まれていたため、安全に削除できました。これにより、サイト全体の JavaScript が 2% 削減されました。
その後、一般的なバンドルサイズの改善に取り組み始めました。
Mercado Libre は、webpack-bundle-analyzer を使用して最適化の機会を検出しました。
- 当初は、完全な Lodash モジュールが必要でした。これは、ライブラリ全体ではなく Lodash のサブセットのみを読み込むためのメソッドごとの require に置き換えられ、Lodash をさらに圧縮するために lodash-webpack-plugin と組み合わせて使用されます。
また、次の Babel 最適化も適用しました。
- @babel/plugin-transform-runtime を使用して、コード全体で Babel のヘルパーを再利用し、バンドルのサイズを大幅に削減します。
- メインバンドル内の大きな構成ファイルを削除するために、ビルド時に babel-plugin-search-and-replace を使用してトークンを置き換える。
- babel-plugin-transform-react-remove-prop-types を追加し、プロパティタイプを削除することで余分なバイトを節約します。
これらの最適化の結果、バンドルサイズは約 16% 削減されました。
効果の測定
この変更により、Mercado Libre の連続する長時間タスクが 2 秒から 1 秒に短縮されました。
Lighthouse の結果、初回入力遅延の最大許容値が 57% 短縮されました。
2 回目の反復
チームはその後の改善点を見つけるために、長いタスクの調査を続けました。
この情報に基づいて、同社は以下の変更を実施することを決定しました。
- 引き続きメインバンドルのサイズを縮小し、コンパイルと解析の時間を最適化します（異なるモジュール間で重複する依存関係を削除するなど）。
- コンポーネント レベルでコード分割を適用して、JavaScript を小さなチャンクに分割し、さまざまなコンポーネントをスマートに読み込めるようにします。
- コンポーネントのハイドレーションを延期して、メインスレッドをスマートに使用できるようにします。この手法は、一般に部分ハイドレーションと呼ばれます。
効果の測定
結果の WebPageTest トレースでは、JS の実行のさらに小さなチャンクが示されていました。
また、Lighthouse での FID の最大可能時間がさらに 60% 短縮されました。
実際のユーザーの進捗状況を可視化する
WebPageTest や Lighthouse などのラボ向けテストツールは、開発中のソリューションの反復処理に適していますが、本当の目標は、実際のユーザー エクスペリエンスを向上させることです。
Chrome ユーザー エクスペリエンス レポートは、Chrome ユーザーがウェブ上の人気ページに実際にアクセスしたときのユーザー エクスペリエンスに関する指標を提供します。レポートのデータを取得するには、BigQuery、PageSpeedInsights、または CrUX API でクエリを実行します。
CrUX ダッシュボードでは、主要な指標の進行状況を簡単に可視化できます。
次のステップ
ウェブ パフォーマンスは、完成された作業ではありません。Mercado Libre は、こうした最適化がユーザーにもたらす価値を理解しています。商品リストページのプリフェッチや画像の最適化など、サイト全体にいくつかの最適化を引き続き適用しながら、合計ブロック時間（TBT）の短縮やプロキシ FID によるさらなる改善を商品リストページに加え続けています。たとえば、次のような最適化を行います。
- コード分割ソリューションの反復処理。
- サードパーティ スクリプトの実行を改善する。
- Bundler レベルでのアセット バンドルの継続的な改善（webpack）
Mercado Libre は、パフォーマンスの全体像を把握しているため、サイトでのインタラクティビティの最適化を継続すると同時に、他の 2 つの現在の Core Web Vitals、LCP（Largest Contentful Paint）と CLS（Cumulative Layout Shift）の改善点の評価も開始しています。