PR

CLS 0.1超を修正した具体的な対策｜広告を消さずにスコアを下げた体験談

PageSpeed・表示速度改善
2025.04.25

[google search console」から「CLS に関する問題：0.1 超（パソコン）」という警告が出ているのを見つけつつ、しばらく放置していました。原因は何となく分かっていたものの、「広告は消したくない…でも修正方法もよく分からない…」と悩んでいた私。実際に試した対処法と、途中で起きた“事故”まで含めて、今回の記録としてまとめました。

CLS とは？

CLS（Cumulative Layout Shift）は、ページの表示中に発生する予期しないレイアウトのズレを数値化した指標です。

ページ読み込み後に広告や画像が後から表示されて

  • 文章が下にズレる
  • ボタンの位置が変わる

といった **「思わずクリックミスしそうな動き」**があるとスコアが悪化します。

不安定な要素が 1 つある場合の影響係数の例

こんな感じで最初に開いた時よりも下にズレるよ！と言うモノですね私のはパソコンもモバイルも0.1超で下にずれますよ～というもの。原因はAdSenseの広告が出てくるのにその分のスペースを最初から開けていなかったり、広告のサイズを指定していないことみたいなんです。

サチコさん（Google Search Console、通称サチコ）が指摘しています(>o<)

PageSpeed Insightsでも不合格になっています(>o<)

CSSを追加してみた

CLS に関する問題: 0.1 超（パソコン）の指摘を受けている方は多いみたいでいろいろな解決方法が出ているのですが、自動広告の上からサイドメニュー最上部にGoogleアドセンスを手動で配置するというのもあったのですが今回はCSSをテーマに追加したというのが載っていたので私はcocoonのカスタマイズでCSSの追加をしました。追加したのはアイキャッチのサイズ指定と広告のサイズ指定のCSSです

/* PC */
.eye-catch img {
  height: 360px;
  width: 100%;
  object-fit: cover;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .eye-catch img {
    height: auto;
    object-fit: contain;
  }
}

何をしているコードか

このCSSでは、アイキャッチ画像の表示方法をPCとスマホで切り替えることで、見た目を整えつつ CLS（レイアウトのズレ）も防ぐことを目的としています。

まず、PC表示では

  • 画像の高さを 360px に固定
  • 横幅はエリアいっぱい（width: 100%）
  • 縦横比を保ったまま切り抜いて表示（object-fit: cover）

と設定しています。これにより、ページ読み込み時に画像の高さが先に確保されるため、記事全体が後から下にズレにくくなり、CLS改善につながります。また、画像が枠いっぱいにキレイに収まるため、見た目も整います。

次に、スマホ表示（画面幅768px以下）では

  • 高さは自動調整（height: auto）
  • 画像全体が収まるように縮小して表示（object-fit: contain）

に切り替えています。スマホは画面が縦に長いため、高さを固定してしまうと窮屈になりがちです。そのため「画像の比率を保ったまま、全体が見える」設定にしています。

まとめると、このコードは

  • PCでは高さ固定でレイアウトの安定性を重視
  • スマホでは自動調整で見やすさを重視

という形で、CLS対策とデザイン性の両立を目的にした設定です。

cocoonのカスタマイズで追加CSS

テーマはいじりたくないのでカスタマイズで追加CSSに入れると簡単に追加したり外したり出来るので気軽に出来ます♪

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。
wp-cocoon.com

cocoonの外観‣カスタマイズを選択して

追加CSSを選択

けっこうここでCSSを追加しているので一番下に先ほどのコードを貼り付けます

/* PC */
.eye-catch img {
  height: 360px;
  width: 100%;
  object-fit: cover;
}

/* スマホ */
@media screen and (max-width: 768px) {
  .eye-catch img {
    height: auto;
    object-fit: contain;
  }
}

保存して確認すると記事が下に動いていないようなので「google search console」に検証を開始して、この検証には２８日ぐらいかかるみたいなのでこのまま様子をみます。

WP Rocketプラグインを入れました

tetsu7017さんの記事でとても興味深いプラグインがありましたくわしくは↓

「ページ読み込みが遅い」を直したいならコアウェブバイタルを見直せ！今すぐできる対策術

でWP Rocketを導入しました。全部英語なんですよね～(>o<)日本語に変換したりしながら設定をしていたのですが、”Load JavaScript deferred”（日本語に翻訳すると「JavaScript の読み込み遅延により、サイト上のレンダリングをブロックする JS が排除され、読み込み時間が短縮されます」なので、早くなるカモと思い・・・）にチェックを入れたら「ページスピードインサイト」でスピードが全部90％台になったのですが、モバイルで冒頭に謎の空白がでてしまって・・・それで検証していたこの記事の追加CSSを消したんです。このCSSを追加する前はモバイルがグーグルサーチコンソールで「不良」が沢山あって、このCSSを追加してからは「改善が必要になっていたのに」モバイルの謎の空白を消そうとしてこのCSSを一度消したんです、そうしたら、謎の空白は消えずにLoad JavaScript deferredのチェックを外してやっと元にもだったのですがCSSはけしたままにしていて、そうしたら、またモバイルで「不良」がでたんです。なので、グーグルサーチコンソールで良好までは持って行けなかったのですが、「不良」⇒「改善が必要」までよくなったと言う検証が出来ました。

事故です(￣｡￣;)

本当はこの記事はグーグルサーチコンソールでエクスペリエンスが良好になるまで投稿しないであたためて置くつもりだったのですが・・・今日の朝「不良」になっているのを見てそうだ、CSSを外したままだと思い出しあわてて追加したら、保存でなく、投稿してしまって・・・(￣｡￣;)でワードプレス間違えて投稿した記事を非公開にもどしたのですが、「ブログ村」と「人気ブログランキング」に一度上がってしまったので最新記事になってしまいそのリンクに飛ぶと「404」になってしまう症状になってしまったので、投稿することにしました(;ﾟロﾟ)*後で知ったのですが人気ブログランキングなどの記事はマイページから消せるみたいです。

WP Rocketプラグイン

WP Rocketは説明がすべて英語で有料のプラグインです。でも今後ゆっくり設定をしていこうかなと思っています。詳しくはまた、設定が出来たらご報告します！

WP Rocket

✅ まとめ

  • CLS は「表示中の予期しないズレ」を測る指標
  • 広告サイズの予約（CSS指定）がかなり効果的
  • WP Rocket で速度改善 → しかし副作用もあり
  • 触る前には バックアップ＆スクショ必須
  • うっかり投稿事故には要注意…(￣｡￣;)

今回の検証で、

「広告は消さなくても CLS 改善は可能」

という実感が得られました。
しばらくはサーチコンソールの検証結果を見守りつつ、引き続き調整していきます。

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━[PR]━┓
　ブログ運営を強力にサポート
　はじめてのブログに最適なWordPressテーマ『XWRITE(エックスライト)』
　─────────────────────────────────
・はじめての方でも簡単に使えるシンプルな操作画面
・充実のサポートでブログ運営をバックアップ
・ブログ運営に役立つ機能を多数搭載
・100％GPLなので利用に関する制限も無く、複数のサイトで利用可能
・軽量設計で高速表示。読み込みのストレスなし
　─────────────────────────────────
　　https://px.a8.net/svt/ejp?a8mat=4536W2+Z4LGY+CO4+3B5WQB
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

【広告】

スポンサーリンク

コメント

タイトルとURLをコピーしました