当サイト使用テーマ:「SWELL」を見てみる >>

【図解あり】コアウェブバイタル(LCP・FID・CLS)とは?【2021年6月アルゴリズムアップデートで実装】

URLをコピーする
URLをコピーしました!
  • コアウェブバイタルって何?
  • 2021年6月のアップデートでランキング要素に追加されるって聞いたんだけど?
  • ちょっと調べたけど横文字だらけでよくわからない!

2021年6月に予定されているアルゴリズムのコアアップデートでランキング要素に取り入れられるコアウェブバイタル

コアウェブバイタルとは読者の快適度を数値化して表したものです。

今後はこのコアウェブバイタルを意識したサイトづくりが、より一層重要になってきます。

この記事はGoogle公式が公開しているSEO情報などをもとにしてコアウェブバイタルについてわかりやすく解説します。

この記事でわかること
  • コアウェブバイタルの概要(図解)
  • コアウェブバイタルがランキングに与える影響
  • コアウェブバイタルを計測するツール
  • コアウェブバイタルを改善する方法

この記事を読めば、だれでもコアウェブバイタルについて理解し対策できるようになります

しばゆー

コアウェブバイタルは2021年6月のアップデートで追加される重要な指標です。

コアウェブバイタルについて理解し、対策できるようになりましょう。

運営者プロフィール・Twitter(@shibayu_blog
記事の内容

コアウェブバイタルとは?読者の快適度を数字で表したもの

コアウェブバイタルとは「読者の快適度合いをわかりやすく数値化したもの」です。

ウェブバイタルとは質の高いユーザーエクスペリエンス(ユーザー体験)を読者に提供するためのGoogleの指標です。

ユーザーエクスペリエンスとは?

読者が得られる情報以外の価値のこと。

ウェブバイタルの中でも核となる以下の3つの指標を「コアウェブバイタル」といいます。

詳しくは次の項で説明します。

  • LCPLargest Contentful Paint)
  • FIDFirst Input Delay)
  • CLSCumulative Layout Shift)
しばゆー

むずかしい英語はおぼえなくても大丈夫です。

快適さを数値化してるんだな。」くらいの認識でOK!!

コアウェブバイタル3種類の指標|LCP・FID・CLS

コアウェブバイタルには以下の3種類があります。

コアウェブバイタル|3つの指標
  1. LCPLargest Contentful Paint)
    読み込みの速さ
  2. FIDFirst Input Delay)
    反応の速さ
  3. CLSCumulative Layout Shift)
    レイアウトのズレ
しばゆー

横文字だらけですが、図解を使ってわかりやすく解説します。

LCP:ページ表示の速さ

LCP(読み込み速度)

Largest Contentful Paint(LCP)メトリックは、ページが最初にロードを開始したときと比較して、ビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間を報告します。

最大のコンテンツフルペイント(LCP)|Google

LCPとは、「読者がURLをクリックしてからページが表示されるまでの時間」のことです。

URLをクリックしてからページが表示されるまでの時間が速ければ速いほど、読者にとって快適なサイトになります。

シバ犬

読み込みにすごく時間がかかる記事」と「すぐに読み込む記事」だったら後者のほうが快適だよね!

評価基準は以下のとおりです。

  • 良好:2.5秒以下
  • 改善:4秒以下
  • 不良:4秒超過
しばゆー

ページ表示スピードが早いほど読者は快適に感じますよ!

FID:反応の速さ

CLS(ブラウザ反応速度)

FID は、ユーザーが最初にページと対話したとき (つまり、リンクをクリックする、ボタンをタップする、またはカスタムの JavaScript ベースのコントロールを使用する) から、ブラウザーが実際にイベント ハンドラーの処理を開始できるまでの時間を測定します。

最初の入力遅延 (FID)|Google

FIDとは「(以下のような)読者の動作にブラウザが反応するまでの時間」のことです。

  • スクロール
  • クリック(タッチ)
  • 拡大・縮小
  • 文字の入力

など

読者の動作に対するブラウザの反応が速ければ速いほど、読者にとって快適なサイトと言えます。

シバ犬

自分の動作に対して遅れて動き出す。

たしかにこんなサイトは快適じゃないなぁ。

評価基準は以下のとおりです。

  • 良好:100ミリ秒以下
  • 改善:300ミリ秒以下
  • 不良:300ミリ秒超過
しばゆー

動作に対するブラウザの反応が早いほど読者は快適に感じますよ!

CLS:レイアウトのズレ

CLS(レイアウトのズレ)

CLSは、ページの存続期間全体で発生するすべての予期しないレイアウトシフトについて、すべての個々のレイアウトシフトスコアの合計を測定します。

累積レイアウト シフト (CLS)|Google

CLSとは「ページのレイアウトがずれる量」のことです。

ページ内のリンクをクリックするとき。

突然広告が現れて変なところをクリックしてしまった!!」という経験をしたことがある人は少なくないと思います。

このときのレイアウトのズレを「CLS」と言います。

レイアウトがズレる量が少なければ少ないほど読者にとって快適なサイトと言えます。

シバ犬

レイアウトがズレて変なところをクリック。

読者はイライラするよね…

評価基準は以下のとおりです。

  • 良好:0.1以下
  • 改善:0.25以下
  • 不良:0.25超過
しばゆー

レイアウトのズレが少ないほど読者は快適になりますよ!

2021年6月中旬のコアアップデートで追加されるコアウェブバイタルは上述した3種類ですが、今後はさらに追加される可能性もあります。

 Core Web Vitalsを構成するメトリックは、時間の経過とともに進化します。2020年の現在のセットは、ユーザーエクスペリエンスの3つの側面(読み込み、インタラクティブ性、視覚的安定性)に焦点を当てており、次の指標(およびそれぞれのしきい値)が含まれています。【Google翻訳】

Web Vitals|Evolving Web Vitals 

【2021年6月中旬から】コアウェブバイタルがランキング要素に!

2021年6月のSEOアルゴリズムコアアップデートでコアウェブバイタルがランキング要素に組み込まれます。

2021 年 6 月中旬より、ランキング システムの一部としてページ エクスペリエンスの使用を開始します。ただし、ページ エクスペリエンスは、8 月末までランキング システムの一部として組み込まれ、完全に置き換えられるわけではありません。一度に追加するのではなく、この期間にわたって徐々に追加していきます。


ページ エクスペリエンスの更新に対応するための期間ほか
ページエクスペリエンスとは?

読者がページから得られるユーザー体験のことです。

ページに書いてある情報以外の価値

その中でも快適度が数値化されているものがコアウェブバイタルです。

※ユーザーエクスペリエンスと同義です。

いままでは「コンテンツの質」によるユーザー満足度がおもに重視されていましたが、「これからはユーザーの快適度も判断して検索結果を決めるよ!」ということですね。

しばゆー

6月中旬で一気に変わるのではなく6月中旬〜8月末にかけて徐々に変更されていくようです。

コアウェブバイタルの影響度|結局はコンテンツが重要

コアウェブバイタルの影響ってどれくらいあるの?

そう思う方も多いと思います。

コアウェブバイタルが評価基準に加わったとしても、Googleの上位表示を決めるアルゴリズムでは今までと変わらずに「コンテンツの質」が優先されます。

Googleの公式発表には以下のような記述があります。

ページ エクスペリエンスの構成要素はすべて重要ですが、ランキングでは、ページ エクスペリエンスの一部の要素が平均以下であっても、総合的に優れた情報を含むページが優先されます。優れたページ エクスペリエンスが関連性の高い優れたコンテンツに勝ることはありません。しかし、同様のコンテンツを含むページが複数ある場合は、ページ エクスペリエンスが検索ランキングで非常に重要になります。

要約すると「あくまで重要なのはコンテンツの質。でも同じ質のコンテンツであればコアウェブバイタルの評価が良い方を上位表示させるよ。」ということです。

コンテンツの質」が大事なのはこれまでと変わりません。

ですが評価基準に加わった以上、コンテンツの質とコアウェブバイタルを両立させる必要があります。

コアウェブバイタルの数値を確認する方法|サーチコンソール+その他3種の公式ツール

コアウェブバイタルの数値はおもに以下の4つのツールで確認できます。

※すべてGoogle公式のツールです。

コアウェブバイタルの確認ツール
  1. サーチコンソール
  2. ページスピードインサイト
  3. lighthouse(Chrome拡張)
  4. Web vital(Chrome拡張)

基本的には「サーチコンソール」を使用すればOKです。

その他のツールは補助として使用してください。

サーチコンソールでコアウェブバイタルの評価を確認する方法

STEP
サーチコンソールを開く

まずはサーチコンソールを開いて下さい。

>>Google Search Console

Search Consoleを開く
STEP
ウェブに関する主な指標を開く

サーチコンソールのホーム画面左側タブからエクスペリエンスウェブに関する主な指標をクリックしてください。

「ウェブに関する主な指標」をクリック

ウェブに関する主な指標コアウェブバイタル

以下の画面が表示されればOKです。

この画面で良好改善不良がそれぞれ何件あるのかがわかります。

コアウェブバイタル|ホーム画面
STEP
レポートを開く

レポートを開くをクリックしてください。

ここから先はモバイルでもPCでもやり方は同じです。

「レポートを開く」をクリック
STEP
コアウェブバイタルのステータスを表示

良好改善不良すべてにチェックを入れてください。

クリックでチェックできます。

これでコアウェブバイタルのステータスとその数が棒グラフで表示されます。

すべてのステータスにチェック

グラフの下の詳細には各ステータスと問題点と該当するURLの数が表示されます。

ステータスの詳細
STEP
各ステータス・問題のある記事URLを確認

詳細確認したい行から各行の内容を確認することができます。

ステータスごとの任意の行をクリック

クリックすると以下のような画面が表示されます。

の中から任意の行をクリックして下さい。

※筆者のサイトは現在「良好」しかないため、「良好」の画面で解説します。

URLごとの任意の行をクリック

右側に以下のようなタブが表示されます。

上部には選択した行の平均値が表示され、下部には該当するページのURLが表示されます。

対象URLの確認

これでエラー内容と、エラーとなっている対象URLを確認することができました。

さらに各記事の詳細を確認したい方はSTEP6〜を行ってください。

STEP
ページスピードインサイトに移動(エラーの詳細を確認したい方のみ)

PAGESPEED INSIGHTをクリックするとページスピードインサイトに移動することができます。

PAGESPEED INSIGHTをクリック
STEP
ページスピードインサイトで各記事の評価(詳細)を確認

ページスピードインサイトへ移動すると以下のような画面が表示されます。

これはSTEP1で選択したURLのページスピード評価です。

ページスピードインサイト|評価結果

このページでコアウェブバイタルの評価を確認することができます。

ページスピードインサイトでコアウェブバイタルの評価を確認する方法

ページスピードインサイトでもコアウェブバイタルを確認することができます。

フィールドデータの確認方法

フィールドデータには、実際にあなたのウェブサイトに訪問した読者のデータをもとに算出された数値が表示されています。

画面の左下がLCP(ページ表示速度)右上がFID(ブラウザの反応速度)右下がCLS(レイアウトのズレ)となっています。

フィールドデータの確認

ラボデータの確認方法

ラボデータには仮想環境で算出されたデータが表示されます。

画面の左下がLCP(ページ表示速度)右下がCLS(レイアウトのズレ)となっています。

FID(ブラウザの反応速度)についてはラボデータには表示されないため、中段右側に表示されているTBT(FIDの類似指標)を代わりに確認して下さい。

ラボデータの確認方法

(参考)Origin Summaryの確認方法

Origin Summaryでは、28日の間に表示されたすべてのページの平均値が表示されています。

各ページ単体の数値ではないため注意して下さい。

フィールドデータ同様、画面の左下がLCP(ページ表示速度)右上がFID(ブラウザの反応速度)右下がCLS(レイアウトのズレ)となっています。

Origin Summary

改善項目・診断

ページスピードインサイトでは、改善できる項目を確認することもできます。

これらの改善項目を解消することでコアウェブバイタルの評価改善に繋がります。

改善できる項目
アプリケーションのパフォーマンス診断

その他の計測ツール(Light house・WebVitals)

Light house」と「WebVitals」はGoogleChromeの拡張機能です。

どちらもラボデータを確認できる拡張機能です。

Chromeに追加するだけで気軽に測定できますので入れておくのがおすすめです。

しばゆー

気軽に確認するならこの拡張機能を使用するのもアリですよ!

コアウェブバイタル(LCP・FID・CLS)を改善する方法

コアウェブバイタルを改善する方法をそれぞれ紹介します。

簡単にできるところからでいいのでぜひやってみてください。

LCPを改善する方法

LCPが悪化する原因は以下のとおりです。

  • サーバーの応答時間が遅い
  • レンダリングをブロックする JavaScript と CSS
  • リソースのロード時間
  • クライアント側のレンダリング

これらの原因を取り除けばLCPを改善することができます。

初心者でもできる簡単な方法は、画像の圧縮遅延読み込み画像を次世代フォーマット(WebP)にすることです。

具体的な改善方法は以下の記事やサイトを参考にしてみてください。

FIDを向上させる方法

FIDが悪化する原因は以下のとおりです。

  • サードパーティコードの影響
  • JavaScript の実行時間が長い
  • メインスレッドの作業が多い
  • リクエスト数が多く転送サイズが大きい

これらの原因を取り除けばFIDを改善することができます。

具体的な改善方法は以下の記事を参考にしてみてください。

>>Core Web VitalsのFID(First Input Delay)を改善する「JavaScriptを軽量化する」方法

CLSを向上させる方法

CLSが悪化する原因は以下のとおりです。

  • サイズ指定のない画像
  • サイズ指定のない広告、埋め込み
  • 動的に挿入されたコンテンツ
  • チラつきの原因となるWebフォント

これらの原因を取り除けばCLSを改善することができます。

具体的な改善方法は以下の記事を参考にしてみてください。

少しむずかしいので余裕があればで結構です。

LCP・FID・CLSを総合的に改善する方法

Googleアドセンスの広告を遅延表示させることでLCP・FID・CLSを総合的に改善できる可能性が高いです。

以下の記事で詳しく解説していますので興味のある方はやってみてください。

まとめ|コアウェブバイタルは読者の快適度を数値化したもの

2021年6月に予定されているアルゴリズムのコアアップデートでランキング要素に取り入れられるコアウェブバイタル

コアウェブバイタルとは読者の快適度を数値化して表したものです。

今後はこのコアウェブバイタルを意識したサイトづくりが、より一層重要になってきます。

コアウェブバイタル|3つの指標
  1. LCPLargest Contentful Paint)
    読み込みの速さ
  2. FIDFirst Input Delay)
    反応の速さ
  3. CLSCumulative Layout Shift)
    レイアウトのズレ

コアウェブバイタルはサーチコンソールページスピードインサイトを使って確認することができます。

コンテンツの質」が一番重要なのは今までと変わりませんが、コアウェブバイタルもアルゴリズムに組み込まれる要素なので両立する必要があります。

しばゆー

まずは自分のサイトの数値を確認し、かんたんにできるところから改善していきましょう。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

コメント

コメントする

CAPTCHA


記事の内容
閉じる