
GoogleAdSenseを遅延読込みさせる方法 ページ表示速度が劇的に改善します
FC2ブロガーのM(@yulari_happy )です。

僕は現在、FC2ブログテンプレート製作者 Akira さんの作成による「ample」というテンプレートを使ってこのブログを運営しています。とても高スペックなテンプレートですから、本来なら ブログ の ページ読み込み速度 も 爆速 なはずなんです。
ところが、僕のブログには Google AdSense をはじめとする様々な 広告 を貼り付けたり、いろんな カスタマイズ を施したことでAkiraさんのブログテンプレートをまるっきり生かせていません(^^;)
まあ、「アドセンスを貼り付けている以上は仕方ないよね」と半ば諦めかけていたのだけれど、つい最近になって 友達 から言われた あるセリフ に ギクッ! となったのです。
「Mさんのブログを開こうとすると、読み込み中のまま重くて開けない時がある」

ガーーン!
こういうのって、ブログを運営する自分自身ではまったく気付かないんですよね( ̄▽ ̄;)
これはさすがに何か良い方策を考え直さなければアカン!と考えたのが、今回のページ読み込み速度改善のカスタマイズを施したきっかけでした。
【改善前】PageSpeed Insights で現在のページ表示速度を測定
まずは、久しぶりに PageSpeed Insights を開いて、自ブログのページ表示速度を測定してみました。
これはスマホで表示した時のスコアですが、何と18点!かなりヤバいですよね( ̄O ̄;)ちょっと致命的かも知れません…。
そこで、改善点として指摘されている警告を見てみると、こんなメッセージがありました。
「第三者コードの影響を抑えて下さい」
こんな警告って、今まで表示されていたっけ?と思いつつ、これこそが何とかしなければならない問題点なんですよね(汗)
【改善後】Google AdSense の遅延読み込みを施したら劇的にスコアがアップ!
結論から先に言ってしまいますと、AdSense の遅延読み込みを施したら劇的にスコアがアップしました。
改善後に PageSpeed Insights でページ表示速度を測定したところ、スコアは次の結果になりました。
何と、78点!
アドセンスの他にも第三者コードの読み込みをしている関係で、100点満点にならなかったのは残念でした。しかし、Google AdSense を遅延読み込みさせただけで一気にこれだけスコアが改善されるなんてちょっと凄くないですか?
【実践編】Google AdSense を遅延読み込みさせる方法
Google AdSense を遅延読み込みさせるための導入手順は以下の通りです。
- <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> を HTML上からすべて削除する
- 下記の JavaScript コードを </body> 直前にコピペする
<script>
//<![CDATA[
//lazy load ads
var lazyloadads = false;
window.addEventListener("scroll", function() {
if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
(function() {
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();
lazyloadads = true;
}
}, true)
//]]>
</script>
たったこれだけでページ読み込み速度が劇的に改善されます(^^)
この、js を入れ替える作業だけで初回のユーザーイベントまではアドセンスの読込みを遅延。すなわち、ユーザー操作があるまでは、いつまでも Google AdSense の広告を表示しない、ということです。いたって合理的な手法だと思います(^^)
▼参考にしたサイト
Mempercepat Loading Blog yang Terpasang Iklan Google Adsense
Memasang unit iklan yang banyak, bisa membuat loading Blog/Website menjadi lebih lambat dan berat, karena akan meload semua script Google Adsense.
Google AdSense の読み込みを遅らせるメリット、デメリット
なお、Google AdSense を遅延読み込みさせることによるメリットとデメリットをまとめておきますね。
メリット
Google AdSense は、JavaScript や画像、フォント、設定ファイルなどの複数データを読込むため、広告コードを貼れば貼るほど重たくなります。
AdSense を読み込みつつ、ページ表示速度も可能な限り早くできる遅延読み込みは、Google検索のうえでも高評価が与えられ、上位表示というさらなるメリットにもつながるはずです。
デメリット
初回のユーザーイベントまではアドセンスの読込みを遅延させますから、ファーストビューの最上部などにアドセンスを貼り付けている場合は当然ながらクリックされにくくなって収益が下がるはず。
広告の配置を見直す必要が生じそうです。
また、Google AdSense で自動広告を利用している場合、一部の機能が正常に動作しない可能性があるかも知れません。
ちなみに、僕のブログでは自動広告がちゃんと表示されています。環境に悪影響がないかよく確認してから自己責任で導入して下さい。
まとめ
今回は、Google AdSense を早く読み込むことで高速化させるのではなく、遅く読込むことによって(ページ表示速度の計算外のタイミングで読み込むため、ページ表示速度が)高速化させる方法をご紹介しました。
なお、Google AdSense の遅延読み込み導入はアドセンスから禁止されてはいないそうですからご安心下さい。禁止の可能性もあったようですが、下記の情報を読むと大丈夫みたいです。
技術部門との確認が必要とのことでご回答までに少し時間がかかりました。
回答をそのまま記載するのは問題があるかも知れませんのポイントだけ共有します。遅延読み込みについてポリシー上、導入禁止ではないが、それによって広告の表示やデザインに影響が発生した場合、広告主の意図しない配信となり違反措置がつく可能性はある。
以上をご留意する必要があります。
個人的にはページ表示速度の向上により若干の波及効果はありそうですが、総合的に考えますと導入メリットはない気がしました。引用:アドセンスブログで稼ぐ.“Googleアドセンス|メールの問い合わせやサポートはどこから?”(最終閲覧日: 2020年05月14日)