【SEO対策】重要な指標CLSとは?コアウェブバイタルの測定や改善方法を解説!

【SEO対策】重要な指標CLSとは?コアウェブバイタルの測定や改善方法を解説! | Eyecatch-Image

男性2コアウェブバイタルって何?
女性5CLSについて詳しく教えて!
男性4サーチコンソール見たらCLSの改善が必要となっているんだけど……。

案内人

サーチコンソールを確認したら「CLSの改善が必要」と表示されて焦ったそこのあなた。今回はそんな方に向けた解説記事です!

CLSはSEOにおいて重要な指標です。
Google検索の評価基準にコアウェブバイタルという3つの指標があり、CLSはそのうちの1つの指標になります。

「Core Web Vitals(コア・ウェブ・バイタル)」3つの指標
  • LCP(Largest Contentful Paint) / ページ速度
  • FID(First Input Delay) / ユーザーの反応速度
  • CLS(Cumulative Layout Shift) / ページのレイアウト

コアウェブバイタルの目的は、UXと言われるユーザー体験の向上です。
ユーザー体験というのは、使いい心地や快適さといったページに訪問するユーザーの利便性。それを評価するために数値化した指標がコアウェブバイタルというわけです。

今回解説するCLSは、そのうち1つの指標ページレイアウトのずれを評価する指標となります。

あなたがネット記事を読むときを想像してみてください。
アクセス後に画像や広告の読み込みが遅れてテキストの位置がずれることにより、誤って広告などをクリックしてしまった経験は誰もが1度はあることでしょう。
そうなると誤クリックなどのストレスが原因で離脱の原因になってしまいますし、良いユーザー体験(UX)とは言えません。

Googleは、このユーザー体験をGoogle検索の評価基準に組み込んでいます。

ジョン齊藤

「コアウェブバイタルのCLSを改善して、ユーザー体験(SEO評価)の向上を目指そう」というのが今回の記事の目的です!

今回の記事を最後までご覧になれば、ユーザー体験(UX)の高いコンテンツ作りができること間違いありません。CLSを改善することでブログのSEO評価を上げることができます。

ウェブバイタル測定に使うツール
CLS(レイアウトのずれ)で評価が下がる原因
  • 画像のサイズ指定がない
  • 広告のサイズ指定がない
  • 動画のサイズ指定など(iframe含む)
  • Webフォントの読み込み
  • コンテンツが動的

ウェブバイタル測定ツールでレイアウトのずれの原因を確認したら、その原因を修正することでCLSの数値が改善できます。

それでは、さっそく始めていきましょう。

目次

コアウェブバイタル(Core Web Vitals)

コアウェブバイタル(Core Web Vitals)3つの指標


コアウェブバイタルは、ユーザー体験(UX)の向上を目的に作られたGoogle検索の評価指標です。

2020年5月にGoogleが発表、2021年6月16日からGoogle検索の評価基準に組み込まれました。

ユーザー体験というのはユーザーエクスペリエンスとも言われ、そのサービス・商品を使うことでユーザーが得られる体験のこと。得られる体験というのは、ユーザーが感じる使い心地や快適さといった利便性です。

そのページエクスペリエンスを数値化したものがコアウェブバイタルになります。

この数値の基準に満たしていないとページの快適さが損なわれ、ユーザー離脱の原因になってしまうわけです。

コアウェブバイタルには3つのパフォーマンス指標があります。
「ページ速度」「ユーザーの反応速度」「ページのレイアウト」です。

「Core Web Vitals(コア・ウェブ・バイタル)」3つの指標
  • LCP(Largest Contentful Paint) / ページ速度
  • FID(First Input Delay) / ユーザーの反応速度
  • CLS(Cumulative Layout Shift) / ページのレイアウト
指標良好改善が必要不良
LCP2.5秒未満2.5秒~4秒以下4秒を超える
FID100ミリ秒(0.1秒)未満100ミリ秒(0.1秒)~300ミリ秒(0.3秒)以下300ミリ秒(0.3秒)を超える
CLS0.1未満0.25以下0.25を超える

参考 : Web Vitals | web.dev

このうちの1つ「FID」は2024年3月より「INP」に変わりますが、別記事で解説のLCPや今回解説するCLSはその後も継続して検索評価指標として組み込まれることとなります。
参考 : Interaction to Next Paint (INP) | web.dev

また、今回紹介するCLS以外の指標「LCP/ページ速度の評価基準」や、その対策方法「ページの高速化(JavaScriptの削減PHPのバージョンアップ)」についてわかりやすく解説した記事があります。SEO対策に力を入れたいという方は、そちらの関連記事も要チェックです。

関連記事

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

気になるのが、実際コアウェブバイタルがSEOにどれほどの影響を与えるのかという疑問です。
さほど重要でないならある程度の基準に達していれば問題ないですし、最重要なら早急に改善する必要があります。

結論、コアウェブバイタルで数値化して測るページエクスペリエンスはコンテンツの質ほど重要視されていません。
コアウェブバイタルの数値が低くても、コンテンツの質が高いページの方が評価され検索上位に表示されることがあります。

ですが、同じ質のコンテンツを比べた時、コアウェブバイタルの数値が高いページの方が評価されます。そのことから、コアウェブバイタルはSEOにとって重要な指標だと言えるわけです。

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

参考 : ページ エクスペリエンスのランキング | Google検索セントラル



Googleは検索ユーザーの利便性を第一に考えています。
言い換えれば、検索問題を解決することだけに焦点を置いた研究グループです。

Googleが掲げる10の事実」の1と10で宣言しているように、とにかくユーザー目線で作られたコンテンツを評価します。

Googleが掲げる10の事実

  1. ユーザーに焦点を絞れば、他のものはみな後からついてくる。
  2. 「すばらしい」では足りない。

そのことからも、ユーザー体験(UX)が低いコンテンツをSEO的に高く評価することはまず考えれません。

Googleのアルゴリズム全体では大きな影響はないですが、ユーザー体験(UX)を高めることで「Google側の評価」「ユーザー側の評価」双方にとって良いSEO的な効果があると言えます。

ユーザー体験を高める2つのSEO効果
  • Googleはユーザー体験(UX)が高いコンテンツを評価する
  • ユーザー体験(UX)が高まることでユーザーの利便性が向上し離脱率が減る


ジョン齊藤

コンテンツの質は一番大事!
でも「コンテンツの質以外にも大事なことがある」
それがユーザー体験ってことだね。

Web犬タロウ

その通り!
そもそも、UXというのはマーケティング用語。
UXを向上させることはユーザー集客にとって大事な考えなんだワン!


コアウェブバイタルを向上させるべき理由

前述したようにコアウェブバイタルを向上させることで、SEOの評価が高まりページのアクセスアップ&ユーザーの離脱率減少の効果があります。
実はそれ以外にもコアウェブバイタルを向上させるべき理由があるのです。

コアウェブバイタルの評価が下がるといくつかのデメリットが出てきます。

コアウェブバイタルの評価が下がるデメリット
  • ユーザーエンゲージメントの減少
  • ビジネス機会の損失

逆にユーザー体験(UX)を向上させ、コアウェブバイタルの評価を上げることで平均セッション時間が23%伸び利用時間も15%増加したという検証結果も出ています。

参考YouTube動画


その結果ユーザーエンゲージメントも増加」し「ビジネス機会が増加」することにつながるわけです。

「CLS」レイアウトシフトを測るGoogleの指標

それでは本題、コアウェブバイタルの指標のうちの1つCLS(Cumulative Layout Shift)について解説しましょう。

CLSはレイアウトシフト(レイアウトのずれ)を測るGoogleの指標です。コアウェブバイタル3つの指標のうちの1つになります。元々はモバイルページに適応された指標でしたが、現在ではPCでも適応されています。

CLSはページの視覚的な安定性を示す指標とも言われますが、これだけだと少々わかりづらいかもしれません。
わかりやすく言うと、ユーザーがページにアクセスし読み込まれて安定するまでにかかった時間です。

自分がネット記事を読むときを想像してみてください。

アクセスした後、画像や広告を読み込むことによりテキストの位置がかわり、意図しない箇所を誤ってクリックしてしまったことが誰もが1度はあるかもしれません。
読もうとしていたテキストの位置が変わってしまい、どこにいってしまったのかわからなくなってしまうこともあります。

そうなると訪問ユーザーにとって快適なページではなく、離脱の原因にもつながるので大きなデメリットと言えます。CLSはそのようなレイアウトシフトを改善することを目的とする指標です。

数値の目安

CLSの数値の目安は3段階に分かれます。CLSの数値が高いほどコンテンツの質が下がることを意味します。

良好改善が必要不良   
CLSの数値0.1未満           0.1超え~0.25以下       0.25を超える         
Web犬タロウ

「改善が必要」なら、それほど焦る必要はないけど「不良」になっていたら大至急改善が必要だワン!

ジョン齊藤

良好評価は0.1未満とありますが、サチコを確認すると0.1ならギリ大丈夫みたいです!

CLSはWebページにとって大事なインフラです。

例えるなら道。
舗装されていない道やでこぼこ道は、そこを通る車に無駄なストレスを与えてしまい利便性がいいとは言えません。そこでそのインフラをしっかり整える(レイアウトシフトを改善する)ことにより、利用ユーザーが快適にアクセスできるというわけです。

Web犬タロウ

ユーザー目線で考えたらユーザー体験(UX)の大切さが見えてくる!
そのユーザー体験を向上させるために、CLSという指標があるわけだワン!


CLSを改善するべき理由

コアウェブバイタルを向上させるべき理由でも解説した通り、CLSを改善することでビジネス機会が増加します。

コアウェブバイタルやCLSを改善するメリット
  • ユーザーエンゲージメントの増加
  • ビジネス機会の増加

それを裏付けする理由として、具体的な例を出してみましょう。
台湾最大のレシピ共有サービス「iCook」は、CLSを改善することで広告収入が10%増加しました。

以下の図をご覧ください。
下のCLSを低くして改善するのと比例して、広告収入は上昇していることがわかります。

台湾最大のレシピ共有サービス「iCook」はCLSを改善することで、広告収入が10%増加

画像引用 : Core Web Vitals がユーザーやビジネスにとって重要な理由 | Google Developers

たかが10%と言われればそれまでですが、iCookのように大手企業だとそれだけで年間売り上げがかなり違ってきます。
そのことからも、CLSを改善することはブログ運営者にとって大きなメリットがあると言えるのです。

コアウェブバイタルが測定できるツール

コアウェブバイタルや3つの指標のうちの1つ、CLSを改善することにより「SEO効果」「ユーザーエンゲージメントの増加」「ビジネス機会の増加」という大きな効果があることはわかりました。

ここでは、実際にコアウェブバイタルを測定できるツールをご紹介したいと思います。
Googleが提供する以下2つのツールを使うのがベストです。

今回測定に使用するおすすめツールはこちら
  • Search Console / サーチコンソール
  • PageSpeed Insights / ページスピードインサイト

まずコアウェブバイタルはGoogleのアルゴリズムに組み込まれている指標です。そのGoogleが提供している測定ツールがベストでしょう。
そしてChromeブラウザの拡張機能は、ストアからダウンロードしたりの手間がかかります。

ジョン齊藤

また、Chromeの拡張機能は数年経って見に行くと、公開停止になっていることがたまにあります。
そのことからも、測定ツールはWeb上で測定できるツールを使用するのがおすすめです!


Chrome拡張を使った測定ツール ※今回は使いません
  • Light House(Chrome拡張機能)
  • Web Vitals(Chrome拡張機能)

「Search Console」コアウェブバイタルを測定する

それでは「サーチコンソール」と「ページスピードインサイト」を使ったコアウェブバイタルの測定方法を見てみましょう。

ジョン齊藤

今回のエラーですが、気付くのがだいぶ遅れてしまいました。
2週間程度でしたが、遅れれば遅れるほどSEO評価が下がる(機会損失)可能性があります。
そのことからも普段からサチコをチェックすることを強くおすすめします!

Web犬タロウ

測定はスマホからでもできますが、今回パソコンを使います!一緒に見ていこう!

まずはサーチコンソールをチェック。

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

アクセスしたら「今すぐ開始」を選択。

アクセスしたら「今すぐ開始」を選択 - 「Search Console」コアウェブバイタルを測定する


続いて左メニュー、エクスペリエンス内の「ページエクスペリエンス」を選択します。

「ページエクスペリエンス」を選択 - 「Search Console」コアウェブバイタルを測定する

このようにページエクスペリエンスの「良好URL」の割合が少なかったら早急な対処が必要です。
より詳細情報を見るために「失敗したURL」を選択します。

「失敗したURL」を選択 - 「Search Console」コアウェブバイタルを測定する

この画面でCLSの評価「良好」「改善が必要」「良好」それぞれの詳細がわかります。
さらに具体的にエラーを起こしているページURLを確認したい場合は、下の「改善が必要 CLSに関する問題0.1超」を選択です。

「改善が必要 CLSに関する問題0.1超」を選択 - 「Search Console」コアウェブバイタルを測定する

次の画面で、ページ別のCLSの数値が確認できます。

ページ別のCLSの数値が確認できる - 「Search Console」コアウェブバイタルを測定する
Web犬タロウ

CLS評価の確認方法はわかった!
これだと改善方法がわからないワン

ジョン齊藤

続いてページスピードインサイトを使って改善方法を確認してみましょう!
サチコを確認せずにページスピードインサイトを見るだけでもいいです


「PageSpeed Insights」コアウェブバイタルを測定する

サーチコンソールを使い、CLSの改善が必要だとわかったら、次にページスピードインサイトを使ってエラー原因の特定です。

まずは測定ページにアクセスしましょう。

PageSpeed Insights
https://pagespeed.web.dev/?hl=ja

検索枠にブログトップページのURLか、先ほどのサーチコンソールでCLSの数値が高かったページURLを入力→「分析」を選択します。

Google - PageSpeed Insightsにアクセス
ジョン齊藤

ここでは先ほどの計測で一番悪かった数値「CLS 0.15」のURLページを見ていきます!


画面が切り替わり分析結果が表示されます。結果は、やはりCLSの改善が必要とのこと。

分析結果はCLSの改善が必要 - 「PageSpeed Insights」コアウェブバイタルを測定する


具体的に改善すべき箇所を見てみましょう。
スルスルッと下にスロールすると「次に関連する監査を表示」という項目があるのでそこから「CLS」のタブを選択して切り替えます。

「次に関連する監査を表示」という項目から「CLS」のタブを選択して切り替える

レイアウトシフトなど、CLSの評価が低い原因が表示されるので、確認しながら対処していきましょう。

CLSが低い原因を確認 - 「PageSpeed Insights」コアウェブバイタルを測定する

レイアウトシフトを改善

前述したように、CLSのエラーは大抵レイアウトシフトが原因です。そのことから「CLSの改善=レイアウトシフトの改善」と言えます。

レイアウトシフトの原因
  • 画像のサイズ指定がない
  • 広告のサイズ指定がない
  • 動画のサイズ指定など(iframe含む)
  • Webフォントの読み込み
  • コンテンツが動的
ジョン齊藤

レイアウトシフト対策をすればCLSの評価が上がります!
上記の原因を参考に改善してみましょう。

画像サイズやアドセンスなどの広告サイズを指定することで、この問題は解決することがあります。

実際今回は、真ん中のフッターでリンク画像と広告を重ねたことによる左側フッターとのレイアウトのずれが原因でした。

リンク画像と広告を重ねたことによる左側フッターとのレイアウトのずれが原因 - レイアウトシフト | mechalog


この場合画像サイズか広告サイズを指定すればいいですが、アドセンスのサイズを指定してしまうと収益に影響が出てしまう可能性があります。
なので今回は、サイズを指定せずリンク画像を外すのみの対処をしました。
この対処法については、ページスピードインサイトで原因を特定しつつその状況に合わせた改善をするといいでしょう。

「CLS」改善したらサーチコンソールで確認

レイアウトのずれを修正・改善したらサーチコンソールにアクセスしてみましょう。

左メニュー、エクスペリエンスから「ウェブに関する主な指標」を選択します。

「ウェブに関する主な指標」を選択 - 「CLS」改善したらサーチコンソールで確認

次の画面でCLSのモバイルかPC、どちらか数値が悪く改善が必要な方を選択。続いて「CLSに関する問題 0.1超え」を選択します。

「修正を完了しましたか?」と出てくるので「修正を検証」を選択して分析してもらいます。

「修正を検証」を選択して分析 - 「CLS」改善したらサーチコンソールで確認

すると以下画像のように「検証開始 ~ 28日以内に完了します」と表示されるので、それまで結果を待ちましょう。

「検証開始 ~ 28日以内に完了します」と表示される - 「CLS」改善したらサーチコンソールで確認

結果が出た後もCLSの評価が低いのであれば、再度原因を調べて改善策を練る必要があります。

まとめ

まとめです。
今回はSEO対策において重要な指標、コアウェブバイタル3つの指標のうちの1つCLSについて解説しました。

ジョン齊藤

CLSはレイアウトのずれ(レイアウトシフト)の評価を数値化したものです!しっかり対策することで、SEO評価が上がります

CLS含むコアウェブバイタルの改善はSEO対策において重要です。

Googleの評価基準においてコンテンツの質が高いページの方が重要視されますが、同じコンテンツレベルのページを評価する場合はこのコアウェブバイタルの指標が良好なページの方がSEOで高く評価されます

CLSの評価が下がる原因がこちら。

CLS(レイアウトのずれ)で評価が下がる原因
  • 画像のサイズ指定がない
  • 広告のサイズ指定がない
  • 動画のサイズ指定など(iframe含む)
  • Webフォントの読み込み
  • コンテンツが動的
Web犬タロウ

コアウェブバイタルの指標を計測するのにおすすめのツールが「サーチコンソール」と「ページスピードインサイト」。
ページスピードインサイトで原因が特定できるワン!

今回の記事は以上です。
最後までありがとうございました。

SEO対策関連の記事が他にもあります。SEO対策を万全にしてブログの評価を上げたい方必見ですので、そちらの記事も続けてご覧ください。

関連記事

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次