CLS の最適化によって Yahoo! トラベルが日本ニュースのセッションあたりのページビュー数が 15% 増加

CLS を 0.2 最適化すると、セッションあたりのページビュー数が 15% 増加し、セッション継続時間が 13% 長くなり、直帰率が 1.72 ポイント低下しました。

Tomoki Kiraku

Milica Mihajlija

Shunya Shishido

Yahoo! JAPAN は、月間 790 億を超えるページビューを提供する日本最大級のメディア企業です。ニュースメディアである Yahoo!JAPAN ニュースは、1 か月あたりのページビューが 220 億回を超えており、ユーザーエクスペリエンスの改善に特化したエンジニアリングチームが存在します。

Core Web Vitals を継続的にモニタリングすることで、サイトの Cumulative Layout Shift（CLS）スコアの改善と、セッションあたりのページビュー数が 15% 増加し、セッション継続時間が 13% 増加することと相関しました。

0.2

CLS の改善

15.1_%

セッションあたりのページビュー数が増加

13.3_%

セッション継続時間が長くなる

ページのコンテンツが予期せず移動してしまうと、誤クリックやページの方向感覚の喪失などが発生し、最終的にはユーザーの不満につながります。イライラするユーザーは長く利用しない傾向がありますユーザーに満足してもらうには、ユーザージャーニーのライフサイクル全体を通じてページレイアウトを安定させる必要があります。Yahoo!JAPAN ニュースは、ビジネスクリティカルなエンゲージメント指標に大きくプラスの影響を与えました。

CLS の改善に関する技術的な詳細については、Yahoo!ニュースエンジニアリングチームの投稿をご覧ください。

問題の特定

Core Web Vitals（CLS を含む）のモニタリングは、問題を捕捉し、問題の発生源を特定するうえで非常に重要です。Yahoo!JAPAN ニュースの Search Console では、パフォーマンスの問題があるページグループの概要を確認できます。また、Lighthouse では、ページエクスペリエンスを改善する機会をページごとに特定できました。これらのツールで記事の詳細ページの CLS が低いことが判明しました

記事の詳細ページの CLS が高いことを示す Google Search Console の Core Web Vitals レポート。 — Google Search Console の Core Web Vitals レポート

Lighthouse では、ページ上の CLS に大きく影響する DOm 要素が表示されているレイアウトシフトの監査を回避する。 — Lighthouse の「大規模なレイアウトシフトを避ける」の監査では、CLS スコアに寄与している要素とその割合が表示されます。

Cumulative Layout Shift の累積的な部分に留意することが重要です。スコアはページのライフサイクル全体を通して取得されます。実際のスコアには、ページのスクロールやボタンのタップなどのユーザー操作の結果として生じる変化が含まれることがあります。フィールドデータから CLS スコアを収集するために、チームは web-vitals JavaScript ライブラリレポートを統合しました。

チームは Chrome DevTools を使用して、ページ上のレイアウトシフトを行っている要素を特定しました。DevTools の Layout Shift Regions では、レイアウトシフトが発生するたびに、CLS に影響している要素を青い長方形でハイライト表示して可視化します。

記事の詳細ページ。ヒーロー画像とテキストに青い長方形が重ねられています。 — 可視化されたレイアウトシフト。

その結果、記事の上部にあるヒーロー画像が最初のビューで読み込まれた後にレイアウトシフトが発生していることがわかりました。

レイアウトシフト前後の比較を示す記事詳細ページのスクリーンショット。 — 記事の詳細ページのレイアウトシフト。

上記の例では、画像の読み込みが完了すると、テキストが押し下げられます（位置の変化は赤い線で示されています）。

画像の CLS を改善する

固定サイズの画像の場合、img 要素で width 属性と height 属性を指定し、最新のブラウザで利用可能な CSS aspect-ratio プロパティを使用すると、レイアウトの移動を防ぐことができます。ただし、Yahoo!最新のブラウザだけでなく、iOS 9 などの比較的古いオペレーティングシステムにインストールされているブラウザもサポートする必要がありました。

そこで、アスペクト比ボックスを使用しました。これは、マークアップを使用して、画像が読み込まれる前にページ上のスペースを予約する方法です。この方法では、バックエンド API から取得できた画像のアスペクト比を事前に把握する必要があります。

CLS 最適化前後の記事の詳細ページのスクリーンショット。 — 左: ページ上部の画像用の予約済みの空白スペース。右: レイアウトシフトなしで予約されたスペースに読み込まれたヒーロー画像。

結果

Search Console でパフォーマンスの低い URL の数は 98% 減少し、ラボデータの CLS は約 0.2 から 0 に減少しました。さらに重要なこととして、ビジネス指標に相関性のある改善がいくつかありました。

パフォーマンスの問題があるページが大幅に減少していることを示す Search Console レポート。 — 改善後の Search Console

Yahoo!日本ニュースは CLS の最適化前と最適化後のユーザーエンゲージメント指標を比較したところ、複数の改善が見られました。

15.1_%

セッションあたりのページビュー数が増加

13.3_%

セッション継続時間が長くなる

1.72_%*

直帰率が低い（*パーセントポイント）

CLS やその他の Core Web Vitals の指標を改善することで、Yahoo!また、Android 版 Chrome のコンテキストメニューに [Fast page] ラベルが表示されます。

Android 版 Chrome の高速ページラベル。 — Android 版 Chrome の「高速ページ」ラベル

レイアウトシフトはユーザーにストレスを感じるし、ページを読む意欲を削ぐものですが、適切なツールを使用し、問題を特定し、ベストプラクティスを適用することで改善できます。CLS を改善することで、ビジネスを改善するチャンスが得られます。

詳細については、Yahoo!JAPAN エンジニアリングチームの投稿をご覧ください。