こんな方に読んで欲しい!
- Core Web Vitals(コアウェブバイタル)について概要を知りたい
- 「LCP」「FID」「CLS」が何か知りたい
- 「LCP」「FID」「CLS」の改善方法が知りたい
2021年5月からCore Web Vitals(コアウェブバイタル)アップデートにより、ユーザー体験がランキング要素に追加されました。
ユーザー体験をもう少しかみ砕くと、ユーザーが感じる使い勝手を表し、従来の検索意図に合致した良いコンテンツだけがSEO上評価される訳ではなくなったということです。
この記事では、Core Web Vitals(コアウェブバイタル)の内容と、評価項目の「LCP」「FID」「CLS」の改善方法について解説します。
プログラミングスキルがなくても改善できる内容だけに絞って書いているので、誰でも対応可能な内容になっています。
それでは、本編をどうぞ!
ユーザー体験で評価する3つの項目
コアウェブバイタルで評価されるのは、大きく分けて3つあります。
LCP | 最大コンテンツを読み込むまでの時間 |
FID | ページ初期操作の応答時間 |
CLS | ページレイアウトの安定度 |
ページ速度を改善すれば検索順位が上がるかといえば、必ずしもそうではありません。ただ、コアウェブバイタルアップデートにより、ページ速度の重要性が増しているので未対応ではSEO上マイナスになる可能性が大いにあります。
現状、コアウェブバイタルの範囲はモバイル(スマホ)にとどまっているため、SEOのことだけを考えるのであれば、モバイル対応を優先して行いましょう。
それでは、「LCP」「FID」「CLS」について解説します。
LCP
LCPとは、最大コンテンツを読み込むまでの時間を表します。
以下の画像のように、ページを開いたときに、メニューバーが先に読み込まれ、コンテンツ自体がなかなか表示されないことがあります。
これでは、ユーザーの利便性は低くなるのでLCPは低いと判断されます。
LCPと似た指標に、FCP(First Contentful Paint)やFMP(First Meaningful Paint)があります。
FCPは、テキストや画像など何らかのコンテンツが表示されるまでの時間を表す指標です。
LCPとFCPの違いは、LCPが「最大」 の要素が表示されるまでの時間を指すのに対し、FCPが「最初」に読み込まれるまでの時間を指すと覚えておくと良いでしょう。
FMPは、テキストや画像などの中でメインコンテンツが表示されるまでの時間を表す指標です。
LCPと非常に近い概念なので、ほぼ同じととらえておけばいいでしょう。
FIDとは
FIDとは、ページ初期操作の応答時間を表します。
FIDは、ユーザーがページで行う最初の操作でどれくらい時間がかかったかを表し、クリック・タップ・キーを押す動作などでかかった時間です。
画面スクロールやズームはFIDには関係ありません。
以下の画像のように、例えば、ハンバーガメニューを押した後の動作までの時間がFIDです。
CLSとは
CLSとは、ページレイアウトの安定度を表します。
言葉だけでは理解が難しいので、コアウェブバイタルの公式サイトにあるダメな事例の動画を参考にみてみます。
この動画では「No,go back(いいえ、戻ります。)」のボタンを押そうとしたところ、後から遅れてコンテンツが表示されたことで画面全体が下がり、誤って「Yes,place my order(はい、注文してください。)」を押してしまいます。
「No,go back(いいえ、戻ります。)」を連打していますが、注文が完了してしまいます。
LCP、FID、CLSの確認方法
自身のWebサイトの「LCP」「FID」「CLS」は「page speed insights」で評価が確認できます。
「page speed insights」に自身のWebサイトURLを調べると、以下の画像のように「FCP」「LCP」「FID」「CLS」それぞれが評価されます。
以下が、コアウェブバイタルの公式サイトにある評価基準です。
項目 | GOOD | NEEDS IMPROVEMENT | POOR |
FCP | 0~1.8sec | 1.8sec~3.0sec | 3.0sec~ |
LCP | 0~2.5sec | 2.5sec~4.0sec | 4.0sec~ |
FID | 0~100ms | 100ms~300ms | 300ms |
CLS | 0~0.1 | 0.1~0.25 | 0.25~ |
フィールドデータ、Origin Summary、ラボデータの違い
「page speed insights」の中には、フィールドデータやOrigin Summary、ラボデータの項目があります。
フィールドデータとOrigin Summary、ラボデータの違いについて解説します。
結論として、検索順位に影響を与えるのはフィールドデータです。
フィールドデータとは?
フィールドデータは「page speed insights」で計測したページに対して、サイトの表示に掛かった時間をGoogleが収集し反映したものです。
例えばラボデータで全て良好な数値だとしても、実際の閲覧者の通信環境が悪かったり端末性能が悪くてChromeブラウザの処理性能に影響が出ている場合フィールドデータが悪化してしまう可能性があります。
逆にラボデータの値が若干悪くても実際の閲覧者の通信環境が良好だとフィールドデータは合格と判断します。
Origin Summary
フィールドデータと似た指標ですが、フィールドデータが特定ページの評価なのに対し、Origin Summaryはサイト全体の評価です。
Origin Summaryが良好の場合は、全てのページ表示速度が高速化していても、フィールドデータの評価が良好でもOrigin Summaryの評価が低ければ、サイト内のどこかのページが遅いという事です。
ラボデータ
ラボデータは、フィールドデータやOrigin Summaryとは違い、オンデマンドで取得された「今調べている端末」の環境におけるリアルタイムのデータです。
そのため、端末やネットワークの環境によって数値にかなりばらつきが出てしまいます。
一方フィールドデータは「Chrome UX Report」と呼ばれる全世界のChromeユーザーのデータベースをもとにした統計データです。
フィールドデータは、検索アルゴリズムに組み込まれているデータとなるため、検索順位に関わってきます。
LCP、FID、CLSを改善する方法
ここからは「LCP」「FID」「CLS」の改善方法について、公式サイトを参考にしながら解説します。
LCPの改善
LCPが低下する原因は、次のとおりです。
- サーバーの応答時間が遅い
- レンダリングをブロックするJavaScriptとCSS
- リソースの読み込み時間が遅い
- クライアント側のレンダリング
一言で表すなら、ページ表示速度を速くするといえます。
サーバー応答時間が遅い場合は、サーバー側の対応になります。もっとも簡単で効果的な方法はサーバ―のphpバージョンを最新にアップすることです。
契約しているサーバーのphpバージョン変更の方法を調べると簡単に行うことができます。
JavaScriptが遅い場合はレンダリングを速くする改善を行います。
おすすめは「Autoptimize」プラグインを使うことで、WordPressでも簡単に速くすることができます。
リソースの読み込み時間が遅い場合は、ファイルサイズが大きすぎるのが原因なことが多いです。
「EWWW Image Optimizer」プラグインなどを使い、ファイルサイズを圧縮してください。
FIDの改善
FIDが遅低下する原因は、次のとおりです。
- 長いタスクを分割する
- インタラクションの準備のためにページを最適化する
- Webワーカーを使用する
- JavaScriptの実行時間を短縮する
一言で表すなら、JavaScriptの処理を速くするといえます。
特に合計のブロック処理時間のTotal Blocking Time(TBT)を改善することが求められます。
不要なJavaScriptwを削除することやMinify化などで対応可能ですが、プログラミングの専門知識が求められるため素人には危険です。
「EWWW Image Optimizer」プラグインをつかえば、JavaScriptを短縮できるので、まずはプラグインで対応しましょう。
CLSの改善
CLSが低下する原因は、次のとおりです。
- 寸法のない画像
- 寸法のない広告、埋め込み、iframe
- 動的に挿入されたコンテンツ
- FOIT / FOUTの原因となるWebフォント
- DOMを更新する前にネットワーク応答を待機するアクション
一言で表すなら、レイアウトがずれないように対策を行うといえます。
画像サイズが指定されていない場合、「page speed insights」に「レイアウトが大きく変わらないようにする」という項目があり、なんの項目がCLSに悪影響を与えているかがわかります。
まとめ
今回はCore Web Vitals(コアウェブバイタル)アップデートの内容と、評価項目の「LCP」「FID」「CLS」について解説しました。
ユーザー体験を改善したからといって検索順位がすぐに上がるわけではありませんが、Googleがコアウェブバイタルを導入したことは、以降ユーザー体験の重要度が増していく布石にも思えるので、早いうちから対応するに越したことはありません。