レベル2 - Core web vitals累積レイアウトシフトスコアカードルール

累積レイアウトシフト (CLS) は、読み込み中にページコンテンツが予期せずシフトする量を測定し、ユーザーをイライラさせたり、誤ってクリックさせたりする原因となる可能性があります。このスコアカードルールは、ユーザーエクスペリエンスとタスクの完了に悪影響を与える視覚的な安定性の問題を特定して修正するのに役立ちます。

このスコアカードルールについて

この累積的なレイアウトシフトルールは、デジタルエクスペリエンス成熟度モデルのレベル 2 (プロアクティブ) の一部です。ページの読み込み中に視覚的な安定性が維持され、コンテンツが飛び回ったり、ユーザーのインタラクションが中断されたりするのを防ぐかどうかを評価します。

これが重要である理由:レイアウトのずれにより、ユーザーは誤って間違った要素をクリックしたり、読んでいる途中で場所を失ったり、イライラしてタスクを放棄したりすることがあります。優れた CLS スコアは、ページが予測どおりに読み込まれることを示し、予期しないコンテンツの動きがなく、ユーザーが安心して操作できるようにします。

このルールの仕組み

このルールは、ページの累積レイアウトシフト (CLS) スコアの 75 番目のパーセンタイルが 0.1 を超えているかどうかを評価します。これは、Google が「良好な」視覚的安定性を示す基準値です。 CLS は、ページのライフサイクル全体におけるすべての予期しないレイアウトシフトスコアの合計を測定します。

重要な注意: CLS は秒単位ではなく、単位のないスコアとして測定されます。スコアは、レイアウトシフトの影響と距離を組み合わせたものを表します。

スコアを理解する

パス（緑）： 75回パーセンタイル CLSスコアが0.1以下（Good）
不合格（赤）: 75 パーセンタイル CLS スコアが 0.1 を超える（改善が必要または不良）
目標:最適なユーザー体験のために CLS スコア 0.1 未満を達成する

Google の CLS 閾値:

良好: 0.1以下
改善が必要: 0.1 ～ 0.25
悪い: 0.25より大きい

レイアウトシフトの意味:レイアウトシフトは、表示される要素の位置がレンダリングされたフレーム間で変更されるときに発生します。CLS は、ページのライフサイクル全体を通じてレイアウトシフトスコアの最大バーストを測定し、視覚的な安定性とユーザーエクスペリエンスに影響を与えます。

CLSスコアを向上させる方法

スコアの視覚的な安定性が低い場合は、次の手順に従ってレイアウトのずれを減らしてください。

1. 問題のあるページと要素を特定する

New Relic Browser で CLS データを確認する: CLS スコアが最も高いページを特定する
ユーザーへの影響を評価する:レイアウト変更の問題に遭遇したユーザーの数を特定します。
シフトパターンを分析する:ページ読み込み中にシフトが最も頻繁に発生するタイミングを把握する
ビジネスへの影響度に応じて優先順位を付ける:コンバージョンやユーザータスクに重要なページに重点を置く

2. レイアウトずれの一般的な原因を修正する

画像用のスペースを予約する:

画像の幅と高さの属性を常に指定する
レスポンシブ画像にはCSSのアスペクト比プロパティを使用する
適切な画像読み込み戦略を実装する

動的コンテンツを適切に処理します。

広告、ウィジェット、動的コンテンツ用に最小限のスペースを確保する
既存のコンテンツの上にコンテンツを挿入しないでください
コンテンツの読み込み中にプレースホルダーを使用する

フォントの読み込みを最適化します。

重要なフォントをプリロードしてテキストレイアウトのずれを減らす
読み込みパフォーマンスを向上させるには、font-display: swap を使用します。
カスタムフォントに似たWebセーフフォールバックフォントを選択する

サードパーティのコンテンツを管理します。

埋め込みコンテンツの寸法を統一する
ソーシャルメディアのウィジェットと広告を非同期に読み込む
サードパーティのスクリプトがレイアウトに与える影響をテストする

3. 開発のベストプラクティスを実装する

安定性を考慮した設計:

より予測可能なレイアウトのためにCSSグリッドとフレックスボックスを使用する
コンテンツの読み込み中にスケルトン画面を実装する
さまざまなコンテンツの長さや種類にわたってレイアウトをテストする

監視および検証:

CLS テストには Chrome DevTools と Lighthouse を使用する
New Relic Browserを使用してリアルユーザー監視を実装する
CLSスコアが閾値を超えた場合にアラートを設定する
さまざまなデバイスとネットワーク条件でテストする

改善の測定

これらのメトリクスを追跡して、CLS 最適化の取り組みを検証します。

CLSスコアの減少： 75パーセンタイルCLS値を0.1以下に減少
ユーザー体験メトリクス:直帰率の低下、タスク完了の向上
コンバージョンへの影響:視覚的に安定したページではコンバージョン率が高くなります
ユーザーからのフィードバック:ページの「飛び飛び」や不安定さに関する苦情が減少

一般的なシナリオと解決策

Eコマースの製品ページ:

製品画像と顧客レビューのための正確なスペースを確保する
製品情報と価格設定には一貫したレイアウトを使用する

コンテンツウェブサイト:

コンテンツがずれるのを防ぐために広告用のスペースを確保する
フォントの読み込みを最適化してテキストのリフローを減らす

ランディングページ:

エラーメッセージ用の固定間隔でフォームを設計する
行動喚起ボタンが安定した位置に維持されるようにする

重要な考慮事項

機能性との最適化のバランス:ユーザー体験のためにレイアウトの変更が必要になる場合があります
実際の条件でテスト:さまざまなデバイスやネットワーク速度で最適化が機能することを確認します
ユーザーへの影響に焦点を当てる:重要なユーザージャーニーとコンバージョンに影響を与える変更の修正を優先します。
継続的に監視: CLS はコンテンツの更新、新しい機能、サードパーティの修正によって変更される可能性があります

次のステップ

即時の対応: CLSスコアが最も高いページを特定し、画像と動的コンテンツの迅速な修正を実施します。
技術的な最適化:アドレスフォントの読み込み、サードパーティ製スクリプト、およびレイアウトアーキテクチャー
プロセス統合: 開発ワークフローとパフォーマンス予算に CLS 監視を追加
最適化を継続: LCPやINPなどの他のCore Web Vitalsへの進捗

CLS 最適化の詳細なガイダンスについては、 Core Web Vitalsドキュメントとパフォーマンス監視ベストプラクティスを参照してください。

この機械翻訳は、参考として提供されています。