コアウェブバイタルの紹介

Googleによって開発されたCore Web Vitals（CWV）は、「ページの読み込みパフォーマンス、インタラクティビティ、および視覚的安定性のための実際のユーザー体験を測定する」パフォーマンス指標のグループとして説明されています。3つのCore Web Vitals（CWV）は次のとおりです：

• Largest Contentful Paint (LCP): 読み込みパフォーマンスを測定します
• Interaction To Next Paint (INP): レスポンシブ性を測定します
• Cumulative Layout Shift (CLS): 視覚的安定性を測定します

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

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

Googleのランキングアルゴリズムの一部は、すでにユーザー体験（UX）を評価するために専用されています。2021年8月、GoogleはUXの質を評価するためのシグナルとして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を必要最低限に削減します。

Interaction to Next Paint (INP)

Interaction to Next Paint (INP)は、ウェブページのレスポンシブ性を評価する指標です。ユーザーのインタラクション（クリックやキー押下など）と、次にユーザーがページ上で視覚的更新を確認するまでの時間を測定します。（視覚的更新はインタラクションとは無関係な場合がありますのでご注意ください。）

INPの理解

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

INPで観察されるインタラクションは次のとおりです：

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

最適化の例

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

Cumulative Layout Shift (CLS)

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

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

CLSの理解

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

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

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

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

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

最適化の例

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