Open1
Core Web Vitalsとは
Kota ShimozuruCore Web Vitalsとは
- Core Web Vitalsとは、ウェブ上で優れたユーザーエクスペリエンス（UX）を提供するために不可欠であるというGoogleが提唱した考え方。
- ユーザー エクスペリエンスの 3 つの側面（読み込み、インタラクティビティ、視覚的安定性）に焦点を当てており、次の指標が含まれている。
Largest Contentful Paint（LCP）
ページで最も大きな要素が読み込まれるまでの時間を 2.5 秒以内とすること。
-
<img>要素 -
<image>要素内の<svg>要素 -
<video>要素（ポスター画像を使用） -
url()（CSSグラデーションではなく）関数を回してロードされた背景画像を持つ要素 - テキストノードまたは他のインラインレベルのテキスト要素の子を含むブロックレベルの要素
LCPは以下の4つの要因の影響を受けることになるため、以下の改善が必要です。
- サーバーの応答時間が遅い
- レンダリングをブロックするJavaScriptとCSS
- リソースのロード時間
- クライアント側のレンダリング
Interaction to Next Paint（INP）
ページのインタラクティビティは 200 ミリ秒未満とすること。
ユーザが最初にページ上のボタンやリンクをクリックしてからブラウザが応答できるまでの時間。
Cumulative Layout Shift（CLS）
視覚的安定性を測定します。ページの CLS を 0.1 以下にする必要があります。
ページコンテンツの良きしない移動のことで、読み込みで発生するレイアウトのズレを指す。
引用元