コアウェブバイタル

はじめに

ユーザーがポジティブなデジタル体験を持つことを確保することは、ページ体験がGoogleの検索ランキングに影響を与えるため、オンラインビジネスにおいて重要な役割を果たすべきです。

Googleのランキングアルゴリズムの一部は、すでにユーザー体験（UX）を評価するために専用に設計されています。2021年8月、GoogleはUXの質を評価するための別のシグナルとして、Core Web Vitals（読み込みパフォーマンスのための実際のユーザー体験を測定するパフォーマンス指標のグループ）を追加しました。

ページ体験は、ユーザーがウェブページと対話する際の体験を、純粋な情報価値を超えてどのように認識するかを測定する一連のシグナルです。

Core Web Vitalsを改善することで、より良いユーザー体験、オーガニックトラフィックの増加、最終的にはウェブサイトのコンバージョンの増加につながります。

Core Web Vitals

Largest Contentful Paint (LCP)

Largest Contentful Paint (LCP)は読み込みパフォーマンスを測定し、Core Web Vitalsの一部です。Googleは2021年にCore Web Vitalsを検索ランキングシグナルとして使用します。

Largest Contentful Paint (LCP)の理解

Largest Contentful Paint (LCP)は、ビューポート内で表示される最大のコンテンツ要素のレンダリング時間を測定します（ユーザーがスクロールする前の状態です）。

LCPは、最大のコンテンツ（背景画像を除外し、スクロールせずに見える範囲外に表示されるコンテンツを除外）と一貫したコンテンツ（ローダーやスプラッシュスクリーンなどの一時的なコンテンツは無視されます）の配信速度に焦点を当てています。
Googleのガイドラインによれば、あなたのウェブページは、少なくとも75％のユーザー（デスクトップとモバイルトラフィックの両方を含む）に対してLCPが2.5秒未満であるべきです。

遅いLCPの一般的な原因には、画像、動画、サードパーティのスクリプトなどの大きなデザイン要素が含まれます。

最適化の例

リソースを最適化し、レイジーロードを使用し、JSを必要最低限に削減します。

Cumulative Layout Shift

Cumulative Layout Shift (CLS)は、ページの安定性を測定し、ページの全体的なライフサイクルの間にユーザーを混乱させたり誤解させたりする可能性のある要素の重要な動きを監視します。

CLSはCore Web Vitalsの一部です。Googleは2021年にCore Web Vitalsを検索ランキングシグナルとして使用します。

Cumulative Layout Shiftの理解

Cumulative Layout Shiftは、ページの全体的なライフサイクルの間に発生するすべての個別のレイアウトシフトの合計を測定します（ユーザーがページと対話を開始した後も含む）、関係するエリアのサイズとシフトの距離を考慮に入れます。

CLSアルゴリズムは、現在のコンテキスト内のすべてのレイアウトシフトを監視し、iframeのコンテンツは除外します。

アクティブなユーザーインタラクション（クリック、キーストローク、ウィンドウのサイズ変更など）の後に500ミリ秒で発生するレイアウトシフトは、CLSに影響を与えません。ホバー、スクロール、および更新フリングはアクティブなインタラクションとは見なされません。

他のレイアウトシフトは、影響を受けた合計エリアと移動した要素がカバーした距離に基づいてスコアが付けられます。累積レイアウトシフトは、考慮されたすべてのレイアウトシフトスコアの合計です。

Googleのガイドラインによれば、あなたのウェブページは、ユーザーの少なくとも75%（デスクトップとモバイルトラフィックの両方を含む）に対してCLSが0.1未満であるべきです。

最適化の例

累積レイアウトシフトを改善するために、ブラウザが画像やiframe（広告を含む）のために適切なスペースを割り当てられるように、読み込みを開始する前にその幅と高さ、またはアスペクト比を定義してください。

最大潜在ファーストインプット遅延（FID）

ファーストインプット遅延（FID）は、ユーザーの最初のインタラクションとそのインタラクションが処理されるまでの時間を測定します（インタラクションはリンクやボタンをクリックまたはタップすることができます）。

最大潜在FIDは、FIDが持つ可能性のある最悪の値です。FIDは、ユーザーがページと初めてインタラクションする際に経験する遅延です（例：要素をクリックしたときにページからフィードバックを得るまでの遅延）。

FIDはページのビジネス（レスポンシブ性を妨げるタスク）とユーザーがインタラクションするタイミングに依存します。

FIDは実際のユーザーの特定のインタラクションから収集されますが、最大潜在FIDはユーザーなしで計算でき、値はページが最もレスポンシブでないときにページとインタラクションすることでユーザーが直面する遅延です（最悪のシナリオ）。

Googleのガイドラインによれば、あなたのウェブページは、ユーザーの少なくとも75%（モバイルとデスクトップトラフィックの両方を含む）に対してFIDが100ms未満であるべきです。

計算方法

最大潜在FIDは、ファーストコンテンツフルペイントの後の最長タスクを見つけることによって計算されます（ユーザーがコンテンツが表示される前にページとインタラクションしようとはしないと仮定できます）。

トータルブロッキングタイム（TBT）は、ページがコンテンツのレンダリングを開始した後にユーザー入力（クリック、キーボードの押下など）に応答できない合計時間を測定します。

計算方法

トータルブロッキングタイムの計算は、ロングタスクに基づいています。ロングタスクは、ウェブブラウザをしばらく独占し（>50ミリ秒）、他の重要なタスクの実行を妨げる処理です（例：ユーザー入力に反応すること）。

合計ブロッキング時間は、ファーストコンテンツフルペイントと（継続的に）インタラクティブになるまでのすべてのロングタスクのブロッキング部分を加算することによって計算される合計です。ロングタスクのブロッキング部分は、50 msを超える期間です。

3つのロングタスクでページが読み込まれる例

[ロングタスク 1: 55 ms] FCP [ロングタスク 2: 110 ms] [ロングタスク 3: 200 ms] TTI

• ロングタスク 1はFCPの前に発生しているため無視されます
• ロングタスク 2のブロッキング部分は60 msです（110 - 50）。
• ロングタスク 3のブロッキング部分は150 msです（200 - 50）。
  
  したがって、合計ブロッキング時間は210 msです（60 + 150）。

なぜ合計ブロッキング時間が計算されないことがあるのか？

合計ブロッキング時間はファーストコンテンツフルペイント（FCP）と（継続的に）インタラクティブになるまでの間に計算されるため、TBTが存在するためには両方の指標が定義されている必要があります。ロングタスクが繰り返し発生する場合、インターフェースが一貫してインタラクティブである時間は実際には存在しないため、TBTが計算されるべき時間の範囲に「終わり」がありません。

ロングタスクを追跡する必要があるがTBTが計算できない場合は、代わりに「ロングタスクの合計」指標を使用できます。

次のペイントへのインタラクション

次のペイントへのインタラクション（INP）は、ウェブページの応答性を評価する指標です。これは、ユーザーのインタラクション（クリックやキー押下など）と、ユーザーがページ上で視覚的な更新を次に見るまでの時間がどれくらい経過するかを測定します。（視覚的な更新はインタラクションとは無関係である可能性があることに注意してください）。

INPとFIDの違い

• FIDはページの最初のインタラクションのみを測定しますが、INPはすべてのページインタラクションを測定します。
  
  
• FIDはユーザーのインタラクションとブラウザが実際に処理を開始できるまでの遅延を測定します。
  
  
• INPはユーザーのインタラクションとその後のUI変更の間の遅延を測定します。

INPは、ページとインタラクションする際のユーザー体験の潜在的な視覚的遅延をより代表しています。FIDはページビューの最初のインタラクション（最初のインタラクションのみ）における技術的な遅延により焦点を当てています。

INPはどのように機能しますか？

INPは、ユーザーがインタラクションを開始してから次のフレームのレンダリングが行われるまでの期間をキャプチャすることを目指しており、ほとんどすべてのユーザーインタラクションに対してこれを達成しようとしています。INPの値は観測された最悪の遅延です（50回以上のインタラクションを持つページビューの場合、外れ値は除外され、INPは98パーセンタイル値になります）。

INPのために観測されたインタラクションは次のとおりです：

• マウスでのクリック
• タッチスクリーンのデバイスでのタップ
• 物理キーボードまたは画面上のキーボードのいずれかのキーを押す

Googleのガイドラインによると、あなたのウェブページは少なくとも75％のユーザー（モバイルとデスクトップのトラフィックの両方を含む）に対してINPが200ms未満であるべきです。