商品詳細ページのインタラクティビティを最適化し、Lighthouse の最大潜在的な FID を 90% 削減し、Chrome ユーザー エクスペリエンス レポートの FID を 9% 改善しました。
Mercado Libre は、ラテンアメリカ最大の e コマースと決済エコシステムです。18 か国に展開しており、ブラジル、メキシコ、アルゼンチンでは市場リーダーとなっています（ユニーク ビジター数とページビュー数に基づく）。
ウェブ パフォーマンスは長い間同社の重点事項でしたが、最近、パフォーマンスをモニタリングし、サイトのさまざまな部分に最適化を適用するチームを結成しました。
この記事では、Mercado Libre のフロントエンド アーキテクチャ チームの Guille Paz、Pablo Carminatti、Oleh Burkhay が、Core Web Vitals の 1 つである ファースト インプット ディレイ（FID）とそのラボ プロキシである 合計ブロック時間（TBT）を最適化するために行った作業について説明します。
90%
Lighthouse の最大推定 FID の減少
9%
CrUX で FID を「速い」と認識するユーザーが増えている
長時間のタスク、初回入力遅延、合計ブロック時間
負荷の高い JavaScript コードを実行すると、長時間のタスクが発生する可能性があります。長時間のタスクとは、ブラウザのメインスレッドで 50 ミリ秒を超えて実行されるタスクです。
FID（初回入力遅延）は、ユーザーがページを最初に操作したとき（リンクをクリックしたときなど）から、ブラウザがその操作に応答してイベント ハンドラの処理を実際に開始できるまでの時間を測定します。負荷の高い JavaScript コードを実行するサイトには、長いタスクが複数存在する可能性があり、最終的に FID に悪影響を及ぼします。
優れたユーザー エクスペリエンスを提供するには、サイトで First Input Delay を 100 ミリ秒未満に収めるようにします。
Mercado Libre のサイトはほとんどのセクションで良好なパフォーマンスを示していましたが、Chrome ユーザー エクスペリエンス レポートで、商品の詳細ページの FID が低いことがわかりました。この情報に基づいて、同社はサイトの商品ページのインタラクティビティの改善に注力することにしました。
これらのページでは、ユーザーが複雑な操作を行えるため、有用な機能を妨げることなくインタラクティビティを最適化することが目標でした。
商品の詳細ページのインタラクティビティを測定する
FID は実際のユーザーを必要とするため、ラボで測定することはできません。ただし、Total Blocking Time（TBT） 指標はラボで測定可能で、現場の FID とよく相関し、インタラクティビティに影響する問題もキャプチャします。
たとえば、次のトレースでは、メインスレッドでタスクの実行に費やされた合計時間は 560 ミリ秒ですが、そのうちの 345 ミリ秒のみが合計ブロック時間（50 ミリ秒を超える各タスクの部分の合計）と見なされます。
Mercado Libre は、実際の環境で商品詳細ページのインタラクティビティを測定して改善するために、TBT をラボで代替指標として使用しました。
一般的なアプローチは次のとおりです。
- WebPageTest を使用して、実際のデバイスでメインスレッドをビジー状態にしていたスクリプトを正確に特定します。
- Lighthouse を使用して、初回入力遅延の最大推定時間（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 を実行したところ、最大潜在 FID が唯一赤色でマークされ、値は 1,710 ミリ秒でした。
Mercado Libre は、これらの改善が実際のユーザーに影響し、Chrome ユーザー エクスペリエンス レポートなどの実際のユーザー モニタリング ツールに反映されると想定して、Lighthouse や WebPageTest などのラボツールで最大潜在 FID スコアを改善することを目標に設定しました。
長時間実行タスクを最適化する
最初のイテレーション
Mercado Libre は、メインスレッド トレースに基づいて、コストの高いコードを実行している 2 つのモジュールを最適化することを目標に設定しました。
内部トラッキング モジュールのパフォーマンスの最適化を開始しました。このモジュールには、モジュールの動作に不可欠ではなく、安全に削除できる CPU 使用率の高いタスクが含まれていました。これにより、サイト全体の JavaScript が 2% 削減されました。
その後、一般的なバンドルのサイズを改善する作業を開始しました。
Mercado Libre は webpack-bundle-analyzer を使用して、最適化の機会を検出しました。
- 当初は、Lodash モジュール全体が必要でした。これは、ライブラリ全体ではなく Lodash のサブセットのみを読み込むメソッドごとの require に置き換えられ、lodash-webpack-plugin と組み合わせて使用することで、Lodash をさらに圧縮します。
また、次の 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 回目のイテレーション
チームは、その後の改善を見つけるために、長いタスクの調査を続けました。
これらの情報に基づいて、Google は以下の変更を実施することにしました。
- メイン バンドルのサイズをさらに削減して、コンパイル時間と解析時間を最適化します（たとえば、さまざまなモジュールにわたる重複する依存関係を削除します）。
- コンポーネントレベルでコード分割を適用して、JavaScript を小さなチャンクに分割し、さまざまなコンポーネントをよりスマートに読み込むことができます。
- コンポーネントの水分補給を遅らせて、メインスレッドをよりスマートに使用できるようにします。この手法は、一般に部分的な水分補給と呼ばれます。
効果を測定する
生成された WebPageTest トレースでは、さらに小さな JavaScript 実行チャンクが示されました。
Lighthouse の最大推定 FID 時間はさらに 60% 短縮されました。
実際のユーザーの進捗状況を可視化する
WebPageTest や Lighthouse などのラボ テストツールは、開発中のソリューションの反復処理に適していますが、真の目標は実際のユーザーのエクスペリエンスを改善することです。
Chrome ユーザー エクスペリエンス レポートは、Chrome ユーザーがウェブ上の人気ページに実際にアクセスしたときのユーザー エクスペリエンスを指標化したものです。レポートのデータは、BigQuery、PageSpeedInsights、CrUX API でクエリを実行することで取得できます。
CrUX ダッシュボードを使用すると、コア指標の進捗状況を簡単に可視化できます。
次のステップ
ウェブのパフォーマンスは決して完了することはありません。Mercado Libre は、こうした最適化がユーザーにもたらす価値を理解しています。商品リスティング ページでのprefetching、画像の最適化など、サイト全体で複数の最適化を継続的に適用しながら、商品リスティング ページの改善を継続し、合計ブロック時間（TBT）と、プロキシ FID をさらに削減しています。このような最適化には次のものがあります。
- コード分割ソリューションの反復処理。
- サードパーティ スクリプトの実行を改善しました。
- バンドルレベル（webpack）でのアセット バンドルの継続的な改善。
Mercado Libre はパフォーマンスを包括的に把握しているため、サイトのインタラクティビティの最適化を継続しながら、現在の他の 2 つのCore Web Vitals（LCP（Largest Contentful Paint）と CLS（Cumulative Layout Shift））の改善の余地をさらに評価し始めています。