SEO対策

【攻略】コアウェブバイタル(LCP/FID/CLS)とは?2021年の“Google最新指標”を要チェック!

ジャス㌧

この記事では、Googleの新しい指標であるコアウェブバイタルについて解説しているとん

収益化ブログの運営でSEO対策が必須なのは、すでにご存知だと思います。

そのSEO対策のためにはGoogleのアルゴリズムに従わなければいけません。

ただ、Googleアルゴリズムというのは常に進化しており、こちらも常に情報を仕入れ、それに対応していく必要があります。

これは検索上位を目指す以上、避けては通れない道です。

そして、Googleのアップデートでは常に新しい用語や仕様が追加されていきます。

今回解説するコアウェブバイタルもその一つです。

聞きなれない言葉だと思いますので、今回はGoogleが新しく取り入れる指標「コアウェブバイタル」について解説していきます。

新指標コアウェブバイタルとは?

ジャス㌧

コアウェブバイタルってなんだぷう?

コアウェブバイタル(Core Web Vitals)とは、ウェブサイトのユーザーエクスペリエンス(操作性)などを評価するために、Google社が開発した新たな評価項目です。

Googleは、自社の検索エンジンに表示するサイトの順位をさまざまな項目から判断して決定しています。

その評価基準の中に、新たにコアウェブバイタルという基準が設けられることになりました。

検索順位にダイレクトに響いてきますので無視できませんね。

このコアウェブバイタルには、下記の3つの項目が存在しています。

  • LCP
  • FID
  • CLS

ただのアルファベットの羅列でなんのことかさっぱりわからないと思いますので、それぞれの意味を解説していきます。

LCPとは?

まずLCPとは何なのかについて解説します。

LCPとは「Largest Contentful Paint」の略で、ページ内でメインとなるコンテンツが表示されるまでの速度を表す項目になります。

簡単にいうと「表示速度」になりますね。

LCP=メインコンテンツが表示されるまでの速度(表示速度)

ただこの表示速度は、ページの中で「メインとなるコンテンツ」という点がポイントです。

このメインとなるコンテンツは、サイトによって要素がテキストだったり、画像だったり、その他の部分だったりします。

ユーザーがページで最も有意義なコンテンツをどのくらい早く見ることができるかを表します。感覚的な読み込みスピードを測定し、ページ読み込みタイムラインにおいてページの主要コンテンツが読み込まれたと思われるタイミングを指します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

画像圧縮で対応したりページ自体の読み込み速度を改善することで、LCPの基準はクリアできると思います。

ちなみにLighthouseというChrome拡張機能を使えば該当要素を検出可能ですので、具体的な方法については後ほど解説しますね。

FIDとは?

FIDとは「First Input Delay」の略で、ページが表示されたあと、ユーザーが次の操作を行えるようになるまでの時間を指しています。

FID=ページ表示後、次の操作を行えるようになるまでの時間

ユーザーの操作は様々で、「ページのスクロール」や「ボタンのクリック」などがこれに当たります。

最初の入力までの遅延を表します。応答性を測定して、ユーザーが最初にページを操作しようとする場合に感じるエクスペリエンスを定量化します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

稀に、ページは表示されているのにスクロールが出来なかったり、ボタンをタップしているのに反応しないといったサイトに出くわすこともあるでしょう。

そういったサイトへの評価基準としてFIDが設けられたと考えられます。

ページをただ開くだけではなく、アクションまでどれくらい時間がかかるのかも見られますので、より気を遣ってサイトを作っていく必要がありますね。

CLSとは?

CLSとは「Cumulative Layout Shift」の略で、予期せぬページレイアウトの乱れが起きないかという項目になります。

ボタンをクリックしようとしたらパーツが少しズレてクリック出来なかったり、予期せぬところで勝手に広告をクリックしてしまったりと、ユーザーを混乱させるレイアウト崩れがないのかという項目になります。

CLS=予期せぬページレイアウトの乱れの量

ページがどのくらい安定しているように感じられるかを表します。視覚的な安定性を測定し、表示されるページ コンテンツにおける予期しないレイアウトのずれの量を定量化します。

https://developers-jp.googleblog.com/2020/05/web-vitals.html

ブログ運営で広告の成約率を高めようとする際、稀にポップアップ広告やスライダー形式の広告で成約を取ろうとする方がいます。

しかし、それはユーザーの誤クリックを誘発するものであり、普通に閲覧していても不快に思います。

そういったサイトはこのCLSという新たな指標で低評価を受け、ページの評価が下がる可能性も否めません。

ですので、これからは変な方法で無理矢理広告に誘導するようなレイアウト構成は避けるようにしましょう。

ジャス㌧

これからはユーザーの快適さを追求するトン!

LCP/FID/CLSの基準値

ここで各項目の基準値についてある程度把握しておきましょう。

コアウェブバイタルの各数値の目安はこちらになります。

高速改善の余地あり低速
LCP2.5秒未満4秒以下4秒以上
FID100ミリ秒未満300ミリ秒以下300ミリ秒以上
CLS0.1未満0.25以下0.25以上
https://web.dev/vitals/#core-web-vitals

後ほどご自身のサイトのコアウェブバイタルが計測できるツールをご紹介するので、その際に参考にしてください。

導入時期はいつになる?

実は、このコアウェブバイタルは2021年2月現在、すでに反映されている指標ではありません。

ただし今後、順位決定の指標に加わる予定になっています。

Googleによるとコアウェブバイタルの導入は、2021年の5月になると発表されています。

本日、ページ エクスペリエンス シグナルを導入したランキングを 2021 年 5 月にリリースすることを発表いたします。新しいページ エクスペリエンス シグナルは、ウェブに関する主な指標と既存の検索シグナル(モバイル フレンドリー、セーフ ブラウジング、HTTPS セキュリティ、煩わしいインタースティシャルに関するガイドラインなど)を組み合わせたものです。

https://developers.google.com/search/blog/2020/11/timing-for-page-experience

まだ適応まで時間がありますので、改善の余地がある場合は改善するに越したことはないでしょう。

ただ、今のところ検索順位にどれくらいのインパクトがあるのかは不明な状態です。

ですので、個人ブロガーの方はしばらく様子を見てから改善するのでも遅くはないと思います。

サイト表示スピードが早いに越したことはないですが、そこまで焦る必要はないでしょう。

コアウェブバイタルがSEOに与える影響

ジャス㌧

コアウェブバイタルはSEOにどんな影響を与えるんだぷう?

Googleの重要なアップデートということは、少なくとも検索順位への影響はあるでしょう。

ただし、それが今のところどれくらいのインパクトなのかは、わかりません。

私的には、今まで上位にいたコンテンツが急に圏外に飛ばされるような、急激な変化はないと見ています。

なぜなら、サイトの表示スピードなどは現在の検索アルゴリズムでもある程度重要視されているからです。

現在、上位にいるサイトの表示速度はある程度速いと思いますので、コアウェブバイタルが適応されたからといっていきなり圏外になることはないでしょう。

ですが、コアウェブバイタルによってより細かくサイトの構造を見られることなりますので、今までよりも少し評価が下がることは十分考えられます。

そこまで怖がる必要はないと思いますが、ある程度は気にかけておいた方が良いでしょう。

コンテンツとどちらが重要?

「コアウェブバイタルの影響」と「ウェブサイトのコンテンツ」どちらが重要なのか?という質問も飛んできそうなので、念の為解説していきます。

これについては、正直どちらも重要です。

ただ、強いて挙げるのであれば、コンテンツの方が重要度は高いのではないかと思います。

コアウェブバイタルの数値がすべて致命的だった場合は、そちらを優先して改善する必要があるでしょう。

しかし、よっぽどおかしな設定をしない限り、コアウェブバイタルで致命的な評価をもらう方が難しいのではと思います。

ですので、この部分でライバルと差をつけるのは厳しいため、結局のところはコンテンツの質で勝負するしかありません。

このような考えを持って、引き続きコンテンツに力を入れていくと良いと思います。

コアウェブバイタルの改善方法

ジャス㌧

コアウェブバイタルの改善方法を教えて欲しいぷう

適応はまだ先ですが、コアウェブバイタルの項目を改善する方法について先に解説していきたいと思います。

準備しておくに越したことはありませんので、出来ることから取り組んでいきましょう。

LCPの改善方法

まずはLCPを改善する方法から解説していきますね。

基本的に行うことは、サイトの表示速度を速める方法になります。

  • サーバーの乗り換え
  • テーマの切り替え
  • 画像の圧縮
  • ソースコードの圧縮

サーバーの乗り換え

まず出来ることとして、サーバーの乗り換えがあります。

ブログを開設する際には必ずサーバーを契約すると思いますが、そもそもそのサーバーが低性能ですとサイトの表示速度が遅くなります。

ですので、早いうちに、性能の高いサーバーを検討しましょう。

ちなみに、弊社のジャストサーバーはアフィリエイトに特化したサーバーですので、ぜひご検討ください。

テーマの切り替え

続いてはテーマの乗り換えです。

ブログデザインには必須のテーマですが、このテーマの性能によってもサイトの表示速度が変わってしまいます。

デザイン以外にも機能面で差が出る部分ですので、こちらの記事を参考に色々なテーマを試してみましょう。

画像の圧縮

続いては画像の圧縮です。

LCPはメインのコンテンツの表示速度が判断材料になります。

その際に画像がメインコンテンツ扱いされることもありますので、画像の容量圧縮は必ず行いましょう。

画像圧縮は、こちらの超便利なプラグインの導入がおすすめです。

ソースコードの圧縮

続いてはソースコードの圧縮になります。

ブログを構成している、様々なプログラミングコードを圧縮することによって、読み込み速度を上げることが可能です。

こちらについても効果的なプラグインがありますので、こちらを使用することをおすすめします。

ジャス㌧

サーバー乗り換えとプラグインの導入でサクサク!

FIDを高める方法

続いてはFIDを高める方法になります。

  • テーマの変更
  • 余計な機能を追加しない
  • プラグインを待つ

テーマの変更

FIDについても、テーマによる影響が大きいです。

対処方法は先ほどと同じになります。

余計な機能を追加しない

テーマには様々な機能がついていると思います。

一番無難な対処方法としては、余計な機能をあまりつけないということでしょう。

特にアニメーションを使ってパーツを動かす機能などは、速度低下の一因にもなってしまいます。

ブログをおしゃれにすることは重要ですが、そこまで機能をてんこ盛りにしなくてもある程度見た目は整いますので、余計な機能をつけないようにしましょう。

プラグインを待つ

また、FIDの対処方法として、ソースコードをいじる方法もあるようです。

ただそれは初心者には出来ないことですので、プラグインの開発を待って対応するのが無難だと思います。

ただ、FIDについては、よっぽど変な改造をしない限り基準を下回ることはありませんので、その点は安心出来ると思います。

ジャス㌧

テーマ変更と機能の見直しが有効トン!

CLSを高める方法

続いては、CLSを改善する方法になります。

  • パーツの前後に余白を開ける
  • 余計な機能を追加しない

パーツの前後に余白を開ける

CLSは誤クリックなどのトラブルを避ける必要がありますので、なるべくパーツの前後に余白を開けるなどの対策が有効です。

広告は広告だとわかりやすく設置するなどの工夫をしておけば、特に問題ないでしょう。

余計な機能を追加しない

CLSについても、基本的には余計な機能を追加しなければ問題ありません。

ポップアップ広告やスライド広告は、クリック率が上がるかもしれませんがユーザーの評価はかなり下がりますので、使わないようにしましょう。

コアウェブバイタルを確認するツール

ジャス㌧

コアウェブバイタルはどうやって計測すればいいんだぷう?

続いては、コアウェブバイタルの数値を実際に確認する方法について解説したいと思います。

便利なツールがありますので、そちらをまずは紹介しますね。

PageSpeed Insight

https://developers.google.com/speed/pagespeed/insights/

他の記事でも紹介しましたが、こちらはページスピードを計測できるWEB上のツールになります。

自分のサイトのURLをワンクリックで分析することが可能ですので、実際に試してみましょう。

計測結果は、すぐ上に表示されます。

サーチコンソール

https://search.google.com/search-console/about?hl=ja

ご存知のサーチコンソールでもコアウェブバイタルを確認することができます。

まずは左メニューの「ウェブに関する主な指標」をクリックしましょう。

すると、「レポートを開く」という箇所がありますのでクリックします。

CLSに関する問題があることがわかりました。

クリックすると、該当のURLを確認可能です。

web.dev’s measure tool

https://web.dev/measure/

こちらのサイトでも、コアウェブバイタルを調べることが可能です。

URLを入力してクリックをするだけですので試してみましょう。

こちらでもLCPとCLSを確認できますので、試してみてください。

Lighthouse

こちらはGoogleChromeの拡張機能になりますが、2021年2月にChromeにデフォルトで実装されました。

こちらの機能を使うとLCPの対象になっている要素が視覚的に判断できるので、試してみましょう。

該当のサイトをGoogleChromeで開き、右クリックを押して「検証」をクリックします。

するとページの右側にHTMLやCSS(難しそうなコード)が出てきますが、その画面は理解できなくても大丈夫です。

右上に「Lighthouse」というタブが出るので、それをクリックしてみましょう。

すると下のような画面になります。

「Generate report」というボタンを押して、しばらくするとレポート画面が表示されるので、次は「View Original Trace」をクリックしましょう。

すると、また難しそうな画面が出てきますが、これはそのページでどんな要素が順番に読み込まれているのか表している画面になります。

「Timings」という項目に「LCP」のタグが表示されているのがお分かりでしょうか?

マウスをLCPに合わせると、左のプレビュー画面でLCPに該当する項目にハイライトが当たるので、これで該当要素を判断可能です。

モバイル版のジャストサーバーのTOPでは、LCPはヘッダー下の申込みリンク部分が該当するようです。

コアウェブバイタルの今後

コアウェブバイタルは、今後もさらに進化していく可能性が高いです。

今後のユーザーエクスペリエンス(利用しやすさ)の理解を深めるために、Core Web Vitalsを毎年更新し、将来の候補者、動機、および実装状況に関する定期的な更新を提供する予定です。

https://blog.chromium.org/2020/05/introducing-web-vitals-essential-metrics.html

Googleがこのように発表していますので、コアウェブバイタルの項目がさらに細分化されることもありますし、検証ツールも今後アップデートが行われるようです。

現時点では不明な要素が多く、予想でしか対応は出来ませんが、Googleの理念を頭に置いて、ユーザーが利用しやすいサイト作りを行っていきましょう。

Googleから詳しい情報が発表されれば、この記事にも随時追記していきたいと思います。

ジャス㌧

Googleの新指標はライバルと差をつけるチャンスだとん!