LCP、INP、CLSが何を測るか、良好と不良のしきい値、フィールドデータとラボデータの違い、このページのライブ計測、原因別に整理したコード付きの改善レシピ25個、プラットフォーム別の注意点を解説します。
Core Web Vitalsは、実際の訪問を対象にした3つの指標です。Largest Contentful Paint（読み込み、2.5秒以下で良好）、Interaction to Next Paint（応答性、200ミリ秒以下で良好）、Cumulative Layout Shift（視覚的な安定性、0.1以下で良好）。訪問の75%以上が3つすべてを満たすと、そのページは合格です。
良好なスコア
下のメーターは、このページを操作している間、あなたのブラウザーで計測します。その後、不合格になっている指標を見つけ、その指標のレシピを順に試してください。各レシピには、解決する原因とコードを載せています。
2024年3月に、Interaction to Next PaintがFirst Input Delayに代わってCore Web Vitalの1つになりました。INPは最初の操作だけでなくページ上のすべての操作を対象にし、結果が描画されるまでの時間も含みます。
Lighthouseは、シミュレートした1台の端末での1回のテストです。Core Web Vitalsは、より遅いスマートフォンや回線を使う実際の訪問者の28日分のデータを使い、Lighthouseでは計測できないINPも含みます。
Googleのページエクスペリエンスのシグナルの一部です。Googleは関連性とコンテンツの質のほうがはるかに重要だと説明しているため、良いVitalsが最も効くのは、ほかの点でページが同程度のときです。
フィールドデータは直近28日間を対象にしているため、デプロイ後およそ4週間かけて少しずつ改善が表れます。
しきい値（実際の訪問の75パーセンタイルで判定）
フィールドデータとラボデータの比較
fetchpriority="high"で、この画像が最も重要だとブラウザーに伝えます。LCP画像は決して遅延読み込みしないでください。
背景画像はCSSの読み込み後と、見つかるのが遅くなります。headでプリロードすれば、すぐにダウンロードが始まります。
srcsetとsizesを使えば、スマートフォンはデスクトップ用ではなく小さいファイルをダウンロードできます。
AVIFとWebPは、同じ画質ならJPEGよりかなり小さいことが一般的です。pictureを使えば、古いブラウザーはフォールバックできます。
font-display: swapは代替フォントの文字をすぐに表示するので、LCP要素である見出しがフォントのダウンロードに足止めされません。
preconnectは、後で必要になるサードパーティのオリジンに対して、DNS、TCP、TLSのハンドシェイクを前もって済ませます。
deferやasyncのないheadのスクリプトはレンダリングをブロックします。deferは順序を保ちつつ、HTMLの解析が終わるまで待ちます。
LCP要素がJavaScriptで作られる場合、バンドルがダウンロードされて実行されるまで何も描画できません。サーバーレンダリングやプリレンダリングなら最初のレスポンスに含められます。選択肢については、シングルページアプリのSEOガイドをご覧ください。
サーバーの応答が遅いと、すべてが遅れます。静的なページはCDNでキャッシュし、適切なCache-Controlを設定しましょう。
50ミリ秒を超えるタスクは入力をブロックします。処理の合間にメインスレッドへ制御を譲り、その間にクリックを処理できるようにします。scheduler.yieldは比較的新しい機能で、setTimeoutのフォールバックはどこでも動作します。
ボタンの表示をすぐに更新し、ブラウザーが描画する機会を得てから重い処理を行います。
キーを押すたびに長いリストを絞り込むと、入力がもたつきます。少し間が空くのを待ちましょう。
startTransitionを使うと、Reactは入力の応答性を保ち、重い結果は可能になった時点で描画します。
チャットウィジェットやタグマネージャーは、読み込み時に重いコードを実行することがよくあります。ページがアイドルになった後か、最初の操作時に読み込みましょう。
巨大なページでは、スタイルやレイアウトの更新がすべて遅くなります。content-visibilityは、画面外のセクションが近づくまでレンダリングを省略します。
スタイルを変えるたびにoffsetHeightを読むと、毎回レイアウトが強制されます。先にすべて読み取り、その後で書き込みましょう。
大きなファイルの解析や何千行もの並べ替えは、クリックをブロックせずにワーカーで実行できます。
widthとheightがあれば、ファイルが届く前にブラウザーが領域を確保できます。それでもCSSでレスポンシブにできます。
地図、動画、iframeは読み込みが遅いことがよくあります。aspect-ratioでボックスの大きさを保ちます。
読んでいる部分の上にコンテンツが挿入されると、読んでいる部分が押し下げられます。前もって枠に最小の高さを指定しましょう。
Webフォントに切り替わると、文字が折り返し直されることがあります。ローカルの代替フォントにsize-adjustを指定すると、両者の幅が近づきます。
transformで動かしてもほかの要素は動かないので、レイアウトシフトとして数えられません。
画面下部に固定したバーはページを動かしませんが、上部に挿入したバーは動かします。
読み込み中のプレースホルダーは、置き換わる内容と同じ領域を占めるべきです。
バックフォワードキャッシュから復元されたページは、新たなシフトなしで即座に表示されます。unloadハンドラーはそれを妨げるので、代わりにpagehideを使いましょう。
プラットフォーム別の注意点
LCPの原因はたいてい画像です。画像を小さくするには
このページのライブ計測
対応ブラウザーでは、このページのLCP、CLS、INPをあなたのブラウザー内で計測します。
良好
改善が必要
不良
このブラウザーでは非対応
INP（これまでで最も遅い値）
最大の描画を待っています
どこかをクリックまたは入力すると計測します
無料で始める · クレジットカード不要