コアウェブバイタルとは？～対策・改善方法まで解説～【2023年度版】

この３つのコアウェブバイタルである、「LCP」「FID」「CLS」は、モバイルとデスクトップに分けた上で、総ページロード数の 75 パーセンタイル（最小値から数えて75%に位置する値）をしきい値として設定されており、3 つの指標すべてにおいて「良好」を達成すると、そのページは合格として判定されます。

LCPは、ページの表示速度のパフォーマンスを測定するための指標です。

ページの読み込みが開始されてから、そのページの最大視覚コンテンツが表示されるまでの時間（単位：秒）を測定したもので、値が小さいほど表示速度が短いということになり、2.5秒以下なら良好と判定されます。

なお、最大視覚コンテンツはページ毎に異なりますが、このページで言えばファーストビューで表示されるキービジュアルの画像になります。

FIDは、初回入力への応答速度のパフォーマンス（「インタラクティブ性」といいます）を測定するための指標です。

ページ内で、ユーザーが最初に操作したときから、その操作に応じてブラウザが処理を開始するまでの時間（単位：ミリ秒）を測定したもので、値が小さいほど反応速度が短いということになり、100ミリ秒以下なら良好と判定されます。

なお、ユーザーによる操作としては、リンクをクリックしたり、ボタンをタップしたり等が典型例です。

CLSは、ページの視覚的な安定性のパフォーマンスを測定するための指標です。

ページの表示中に、ユーザーの予期しないレイアウトシフトが発生した場合に、そのレイアウトシフト数を累積した数値で、値が小さいほどユーザーの予期しないレイアウトシフトが発生しておらず、視覚的に安定しているということになり、0.1以下なら良好と判定されます。

なお、ユーザーの予期しないレイアウトシフトとしては、ページを開いてテキストを読もうとしたら、別のコンテンツや広告などが後から表示されて、読もうとしていたコンテンツが下にズレてしまった等が典型例です。

このコアウェブバイタルを測定するためのツールとしては、Chrome User Experience Report や、Search Console の Core Web Vitals Report 等がありますが、最も簡単な手法は、PageSpeed Insightsになります。
使用方法は、計測したいページのURLを入力して分析をクリックするだけで、レポートが作成されますので、是非担当されているWebサイトで試してみてください。
以下、このページをPageSpeed Insightsでレポーティングした結果を使いながら、解説させていただきます。

そういった理由によるかは定かではありませんが、2021年6月頃より、【サイト全体】のデータについて、【最低限2つの指標（LCP、CLS）】において、データが十分に蓄積されていれば、「オリジン」（旧UIのOrigin Summary）として、サイト全体のLCP、CLS、FIDデータが表示され、２つの指標だけでコアウェブバイタルが判定されるようになりました。

本ページを例にすると、「このURL」だけではデータが不足しているため、「オリジン」データが表示されておりますが、LCPとCLSについてデータが十分に蓄積されていることから、その２項目でコアウェブバイタルが「合格」と判定されています。

どちらも影響が大きいと推定される順に羅列されており、左側のアイコンの色で重要度が示される他、合格値が計測されると「合格した監査」に振り分けられるようになっています。
ここで指摘されている項目について、地道な対処を行うことでコアウェブバイタルの対策・改善を進めることができます。

一方で、全ての監査項目がコアウェブバイタルに関係しているわけではありません。
そこで、「次に関連する監査を表示」という欄からはLCP、TBT（FIDについては相関性を有する指標）、CLSに絞り込むことで、コアウェブバイタルの対策・改善における優先順位策定の参考にすることができます。

LCPは、ページが読み込まれてからページ内の最大のコンテンツが表示されるまでの速度を計測したものです。
Webサイトのデザインにもよりますが、多くのケースではファーストビューに存在するキービジュアル画像・動画の表示速度を指すことになるかと思います。

その為、そもそもページ内の最大画像をそこまで大きな画像にしなければ、更に言えばキービジュアル画像・動画を無くせば、LCPは自ずと向上します。
大抵のWebサイトでプライバシーポリシーなどテキストだけのページでLCP点数が高いのはそのためです。

しかしデザインやコンテンツ内容の兼ね合いで大きなコンテンツを手放せない場合は、地道にLCP低下の原因をつぶしていく必要があります。

LCPを改善する方法として、PageSpeed Insightsの監査項目を参考にしながら、バックエンドの高速化、ネットワークの高速化、レンダリングの高速化に分類して対策・改善を実施していきます。
この高速化対策については、当社の「WordPressの高速化対策」サービスのページをご覧ください。

コアウェブバイタルの対策で最も対策が必要な指標が、このLCPになります。

FIDは、ユーザーが最初にボタンをクリック・タップするなどの操作を行ってから、ブラウザがその操作に応じて実際にイベントハンドラーの処理を開始するまでの時間を計測した指標です。
しかしながら、ユーザーがクリック・タップなどの操作を行ってからブラウザが実際に処理を行うまでの時間については、通常の処理であればユーザーを100ミリ秒以上待たせるようなことはまず考えにくく、入力遅延の多くは、メインスレッドにおいてはJavaScriptファイル等の解析と実行が混み合っており、ブラウザがビジー状態になっていて、ユーザーの操作に対応できない時間がある場合に起こります。

この為、メインスレッドがブロックされることで、入力の応答性が妨げられる時間を計測した指標であるTBT（Total Blocking Time、合計ブロック時間）の対策と改善が、FIDの対策・改善に役にたつことになります。

TBTの改善方法は、メインスレッドにおいてJavaScriptファイル等の解析と実行が混み合わないようにすることですので、基本的には前述した「WordPressの高速化対策」サービスのページにあるレンダリングの高速化対策を実施することで改善を目指すことになります。

また、「過大なDOMサイズの回避」項目で監査が失敗になる条件は以下の通りです。

・合計で1,500を超えるノードがある。

・深さが32ノードを超える。

・60を超える子ノードを持つ親ノードがある。

DOMのノードは要素のことを指しますので、htmlのタグ一つ一つとイメージすると分かり易いでしょう。
htmlのタグ数を多くしすぎないこと、階層を深くしすぎないこと、一つのタグ内に子要素を設けすぎないことをマークアップの時に意識することが、TBTやFID対策として有効と言えるでしょう。
既存サイトの場合でも、スライダーの表示数（隠れているが、見えない要素の数）等を減らすことでノードを減らすことができます。

CLSは、Webページで起きるレイアウトのずれを計測したものです。

コアウェブバイタルの対策で、LCPに次いで対策が必要な指標がCLSとなりますが、CLSの対策・改善は、LCPよりもシンプルで、原則としてCLSに関連する３つの監査項目をクリアすればCLSの対策・改善が可能です。

特にWordPressで構築されたWebサイトに関してはCLSの問題は起こりにくいので、その点も付記していきたいと思います。

(1) 合成されていないアニメーションは使用しない

合成されていないアニメーションは、ローエンドのモバイルデバイスや、メインスレッドでパフォーマンスの重いタスクが実行されている場合に、滑らかに表示されないことがあります。
しかしながら、この監査項目については、アニメーションを合成せずに使用することは実務上ほぼ考えにくい為、この監査項目については特に問題にならないのではないかと考えております。

(2) レイアウトが大きく変わらないようにする

レイアウトが変わると判定されるケースで当社が把握しているものは、ユーザーの操作によらずにバナーやボタンが動くケース（JavaScriptでスクロールに追随するバナー・ボタンなどを設置している等）や、スライダーで大量の画像の読み込みに時間がかかってしまいレイアウトが動くケース、Webフォントの読み込みに時間がかかってしまいレイアウトが動くケース、Lazy Loadでの代替画像と遅延読み込みされた画像のサイズが異なる場合等があります。

対応策としては、スクロール追随型のバナーやボタンを使用しないようにする、スライダーは使用しないか最初から表示領域を確保する、Webフォントは極力使用しない、Native Lazyloadを利用するなどがあり、当社のコーポレートサイトでもこれらの対応でレイアウトが大きく変わらないようにしています。

(3) 画像（imgタグ）や動画にwidth, heightの値を指定しておく

画像や動画にwidthやheightが指定されていないと、実際に読み込まれるまで画像のサイズがブラウザで判別されないため、これらを指定しておくことでレイアウトのずれを防止します。

また、CSSでアニメーションを行う際はtransformプロパティを使用し、width, heightやleft, topなどの値自体を変更しないようにします。

ここまでコアウェブバイタルの解説と測定方法、対策・改善方法についてご紹介させていただきましたが、今後もコアウェブバイタル指標の見直し等は適宜行われることが予想されます。

刻々と変わっていく情報を網羅的にキャッチアップし、対策を実施し続けることで最高水準のコアウェブバイタルを保つことは容易なことではありません。
また、今回ご紹介した手法もあくまで当社サイトを元にした対策・改善手法にすぎないため、Webサイト毎に改善策があり、それぞれ入念な検証と対策が必要となります。

Webサイト制作は、単価が安く、日々時間に追われまくっている業界のため、全ての案件で完璧なコアウェブバイタル対策を実践できるわけはないのです（心の叫び！）。

皆さんのWebサイト制作・保守管理を担当されているWeb制作会社さんに対しても、可能な範囲で勉強と努力をされていても期待通りの総合点数を出せないことが十分にありうることをご理解いただき、優しいご対応をしていただけますと幸いです。