AdSenseのCLS悪化と対策｜自動広告の課題と遅延読み込みでの改善策
Google AdSenseを利用していて困り事がありました。Googleが推奨する方法でAdSenseを読み込んでもPageSpeed Insightsのスコアがあまり下らないことが分かったので、すべての広告を自動広告で表示させた所、モバイルの全ページでCLS(Cumulative Layout Shift)が悪化しました。未だにどの方法で広告を表示させると良いのか明確にできませんが、書き残して同じ失敗をしないようにします。
AdSenseの自動広告のみの使用
Google Adsenseの自動広告は簡単に広告掲載ができます。1行のコードを読み込ませるだけでサイト全体に広告が表示されます。広告の表示位置がデザインを崩す場合は個別に非表示に設定でき、プライバシーポリシーページなどに広告を表示させない場合はページごとの非表示設定も可能です。
- 自動広告のメリット
コードを1行加えるだけでサイト全体に広告を表示できる。 - 自動広告のデメリット
Google Search ConsoleでCLSの警告が出る。
広告の表示が遅れるためにCLSがGoogle Search Consoleによって指摘されます。当ブログでは全ページが不合格判定になりました。
CLSの対応策
CSSであらかじめ広告の領域を確保することでCLSを無くせるようです。
レイアウト シフトの最小化 - Google Publisher Tag
AdSenseのIDやClassは変更されるので、例に上がっていたのと実際に確認した物とでは違っていました。CloudflareのWeb Analyticsを見ると、CLSの場所は投稿文内のPタグでした。ということは投稿記事内に表示される広告がCLSの原因だと推測できます。事前に広告の領域を確保することでCLSは減らせるようです。
加えて、AdSenseの広告設定の「折りたたみ可能なアンカー広告を許可する」を有効化するとCLSが発生します。
遅延読み込みと手動広告
AdSenseを遅延読み込み（スクロール発火による遅延読み込み）させるとAdSenseが原因のCLSは0になります。Googleボットがページを読み込んでもAdSenseのコードが読み込まれないために、AdSenseの存在は無いものとなります。Google Search ConsoleやPageSpeed InsightsでCLSは指摘されません。
実際にはスクロール動作で広告が表示されるために、ファーストビュー（ページを読み込んだ時に表示される領域）に広告を表示させないようにしなければなりません。スクロールした瞬間に画面に広告が表示されると、突然広告が表示され、ユーザーに不快感を与えます。ファーストビューにAdSenseによる広告を表示さなければよいのですが、遅延読み込みをしているとうまく行きません。
- ファーストビューに広告を表示させたくない。
- 遅延読み込みさせているため場所の除外設定ができない。
- 手動で広告を設定する。
AdSenseボットがコードの存在を確認できないので自動広告の広告設定のプレビューには「コードを取得」と表示されページ内広告の数も0になります。ファーストビューに広告を配置しないという目的を達成するには自分で広告の位置と種類を決めなければなりません。
WordPressを使う場合はフィルターフックを使い目次の上や下、H2の上などにバナー広告を配置する方法を使えます。
ボットファイトモードとAdSenseボット
CloudflareのボットファイトモードをONにしていましたが、いつの間にか広告設定のプレビューが表示されなくなっていました。以前は表示されていたのですが仕様が変わったのでしょうか。AdSneseボットをボットファーとモードの対象から除外しようとしましたが、個別設定をするためには有料のスーパーボットファイトモードを使う必要がありました。
無料版のボットファイトモードでは個別の設定はできないので、現状では有効にするとAdSenseボットはサイトにアクセスできません。正確な検証はできていないので言い切ることはできませんが、AdSenseボットがサイトにアクセスできないと、広告の種類や手動広告以外の広告（全画面広告）などに影響が出ているような気がします。
最後までお読みいただき、誠にありがとうございます。