CLSに関する問題とは｜発生する原因から改善方法まで
「CLSに関する問題」は、Googleでの検索順位に関わる重要な問題です。CLSは、FIDとLCPとともに、コアウェブバイタルと呼ばれ、SEO対策で重要な意味を持ちます。コアウェブバイタルを向上させることで、検索結果の上位化を期待できるでしょう。
そこで当記事では、CLSに関する問題について詳細に解説します。CLSの問題が発生する原因から解決方法まで、詳しく知りたい人はぜひ参考にしてください。CLSを改善して、コアウェブバイタルの向上を目指しましょう。
1.「CLSに関する問題」とは？
Googleサーチコンソールには、Webサイトのパフォーマンスに関するさまざまなデータが掲載されています。2020年からはWebに関する新たな指標が追加され、「CLS」に関する情報が記載されました。
「CLS」とは、Cumulative Layout Shiftの略で、ページコンテンツの視覚的な安定性を意味しています。CLSはコンテンツにおいて、予期しないレイアウト表示のズレがどれくらい大きいかを定量化したものです。
CSLのスコアは、「ズレが生じた表示領域の比率×距離の比率」で計算されます。スコアが0.1未満の場合は、良好な結果です。しかし、スコアが0.1超の場合は「改善が必要なステータス」、スコアが0.25超の場合は「不良ステータス」となるため、早急な対処が必要となります。
1-1.SEO対策で重要な意味を持つコアウェブバイタル
「CLS」は、Googleの検索アルゴリズムに組み込まれたコアウェブバイタルの指標となるものです。コアウェブバイタル（Core Web Vitals）は、ユーザー体験の核となる3つの指標を定量化し、スコアとして評価します。コアウェブバイタルのスコアが検索結果を左右するため、コアウェブバイタルを適切な状態にすることは、SEOにおいて重要な意味があります。
コアウェブバイタルの指標とは、LCP・FID・CLSの3つです。これらのスコアが優れているほど、快適で品質の高いユーザー体験を提供できるとされています。「LCP」（Largest Contentful Paint）はページの読み込み時間、「FID」（First Input Delay）は応答性の指標です。
コアウェブバイタルのそれぞれの指標で高評価を得るためには、読み込みが早く、ページ操作のレスポンスがよく、ページレイアウトが安定したページを作る必要があります。コアウェブバイタルは2021年5月からGoogleの評価対象に組み込まれる新しい指標です。まだ対応しきれていないWebサイトは、早急に内容の改善が求められます。
2.「CLSに関する問題」が発生する原因の調べ方
CLSに関する問題が発生する原因は、サイトによって異なります。しかし、Googleサーチコンソールでは、問題があることがわかっても、その他の具体的な改善点は表示されません。
ここでは、自分のサイトに、どのようなレイアウト上の問題要素があるのかを調べる方法について解説します。
2-1.「PageSpeed Insights」を利用する
「PageSpeed Insights」は、Webサイトのパフォーマンスに関するレポートと改善点を調べる目的のサービスです。使い方は簡単で、PageSpeed InsightsのサイトでエラーページのURLを入力し、モバイルかパソコンかを選んで分析ボタンを押します。
分析結果に表示された「Cumulative Layout Shift」の項目が、CLSのことです。分析結果では、特定の環境下で取得したテストデータと、実際のユーザーから取得したフィールドデータを確認できます。
分析結果の下に表示される画像は、時間ごとのページレイアウトです。それぞれのページレイアウトを確認して、レイアウトに影響が出ている原因を改善しましょう。
2-2.実際のサイト表示を確認する
WebサイトのCLSを改善するためには、実際のサイト表示を確認することも大切です。TOPページやブログ記事にアクセスした際に、レイアウトに違和感がないか客観的に見てみましょう。例えば、本文よりも広告部分が遅れて表示される場合、レイアウトにズレが生じやすくなります。
ページが最終的に表示された際にレイアウトが崩れていなくても、広告や画像が段階的に表示されてレイアウトにズレが生じると、CLSのスコアが悪化してしまいます。
特に、非公式のWordPressテーマやカルーセルなどのプラグインを使用している場合、レイアウトがズレやすくなります。自分で確認した際に違和感を覚える挙動がある部分は問題がある可能性が高いため、早急に問題を修正してください。
3.「CLSに関する問題」を解決する方法3選
CLSに関する問題を解決するためには、原因に応じた解決策を選択する必要があります。今後、コアウェブバイタルはSEOで重要なランキング指標となるため、問題の早急な解決が必要です。
ここでは、CLSの代表的な改善方法について、3つの方法を紹介します。
3-1.画像のサイズをimgタグに指定する
画像の大きさを指定していないと、ページ読み込み時のレイアウトにズレが生じます。この問題を避けるためには、対象となる画像のサイズをimgタグに指定しなければなりません。特に、サイズ指定されていない画像の下にテキストが挿入されるレイアウトの場合、ズレが生じる恐れがあります。
画像サイズが指定されていない場合、ページの読み込み速度を速めるために、ブラウザは先にテキストを読み込みながら画像のサイズを仮に作ります。その後、画像サイズの分析が完了次第、空いていたスペースに画像を表示させます。
例えば、記事タイトル下や記事下に画像が入っていた場合、ユーザーにとっては文字の下に急に画像が表示されたように見えて、デザインに違和感が生じます。
そのため、imgタグを使用する場合は、タグに「width」と「height」の数値を指定しましょう。
3-2.ズレの原因となるCSSのインライン化を行う
CSSのインライン化とは、外部読み込みを行っていたCSSファイルを、同じページソース内に記述して使う方法です。CSSファイルを外部読み込みさせると、読み込み時間の分だけ、ページ表示にズレが生じます。
CSSのインライン化を行うことで画面のレイアウトのズレを防ぐとともに、表示速度の向上にもつながるため、メリットは大きいものです。
CSSのインライン化を行う際には、SCSSでスタイルシートを作成し、CSSをコピーしてPHPに貼り付ける手法でメンテナンス性を確保します。PHPはCSSと異なり、Webサーバ側の処理となるため、ブラウザ上ではCSSが対象ページのHTML内に記述された状態となります。読み込みの遅延が少なくなるため、CLSの改善におすすめの方法です。
3-3.広告エリアをあらかじめ確保しておく
広告エリアを事前に指定しない場合、画像ファイルと同じように、読み込み後にレイアウトのズレが生じます。広告エリアには手動広告と自動広告の2種類がありますが、どちらも対応が必要です。
手動広告の場合は、あらかじめ広告が表示されるスペースの数値だけ余白を残しておくことでページのズレを回避できます。しかし、自動広告の場合は、どのサイズの広告が表示されるかわかりません。そのため、過去の経験から予測して、余白を設定しておくとよいでしょう。
広告エリアをあらかじめ確保する際に注意しておきたい点は、パソコンとモバイルの両方のソースで広告エリアを設定することです。また、余白が広すぎるとかえってレイアウトに違和感が生じてしまうため、適切なサイズの余白を設定しましょう。
まとめ
コアウェブバイタルやCLSに関する問題は、まだ一般的にはあまり知られていません。
しかし、今後Googleの評価指標としてコアウェブバイタルが導入されることで、CLSは検索順位に大きな影響を及ぼすこととなります。早急に自分のWebサイトをチェックして、CLSの数値を良好にしましょう。
CLSの向上は、Googleからの評価をアップさせることはもちろん、ユーザーの見やすさにも関係します。運営するサイトの検索順位を上げるために、当記事で紹介した方法で、CLSに関する問題を解決しましょう。
KEYWORD
