リアルユーザー モニタリング ツールを使用し、アプリのリファクタリングで Core Web Vitals の改善に重点を置いた結果、CLS は 72% 改善され、アプリケーションの応答性も向上しました。
Agrofy は、中南米の農業ビジネス市場向けのオンライン ショッピングモールです。農業機械、土地、機器、金融サービスの買い手と売り手をマッチングします。2020 年第 3 四半期、Agrofy の 4 人のメンバーからなる開発チームは、パフォーマンスの向上が離脱率の低下につながるという仮説を立て、1 か月かけてウェブサイトを最適化しました。特に、Core Web Vitals の 1 つである LCP の改善に重点を置きました。これらのパフォーマンスの最適化により、LCP が 70% 改善され、読み込みを諦めるユーザーが 76% 減少しました（3.8% から 0.9%）。
70%
LCP の低下
76%
読み込みの放棄率の低下
問題
Agrofy の開発チームは、ビジネス指標を調査しているときに、バウンス率が業界のベンチマークよりも高いと思われることに気づきました。ウェブサイトのコードベースでも技術的な負債が増加していました。
解決策
Agrofy チームは経営陣に提案し、次の点について賛同を得ました。
- 古い非推奨のフレームワークから、新しいサポート対象のフレームワークに移行します。
- 新しいコードベースの読み込みパフォーマンスを最適化する。
移行には 2 か月かかりました。この移行には、前述の 4 人のプロダクト デベロッパー チームに加えて、プロダクト スペシャリスト、UX スペシャリスト、ソフトウェア アーキテクトも参加しました。この最適化プロジェクトには、4 人の開発チームが 1 か月かかりました。主に LCP、CLS（別の Core Web Vitals 指標）、FCP に焦点を当てました。具体的な最適化には、次のようなものがあります。
- Intersection Observer API を使用して、表示されないすべての要素を遅延読み込みする。
- コンテンツ配信ネットワークを使用して静的リソースをより迅速に配信する。
loading="lazy"による画像の遅延読み込み。- クリティカル レンダリング パスのコンテンツをサーバーサイド レンダリングする。
- 重要なリソースをプリロードして事前接続し、ハンドシェイク時間を最小限に抑えます。
- リアルユーザー モニタリング（RUM）ツールを使用して、レイアウトのずれが頻繁に発生している商品詳細ページを特定し、コードベースのアーキテクチャを調整します。
技術的な詳細については、Agrofy エンジニアリングのブログ投稿をご覧ください。
トラフィックの 20% で新しいコードベースを有効にした後、2020 年 9 月上旬にすべての訪問者に新しいサイトをリリースしました。
結果
開発チームによる最適化により、さまざまな指標で測定可能な改善がもたらされました。
- LCP が 70% 改善されました。
- CLS は 72% 改善しました。
- JS リクエストのブロックは 100%、CSS リクエストのブロックは 80% 減少しました。
- 長時間のタスク: 72% 短縮。
- 最初の CPU の休止が 25% 改善されました。
同じ期間の実際のユーザー モニタリング データ（フィールド データ）によると、商品の詳細ページでの読み込み放棄率は 3.8% から 0.9% に 76% 減少しました。
