NDTV: Core Web Vitals の最適化により LCP を 55% 改善

NDTV はウェブに関する指標を最適化することで、ユーザー エクスペリエンスを向上させ、ユーザー維持率を高めることができました。

NDTV は、インドを代表するニュース局およびウェブサイトの一つです。同社は Web Vitals プログラムに従ったことで、最も重要なユーザー指標である Largest Contentful Paint(LCP)をわずか 1 か月で 55% 改善しました。この結果、直帰率の 50% 低下と相関しています。

55%

LCP の改善

50%

直帰率の低減率

ビジネス チャンスの強調

毎月 2 億人近くのユニーク ユーザーがいる NDTV にとって、ユーザー エクスペリエンスの品質を最適化することは必要不可欠です。エンゲージメント率は業界平均をはるかに上回り、同業他社の中で最も高い割合でしたが、NDTV チームはまだ改善の余地があると考え、エンゲージメント率をさらに改善するために、他のプロダクトの変更とともに Web Vitals に投資することにしました。

採用したアプローチ

NDTV チームは、PageSpeed Insightsweb.dev/measureWebPageTest などのツールを利用して、サイト上で改善の余地がある領域を分析しました。このように明確に定義された最適化のアイデアを基に、影響の大きいタスクに優先順位を付け、Core Web Vitals をすぐに改善できました。最適化の対象:

  • 最大のコンテンツ ブロックを優先する: 第三者からのリクエストを遅らせることで、スクロールしなければ見えない位置にある広告スロットの広告呼び出しや、スクロールしなければ見えない位置にあるソーシャル ネットワークの埋め込みなどが該当します。
  • 静的コンテンツのキャッシュ保存の延長を、数分から 30 日に延長しました。
  • font-display を使用して、フォントのダウンロード中にテキストをすぐに表示します。
  • アイコンに、TrueType フォント(TTF)ではなくベクター グラフィックを使用します。
  • JavaScriptCSS の遅延読み込み: 最小限の JS と CSS でページを読み込み、ページのスクロール時に残りの JS と CSS を遅延読み込みします。
  • 重要なアセットを配信する送信元に事前接続します。
最適化の概要: Largest Contentful Paint、キャッシュ、CSS、ベクター グラフィック、遅延読み込みの JS と CSS、事前接続

効果

Web Vitals は、ユーザー エクスペリエンスを改善するプロセスを加速するために、指標に基づくシグナルをチームに提供しました。

最適化プロジェクトの開始前に、NDTV チームは LCP スコアのベンチマークを 3.0 秒としました(Chrome ユーザー エクスペリエンス レポートのフィールド データに基づいて、ユーザーの 75 パーセンタイル)。最適化プロジェクトの実施後、1.6 秒に短縮されました。また、Cumulative Layout Shift(CLS)スコアも 0.05 に下げました。「First Byte Time」や「CDN の効果的な使用」など、WebPageTest の他の指標は A 評価に改善されました。

CLS スコア 0.05。

費用対効果

ndtv.com は複雑で内容の深いサイトにもかかわらず、パフォーマンスと UX のベスト プラクティスに長年注力してきた同社のサイトは、すでに十分な FID スコアと CLS スコアを達成しています。同社のチームはユーザー エクスペリエンスをさらに改善するために LCP に注力し、最適化に着手してから数週間でしきい値を満たすことに成功しました。

全体的なビジネスの成果

  • Core Web Vitals の最適化により LCP が 55% 改善しました。
  • Core Web Vitals とその他のプロダクトの変更に合わせて最適化した結果、ウェブサイトの直帰率が 50% 減少しました。
  • コンテンツのエンゲージメントと消費が直接増加し、それに比例してウェブサイトの収益が増加。
LCP が 55% 改善。直帰率を 50% 削減。エンゲージメントと消費の増加。

NDTV は、質の高いユーザー エクスペリエンスを提供するために、長きにわたってベスト プラクティスを実践してきました。Google は現在、ウェブに関する指標の測定をプロダクト開発に不可欠な要素と考えており、エンゲージメントの向上により、その ROI も改善しています。

NDTV Group、最高技術および製品責任者、Kawaljit Singh Bedi 氏

インドと東南アジアの成功事例については、ウェブでのスケーリングに関する事例紹介のページをご覧ください。