アドセンスを貼って広告収入を得たいけど、ページの表示速度が落ちるのが気になる。

実際にやると、PageSpeed Insightsのスコアはガクッと落ちてしまいます。

何もしなければ。

昔は同期読み込みがどうとか、非同期読み込みがどうとか、そういうのあったよね。

でも今は同期読み込みは無くなって非同期読み込みのみ。

非同期読み込みだから、ページの表示速度は早くなるのかと思いきやならない(;´･ω･)

色々調べて実践した結果、アドセンスを貼りながらPageSpeed Insightsのスコアを上げるには遅延読み込みが有効でした。

あともう１つ気になるのは、自動広告は遅延読み込みできるのかということ。

アドセンスを遅延読み込みする方法を解説した記事はいくつかあったけど、どれも広告ユニットのものばかりで、自動広告については触れられていませんでした。

なので、わたしの記事ではアドセンスの自動広告の遅延読み込みについてメモしておこうと思います☆

アドセンスを遅延読み込みする方法

目次へ戻る

ここでいうアドセンスとは、一般的な広告ユニットを指しています。

そして結論を先に書くと、以下の記事の方法で実現できました。

https://www.bugbugnow.net/2019/05/GoogleAdSense-lazy-loading.html

考え方としては、

  1. アドセンスの Javascriptを消して読み込まないようにする
  2. ユーザイベントを元にアドセンスのJavascriptを読み込む

という感じ。

ユーザーイベントがあるまでアドセンスが表示されないようになるので、遅延読み込みが実現するというわけです。

素晴らしい(*´▽｀*)

ただし、問題というか懸念があって、古いブラウザに対応していないということです。

そういうブラウザはもはや切り捨ててもいいような気もするけど・・・。

アドセンスを遅延読み込みすると収益は減るのか？

目次へ戻る

気がするだけじゃなく、断言をするために実際に試してみました。

検証したサイトのジャンルとしては、趣味のゲームブログです。

スペックは次の通り。

  • 訪問者の8割以上がスマホ
  • 1日の訪問者／PVは、1000／3500
  • 1日の平均コメント数は5つくらい

1ヶ月くらい様子を見た結果・・・

変わりませんでした。

一切変化がなく、ただただページの表示速度が上がって、アクセシビリティがアップするというメリットのみでした♪

アドセンスの自動広告を遅延読み込みする方法

目次へ戻る

前置きがかなり長くなる、アルアルだよね（ﾁｶﾞ

ここからが本題、自動広告を遅延読み込みする方法です。

と言っても、やり方は広告ユニットの方と同じ。

前述した記事のように、

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

を削除し、記事にあるJavascriptを入れるだけ。（←コレ大事）

自動広告のコードは以下のような感じだけど、

<script data-ad-client="ca-pub-1234567899999999" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

これを次のようにします。

<script data-ad-client="ca-pub-1234567899999999"></script>

そうすると、広告ユニット同様に自動広告も遅延読み込みができ、PageSpeed Insightsのスコアも爆上がりですヾ(≧▽≦)ﾉ

Javascriptがブロックされた場合

目次へ戻る

アドセンスの広告自体がJavascriptです。

なので、<noscript>で囲んでもムダです。

つい癖で囲んでみたけど、試したら普通に表示されませんでしたorz

アドセンスのコードを改変してもいいの？

目次へ戻る

この方法によるアドセンスのコード改変はOKだと認識しています。

ヘルプフォーラムには以下のようにあります。

一般的には、この広告コードをそのままコピーして貼り付けることをおすすめしますが、ユーザー エクスペリエンスの向上のために、コードの改変が不可欠になる場合もあります。

https://support.google.com/adsense/answer/1354736?hl=ja

リンク先のヘルプフォームは全てを熟読するのをおすすめします。

禁止事項に該当する項目、やったらダメな理由は説明しなくても分かるよね？

今回紹介した方法は遅延読み込みであって、不正に広告の表示するものではありません。

むしろ、ページの表示速度アップによるユーザーエクスペリエンスの向上に該当すると考えています。

「禁止」とも言われていないし、「許可」とも具体的には書かれていない。

まとまった成果がないと個別の問い合わせも受け付けてくれないし、これ以上はどうしようも図りえない・・・。

あとがき

目次へ戻る

非同期読み込みとか遅延読み込みとかややこしく感じる（笑

気になる方は独自にググってくださいorz

わたしがググって得た情報を整理すると、非同期っていうのは通信を待たずに次の読み込みを始めるから、結果的に全ての読み込みが終わるのが早くなってことかな。

読み込みの順番がズレて崩れるとか動作しないとか、WordPressではJQueryを非同期読み込みするとプラグインによっては順番がどうのこうのとか、昔あった気がする。

一方、遅延読み込みっていうのは、対象のものをスキップして 一旦 ページの表示をさせ、訪問者がサイトを閲覧中に対象のものを読み込む感じ。

それぞれを食事で例えてみよう。

メニューは以下の3品。

  • 卵かけごはん（通称：TKG）
  • お茶
  • どら焼き

非同期読み込みは、TKGもお茶もどら焼きも同時に食べ進めて、食べ終わったら「はい、どうぞ！」

遅延読み込みは、TKGを食べ終えて「はい、どうぞ！」お茶とどら焼きは食後の会話中に食べる。

非同期読み込みと遅延読み込みの違いは、お茶とどら焼きを食べるか食べないか。

お茶とどら焼きを食べない方が早く食事が済むよね～、ってことで遅延読み込みの方が早いというわけ。

うん、謎の例えだ(;´Д｀)