今回は、2021年から本格的にSEOの指標として始まると言われているCore Web Vitals(コアウェブバイタル)についてと、その3つの指標「LCP・FID・CLS」の概要を紹介します。
- Core Web Vitalsって何？
- FIDって何？
- LCPって何？
- CLSって何？
Core Web Vitals(コアウェブバイタル)の概要
Core Web Vitals(コアウェブバイタル)とはGoogleがウェブサイトのパフォーマンスやUXの健全性を実現するために新たに提唱したユーザー体験に関する指標です。
”ユーザー体験の良さ”の概念の中には「ストレスを感じさせないページ繊維の動き」「ユーザーが意図する動きの有無」「ユーザーがスムーズに内容を確認出来る」などの事を言い、総じてユーザーファーストなユーザビリティを求められます。
Core Web Vitals(コアウェブバイタル)の指標は全部で以下の3つあります。
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
また、サーチコンソール内では「ウェブに関する主な指標」としてCore Web Vitals(コアウェブバイタル)の分析がされています。
LCPとは？
LCPとは「Largest Contentful Paint 」の略称です。
LCPは、WEBサイトの描画がビューポートに表示されている最大のコンテンツ要素が表示された時間です。つまりファーストビューの閲覧ページで重要かつ割合の大きいコンテンツが表示されるタイミングを計測します。
これは、リソースが読み込まれてレンダリングが開始されるまでだけでは無く、その後のユーザーにとって意味のある状態にまで表示が完了するまでの時間も含まれています。
例えば、メインビジュアルに置いている画像などのHTMLだけを先に読み込み、lazy loadなどで実際の表示を遅らせている場合は、その読み込みが終わり完全に表示されるまでの時間を指します。
そのためLCPの評価が高いサイトは重要コンテンツを逃さず、確実に視認出来る事になるのでユーザー体験が高いと言えます。
ファーストビューは遅延読み込みを行わずにbodyの最初の方に記述。そして背景画像などはhtmlに直接書き込みインライン化。またファーストビューに関係の無いJavaScriptは最後に読み込むか、htmlの最後の行に直接記述する。
画像のサイズ調整をしっかりと行い、端末（画面幅）に対して適したサイズの画像を表示させる。画像以外の要素はレスポンシブ化して端末（画面幅）に対して最適な表示にする。
更なる詳細は以下。
FIDとは？
FIDとは「First Input Delay」の略称です。
FIDは、ウェブサイトがユーザー反応にどのくらい速く対応できるかを把握するための指標です。内容は非常にシンプルで、クリックやタップ、マウスダウン、キーダウン、スクロール、ポインタダウン、タッチスタートのためのイベントハンドラーなど、ユーザーが最初にアクセスしてから実際にイベントが発生し、イベントハンドラを呼び出されるまでの時間を測定します。
通常WEBサイトを閲覧している時は、スワイプすればスクロールされる、クリックすれば何かが開く、マウスを置けば何かが変わる、テキストを入力すると表示が変わる、など何かしらが動作しているかと思います。これらのユーザーの動作に対して実際に返答されるまでの時間です。
そのためFIDの評価が高いサイトはストレスを感じ難く、スムーズに動くWEBサイトとなりユーザー体験は良好と言えます。
ユーザーの動作に関係する記述は全て非同期で読み込む。もしくは優先的に読み込み。
更なる詳細は以下。
CLSとは？
CLSとは「Cumulative Layout Shift」の略称です。
CLSは、ページがどのくらい安定している様に感じるかを示す値です。
HTMLやCSSが安定して読み込まれる事とは別の話で、実際にユーザーがページを見ている際、視覚的に安定して表示がされているかを指します。そのため読み込み途中でレイアウトが変更されたり、ズレていないかを測ります。
WEBサイトは、様々な要素によりページ閲覧中に再読み込みを始めたり、要素の移動やレイアウトの再構築などが行われる場面などがあると思います。それらの要素は基本的にUXの健全性の低下に繋がる要因になりがちです。
そのためCLSの数値が高いサイトは、静的サイトに多い印象です。動的サイトの場合は安定性を維持するために同時に複数の動作が起こらない様にする必要性がありそうです。
CSSやJavaScriptを上書きしない。imgタグに幅と高さを指定。
WordPressの場合、子テーマを使用しない。もしくは上書きでは無く、書き換えるようにfunction.phpで指示する。
遅延読み込みやカルーセルなどのコンテンツが動くようなものはdiv要素で囲うなどして確実にスペースを確保する。
因みにCLSの評価スコアの範囲は0～1 で、0は移動なし、1は移動量が最大であることを意味します。
この指標はユーザーが操作しようとしたときにページ要素が移動すると、UXが低下するためと言われています。そのため極論では一切動作の無いページが良好になりやすいです。
更なる詳細は以下。
Core Web Vitals(コアウェブバイタル)の理想値
- LCP : 2.5秒未満
- FID : 100ミリ秒未満
- CLS : 0.1未満
page speed insightの各々の値では約75%が良好となっていれば合格ラインです。
また上記のCore Web Vitals(コアウェブバイタル)の理想値をサイトが満たしていると離脱率が24%減少すると言われています。
Core Web Vitals(コアウェブバイタル)の3つの指標の具体的な結果はPageSpeed Insightsで参照出来ます。
この様にCore Web Vitals(コアウェブバイタル)の3つの指標はページスピードに密接に関わる指標なので、ページスピードの得点にも影響が出てきます。
まとめ
LCP・FID・CLSはCore Web Vitals(コアウェブバイタル)に関する重要な3つの指標で、ユーザー体験向上のための新たなコンセプトです。
3つの指標とは以下。
| Largest Contentful Paint (LCP) | ファーストビューの最も大きなコンテンツの読み込み速度 |
| First Input Delay (FID） | ユーザーが操作可能になるまでの時間 |
| Cumulative Layout Shift (CLS) | レイアウトが動いてしまわないか否か |
そしてこれらの指標の数値はPageSpeed Insightsでサイトスピードを調べた際にフィールドデータに表示されます。
またsearch consoleでは「ウェブに関する主な指標」との項目でCore Web Vitals(コアウェブバイタル)の3つの指標の評価を抽出したデータ一覧が見ることが出来ます。
より詳しく知りたい方は下記のGoogle Developersのページを参照して下さい。
以上が「Core Web Vitals(コアウェブバイタル)LCP・FID・CLSの概要」でした。
これら3つの指標に関する施策や提案が広がっていき、ビジネスも加速していくと思われます。
自身で対応する術を付けるために、まずは事前知識として、これらの意味を理解しときましょう。
そして次のステップで具体的な改善方法を一つずつ考えていきましょう。
今後、LCP・FID・CLS（Core Web Vitals）の評価の見方と具体的にどのような対応をすれば良いのかを仮説検証をしたうえで紹介していきたいと思ってます。
下記の記事ではCore Web Vitals(コアウェブバイタル)の問題点の場所を確認する方法を紹介しています。合わせてどうぞ。
