記事を検索する

人気キーワード

TOP SEO

コアウェブバイタルとは?LCP/FID/CLSの基礎知識と改善方法について解説

コアウェブバイタルとは?LCP/FID/CLSの基礎知識と改善方法について解説

コアウェブバイタルとは?LCP/FID/CLSの基礎知識と改善方法について解説

Webサイトのパフォーマンスは、ユーザーエクスペリエンスに直結する重要な要素です。特に、ページの読み込み速度やインタラクティブ性などは、ユーザーの満足度や離脱率に大きな影響を与える要素として注目されています。

そこで、Googleが提唱する「コアウェブバイタル(Core Web Vitals)」という指標ができました。コアウェブバイタルは、ウェブページの読み込み速度、インタラクティブ性、コンテンツの安定性などを測定し、ユーザーエクスペリエンスを評価する指標です。

本記事では、コアウェブバイタルの基礎知識からページのパフォーマンスを上げるための改善方法をご紹介します。

コアウェブバイタルの意義を理解し、パフォーマンスを向上させることで、検索エンジンのランキングも上げていきましょう。

コアウェブバイタルはSEO内部対策の重要な要素のひとつです。

関連記事:SEOの内部対策とは?やらなければいけない理由と具体的な施策や実践方法を紹介

Web集客でお困りではありませんか?

デジマケは高い実績を持ったコンサルタントたちがお客様のHP・事業に合わせ、売上の最大化に貢献できる施策をご提案します。

デジマケのサービス概要をみる

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

コアウェブバイタルとは

2021年6月中旬より、UX(ユーザー体験)、いわゆるユーザーの使いやすさが検索のランキング要因に組み込まれました。この取り組みをコアウェブバイタルといいます。

当初のUX指標はGoogleが2020年に発表した「LCP」「FID」「CLS」の3つでしたが、2024年3月よりFIDはINP(Interaction to Next Paint)に置き換えられ、現在は「LCP」「INP」「CLS」の3指標となっています。

デジマケくん
デジマケくん

コアウェブバイタルが大切そうなのは分かったんだけど、なんでこんなに注目されているんですか?

今まではドメインの強さや信頼性とコンテンツの内容が主な順位指標だったのに対し、UX(ユーザー体験)が検索順位の指標に組み込まれたということが大きな違いです。

デジマケくん
デジマケくん

なるほど…。使いやすさも順位に影響するということですね。ちなみに3つの指標がありますが、簡単にいうとどういうことですか?

「LCP」は検索結果からサイトに来た際に一番大きなコンテンツ(画像等)が表示されるまでの時間。

「INP」(旧FID)はページ滞在中のすべてのインタラクション(クリック・タップなど)に対する応答性を測定する指標。

「CLS」はページを開いた際に画像や動画が後から読み込まれて、テキストがガクッと下にずれるなど、レイアウトずれの状態を図るための指標となります。詳しい説明はこの後の解説でご確認ください。

コアウェブバイタルの3つの指標

コアウェブバイタルの3つの指標

LCP(Largest Contentful Paint)

「最大コンテンツの描画」の意味で、ユーザーの認識としてのページ表示速度を測る指標。
ブラウザの表示範囲内で、最も大きなコンテンツ(画像・動画の初期表示画像・背景画像のある要素・テキストを含むブロックレベル要素など、そのページでメインとなるコンテンツ)が表示されるまでの時間。値が小さいほどUXが良いという評価になります。

INP(Interaction to Next Paint)※旧FID

「次の描画までのインタラクション」の意味で、ページ全体のインタラクティブ性を測る指標。2024年3月にFID(First Input Delay:初回入力遅延)から置き換えられました。

FIDはユーザーの最初の操作のみを測定していましたが、INPはページ滞在中のすべてのインタラクション(クリック・タップ・キーボード入力など)の応答性を測定し、最も遅い応答時間を指標とします。値が小さいほどUXが良いと判断されます。

CLS(Cumulative Layout Shift)

「累積レイアウト変更」の意味で、視覚要素の安定性を示す指標。
ユーザーが意図せぬレイアウトのずれがどれぐらい発生したかを独自の「レイアウトシフトスコア」で表す。値が小さいほどUXが良いと判断されます。

引用:Google Developers Japan Web Vitals の概要: サイトの健全性を示す重要指標

導入の経緯

ページエクスペリエンスアップデートは元々2021年5月の導入予定でしたが、1ヶ月半延期され、2021年6月中旬より正式に導入されました。

2021年8月末までに段階的にランキングシステムの一部として組み込まれ、現在ではコアウェブバイタルは検索ランキングの重要な要素として定着しています。

ページエクスペリエンスアップデートの経緯

  • 元々は2021年5月の導入開始予定だったが、2021年6月中旬に延期された
  • ランキングシグナルとして完全に組み込まれたのは2021年8月末
  • 2024年3月にFIDがINPに置き換えられた
  • 現在ではランキング要因として定着している

ページエクスペリエンスアップデートに関連するその他の変更点

  • トップニュースの掲載にAMP対応が必須ではなくなった
  • どのページもトップニュースカルーセルの表示対象となった
  • GoogleニュースでのAMPの優遇がなくなった
  • 検索結果でのAMPバッジアイコンは表示されなくなった

参考:「ページ エクスペリエンスの更新に対応するための期間、ツール、詳細情報」Google 検索セントラル ブログ

コアウェブバイタルの検索結果への反映時間

コアウェブバイタルの評価は、Chrome ユーザーのアクセスをもとにした Chrome ユーザーエクスペリエンス (CrUX) レポートから算出されます。十分なデータの検証が必要になることから、改善後ランキングへの反映はリアルタイムではなく、ある程度時間がかかります。

参考:「Core Web Vitals report」Search Console ヘルプ

反映時間に関する補足情報

Search Console上でページエクスペリエンスの状態について確認ができる[ウェブに関する主な指標] レポートでは、修正してから検証完了まで28日間が必要とされています。

Search Console Helpには以下のように記載があります。

特定の問題をすべての URL で修正したら、その問題が実際にすべての URL で解決されたかどうかを確認します。[トラッキングを開始] をクリックすると、28 日間のモニタリング セッションが開始され、サイトでこの問題が実際に発生するかどうかをチェックできます。28 日間、サイトのどの URL でも問題が発生しなければ、その問題は解決したと判断されます。いずれかの URL でその問題が発生したら、問題は未解決と判断されます。個々の URL のステータスに関する評価は、問題のステータスに関係なく、28 日間にわたって続行されます。

CrUXについては、毎日更新されていますが、実際に数値として確認できるまで数日間のタイムラグがあります。以上のことから、コアウェブバイタルに関する改善をしてからランキングに反映されるまで、少なくとも数日間はかかることを認識しておくと良いでしょう。

コアウェブバイタルの3つの確認方法

コアウェブバイタルの3つの確認方法

1.拡張機能で確認(Googlechrome)

「Web Vitals」というGoogleの拡張機能を導入することで下記のように簡単に確認することができます。

ステップ1 拡張機能を追加

拡張機能:Web Vitals

ステップ2 拡張機能を固定

Googlechromeの右上にある下記のロゴを選択
拡張機能の一覧を開く
下記の赤枠で囲まれている「ピンマーク」を選択

ステップ3 拡張画面をクリック

下記の緑になっている箇所で確認ができます。

拡張機能の選択

ここが上記のように緑だと正常。赤い場合は何かしらの数値にエラーが出ているということになります。

コアウェブバイタルの指標でエラーが出ている場合

ステップ4 数値の確認

2.Google search consoleで確認

Search Consoleでもページエクスペリエンスの状況を確認できます。左にあるメニューのなかに「ページエクスペリエンス」の項目があります。

改善が必要なページの確認

ウェブに関する指標をクリックすると下記のように「LCP」・「INP」・「CLS」の3指標について改善が必要なページの確認をすることができます。

コアウェブバイタルの指標の確認


3.PageSpeed Insightsで確認

ページスピードインサイト
PageSpeed Insights

上記リンクからPageSpeed Insightsのページを開き、調べたいページを入れると下記のように3指標の数値が確認できます。
PageSpeed Insightsでは改善項目の確認もできるため、便利です。

ラボデータで確認

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

コアウェブバイタルのスコアが悪くなる要因は大きく2種類ございます。

  • JSやCSSの処理速度による原因
  • サーバーの応答スピードによる原因 

下記に概要をまとめておりますので、ご参照ください。

LCPの改善方法

基本的には、画像・JS ・CSSの処理スピードの改善がメインとなります。
画像に関しては圧縮処理や拡張子のwebp化、デバイス毎のサイズ設定を行い、動きを表現するためのCSSとJSの場所や記述方式を変更する必要があります。

INP(旧FID)の改善方法

基本的には、JS・CSSの処理を行いつつサーバーのタスク過多を処理していきます。ユーザーがどういうアクションをするかは特定できないので、幅広い対応が求められます。

INPでは、ページ滞在中のすべてのインタラクションが測定対象となるため、JavaScriptの実行時間を短縮し、メインスレッドのブロッキングを最小限に抑えることが重要です。

CLSの改善方法

あとから画像ブロックの表示やテキスト挿入といった行動によって、ユーザーが意図していない表示崩れを防ぎます。あとから該当ブロックを表示・挿入する場合でも最初から空白を確保しておけば問題はないので、比較的処理としては楽な部類となります。

具体的な内容としは画像(imgの要素)にwidth属性とheight属性を設定することで、ブラウザはあらかじめ画像が入る枠を確保できるため、レイアウトの崩れを防止することができます。

コアウェブバイタルに関するよくある質問

Q
コアウェブバイタルとは?

2021年6月中旬から導入された検索順位の指標です。UX(ユーザー体験)・ユーザーの使いやすさが重要視されます。

Q
コアウェブバイタルにある3つの指標を教えてください。

コアウェブバイタルには大きく3つの指標があります。

  • LCP(Largest Contentful Paint):ページ表示速度を測る指標
  • INP(Interaction to Next Paint):サイトのインタラクティブ性を測る指標(2024年3月にFIDから変更)
  • CLS(Cumulative Layout Shift):視覚要素の安定性を示す指標

これらの値が低いほど、ユーザーにとって良好なコンテンツであるとされます。

Q
コアウェブバイタルはどこで確認できますか?

Google Chromeの拡張機能かGoogle search console、PageSpeed Insightsのいずれかで確認できます。

コアウェブバイタルとコンテンツどちらが大事?

コンテンツが大事です。
いくらコアウェブバイタルで満点近い数値が出ていたとしても、コンテンツの中身が薄い場合はインデックスすらされません。

コアウェブバイタルはあくまでも”甲乙つけがたいコンテンツ”があった場合にユーザビリティを高いコンテンツを優先させるための指標となります。
※著しくユーザービリティが悪いサイトの順位が落ちる可能性もあります。

そのことを念頭に置いて、できる対策から実施してはいかがでしょうか。

なお、コアウェブバイタルの改善はドメインパワーの向上にも寄与します。

関連記事:ドメインパワーの目安は?簡単に調べる方法とパワーを上げる5つの方法をご紹介

集客にお悩みの方へ

デジマケは100社を超える企業様の課題を改善に導いてきたコンサルタントが、事業の課題や目標に合わせた施策をご提案いたします。

SEOや広告、SNSなどの1つの分野ではなく、マーケティングの全体像を理解したコンサルタントがあなたと二人三脚で、売上の最大化を目指します。

Web集客をしたいけれど、何をすれば分からない方も、まずは無料でご相談ください。

デジマケの教科書編集部" alt="デジマケの教科書 編集部">

この記事を書いた人

デジマケの教科書 編集部

デジマケの教科書は、デジタルマーケティング領域のトピックスを「楽しく、分かりやすく」発信しているメディアです。このメディアをきっかけに、少しでも多くの方が興味を持ち、具体的なアクションを実施できるように執筆しています。

執筆者のコンテンツ一覧を見る
椎木 航のアバター

編集者

椎木 航 - 株式会社デジマケ取締役CDO

プロフィールを見る

グラフィックデザイナーとしてキャリアをスタートし、印刷会社の営業、総合広告代理店での経験を経て現在に至ります。これまで一貫して、クライアントの事業にとってプラスとなる仕事を行うことを重視してきました。「何となく良い」ではなく、実現したい目的に沿った現実的なキャンペーン設計と、集客につながるデザイン、さらにWEBサイトの仕組みづくりまで、一気通貫で提供していきます。経験を元にした役に立つ情報を発信します。

西畑大樹のアバター

監修者

西畑大樹 - 株式会社デジマケ代表取締役

プロフィールを見る

武蔵大学卒業後、不動産上場企業にてインハウスマーケッターを経験。その後、WEBマーケティング上場企業でSEOチームのマネージャーを務め、StockSunに参画しました。中小企業から上場企業まで、SEO支援を中心にデジタルマーケティングを活用した集客・採用コンサルティングを200社以上で実施した経験をもとに、実務に役立つ情報を発信します。

秋山 翔一のアバター

ファクトチェック

秋山 翔一 - 株式会社デジマケ取締役COO

プロフィールを見る

15年以上にわたりSEO・アフィリエイト領域に携わり、これまで100社以上のクライアントを支援してきました。現在は株式会社デジマケにてコンテンツ責任者として、年間600記事以上の制作を推進しています。実務で培った知見をもとに、検索意図と成果に向き合った質の高い記事を継続して制作します。

Recommend

こんな記事も読まれています!

Recommend

こんな記事も読まれています!

お問い合わせ

Contact

オンラインでの集客や
採用のことならデジマケにおまかせください

サービス紹介

Service

“本格SEO”×”圧倒的デザイン”の
これまでにない組み合わせで事業を成功に導きます