(SEO対策)CLS 0.1未満を達成！当サイトで効果があったレイアウト改善策3選

以前からGoogleからの警告を受けていたCLSスコアの悪化に対し、今回本格的に改善に取り組みました。その結果、Googleが推奨するCLSスコア「0.1未満」を達成することができたので、今回の記事でその施策を共有します。

はじめに CLS（Cumulative Layout Shift）とは？

Cumulative Layout Shift（CLS）とは、ウェブページの読み込み中に発生する「視覚的なレイアウトのズレ」を測定する指標です。具体的には、画像やフォント、広告などのコンテンツが突然移動してしまう現象を指します。これにより、ユーザーが誤ってリンクやボタンをクリックしてしまうことがあり、操作ミスにつながる場合もあります。

以下web.devより動画を引用しています。観覧中に突然レイアウトシフトが起きると誤ったボタンやリンクを押してしまうことにつながります。皆様も経験あるのではないでしょうか？

なぜCLSが重要なのか？

CLSはユーザー体験（UX）に大きな影響を与える要素の一つであり、GoogleのCore Web Vitals（コアウェブバイタル）の中でも重要な指標とされています。特にモバイルデバイスでは、画面サイズが小さいため、レイアウトシフトが発生するとユーザーにとって不快な体験となりやすいです。

Googleはウェブページのパフォーマンスを評価する際、CLSのスコアを重視しています。このスコアは0.1未満が「良好」とされ、0.25以上は「改善が必要」と判断されます。CLSのスコアが高いと、検索エンジンの評価が下がり、SEOにも悪影響を与える可能性があります。

Googleはウェブページのパフォーマンス評価においてCLSのスコアを重視しており、その評価基準は以下の通りです。

• 0.1未満：「良好」。理想的なスコアで、ユーザーに快適な体験を提供できている状態です。
• 0.1～0.25：「要改善」。ユーザー体験が多少影響を受ける可能性があるため、さらなる調整が推奨されます。
• 0.25を超える：「不十分」。レイアウトシフトが頻繁に発生しており、ユーザーにストレスを与えている状態です。早急な改善が必要です。

CLSのスコアが高いと、検索エンジンの評価が下がり、SEOにも悪影響を与える可能性があります。

CLS 0.1未満の基準とSEOへの影響

CLSのスコアは、ページが読み込まれる際に発生するレイアウトのズレを数値化したものです。例えば、コンテンツが完全に読み込まれる前に、画像や広告が動いたり、テキストが再配置されることで、ユーザーの操作体験が損なわれることがあります。CLSスコアが0.1未満であれば、レイアウトシフトの影響は非常に小さく、ほとんど気づかれることはありません。この基準をクリアすることで、ユーザーに快適な操作体験を提供し、SEOにもプラスの効果が期待できます。

実際、Googleはユーザー体験の向上を重視した検索アルゴリズムを採用しているため、CLS 0.1未満を達成することは、検索結果で上位に表示されるための一要素となります。したがって、CLSの改善は、ユーザー満足度の向上だけでなく、SEO戦略においても重要な施策の一つです。

当サイトで実施した対策3選

どの施策が最も効果的だったかは正確にはわかりませんが、以下の順番でCLS改善に取り組みました。当サイトや類似サイトを分析し、ページ内でレイアウトシフトが発生している箇所を特定した結果、以下の施策が効果的だと判断しました。CLSスコアの悪化要因はサイトごとに異なるかもしれませんが、ここで紹介する施策は多くのサイトにとって有効な対策になると考えています。

対策1: AdSense広告の最適化

実は、AdSenseの自動広告がCLSに悪影響を与えていることがわかりました。（Google自身が提供している広告なのに、少し不思議な話ですよね…）具体的には、AdSenseの自動広告の「ページ内広告」をオフにしました。その代わり、記事内に広告を挿入する際には、WordPressプラグイン「Advanced Ads」を使用し、動的に広告が配置されるように設定しました。

詳細な設定方法は以下の記事で紹介しているため、よろしければご覧ください。

この対策は一定の効果があったと考えられますが、これだけではCLSを「良好」な状態にはなりませんでした…。

対策2: 目次表示の最適化

WordPressのテーマや目次を自動生成するプラグイン次第かもしれませんが、記事冒頭の目次がCLSを悪化させる要因となっていました。これは完全に盲点で、問題を発見するまでに時間がかかりました。

当サイトで使用しているWordPressテーマ「SWELL」の目次生成機能が、CLSスコアの悪化につながっていたのです。Chromeのデベロッパーツールを使い、ネットワーク負荷やCPU負荷をかけて実験している際、偶然この問題を発見しました。

この問題に対する解決策はカスタムCSSを使用してあらかじめ目次領域を確保しておくことを実施しました。以下の記事でCSSを公開し、設定方法も詳細に解説しているのでよろしければご覧ください。

本対策も効果はあったと思われますが、やはりCLSスコアは「要改善」の域を出ませんでした。

対策3: アフィリエイト広告の最適化

AdSenseと同様に、アフィリエイト広告もCLS悪化の原因となる場合があります。今回対策を行ったのは、もしもアフィリエイトの「かんたんリンク広告」です。この広告はJavaScriptを使って動的に生成されるため、遅延が発生し、その結果レイアウトシフトが起きていました。

上記のような広告が「かんたんリンク広告」です。たくさんのサイトでご覧になったことがあると思います。

この問題への対策として、カスタムCSSを使い、あらかじめ広告の表示領域を確保する方法を実施しました。複数の広告をまとめて対策できます。詳しい設定方法については、以下の記事でCSSコードを公開し、手順を詳しく解説していますので、ぜひご覧ください。

これら3つの対策を行ったところ、ようやくCLSスコア「0.1未満」を達成することができました。

CLS 改善のサイト検索順位への影響

記事執筆時点（8月22日）では、CLS対策を実施してからまだ1ヶ月も経過していないため、SEOへの具体的な影響は不明です。SEOには記事の更新頻度や外部リンクの獲得、ユーザーエクスペリエンスなど複数の要因が絡んでいるため、CLS改善がどの程度検索順位に寄与したかを正確に測定するのは難しい状況です。

現在、Googleサーチコンソールで検索順位を確認していますが、CLS改善後の順位変動については、まだ顕著な結果は出ていません。今後、変化があればこの場で報告します。

なお、SEOの効果は施策を行ってからすぐに現れるものではなく、長期的に少しずつ反映される傾向があります。そのため、CLS改善の成果が現れるまでには時間がかかると考えられます。

まとめ

CLSの改善は、ユーザー体験の向上とSEO対策の両面で重要な施策です。当サイトでは、AdSense広告、目次表示、アフィリエイト広告の最適化により、CLSスコアを「0.1未満」に抑えることができました。これにより、ユーザーが誤ってリンクやボタンをクリックするリスクが減り、ページの閲覧体験が快適になりました。また、検索エンジンからの評価向上にもつながる可能性が高いです。

ただし、CLSの改善だけで検索順位が劇的に上がるわけではありません。ユーザー体験を改善することは、長期的なSEO戦略において重要な要素の一つです。サイト全体の最適化を並行して進め、継続的に改善を続けることで、検索順位の向上と安定したアクセスが見込めると考えられます。

以上です。最後までお読みいただきありがとうございました。