ゆうらり Happy Smile
GoogleAdSenseを遅延読込みさせる方法 ページ表示速度が劇的に改善します

GoogleAdSenseを遅延読込みさせる方法 ページ表示速度が劇的に改善します

FC2ブログ日記-カスタマイズの所感など
2020/05/14
胃がん_ブログ_ゆうらりHappySmile_管理人M_イラスト_アイコン_画像
M
#GoogleAdsense #GoogleAdsenseブログ #グーグルアドセンス #ページ表示速度 #ページ表示速度改善 #Adsense高速化 #Adsenseカスタマイズ #ブログカスタマイズ #FC2ブログ #Adsense遅延読み込み

GoogleAdSenseを遅延読込みさせる方法 ページ表示速度が劇的に改善します


FC2ブロガーのM(@yulari_happy )です。


ゆうらりHappySmile 管理人 M今回は、ブログに Google AdSense の広告を貼り付けているブロガーさんにとって大変な 朗報 になるかも知れません。Google AdSense遅延読込みページ表示速度を劇的に改善する方法 をご紹介します(^^)

僕は現在、FC2ブログテンプレート製作者 Akira さんの作成による「ample」というテンプレートを使ってこのブログを運営しています。とても高スペックなテンプレートですから、本来なら ブログページ読み込み速度爆速 なはずなんです。

ところが、僕のブログには Google AdSense をはじめとする様々な 広告 を貼り付けたり、いろんな カスタマイズ を施したことでAkiraさんのブログテンプレートをまるっきり生かせていません(^^;)

まあ、「アドセンスを貼り付けている以上は仕方ないよね」と半ば諦めかけていたのだけれど、つい最近になって 友達 から言われた あるセリフギクッ! となったのです。


「Mさんのブログを開こうとすると、読み込み中のまま重くて開けない時がある」


face_man_shock

ガーーン!


こういうのって、ブログを運営する自分自身ではまったく気付かないんですよね( ̄▽ ̄;)


これはさすがに何か良い方策を考え直さなければアカン!と考えたのが、今回のページ読み込み速度改善のカスタマイズを施したきっかけでした。

スポンサードリンク

【改善前】PageSpeed Insights で現在のページ表示速度を測定

GoogleAdSenseを遅延読込みさせる方法 ページ表示速度が劇的に改善します


まずは、久しぶりに PageSpeed Insights を開いて、自ブログのページ表示速度を測定してみました。


Google Adsense の広告を遅延読み込みする前の PageSpeed Insights スコア


これはスマホで表示した時のスコアですが、何と18点!かなりヤバいですよね( ̄O ̄;)ちょっと致命的かも知れません…。


そこで、改善点として指摘されている警告を見てみると、こんなメッセージがありました。


「第三者コードの影響を抑えて下さい」


こんな警告って、今まで表示されていたっけ?と思いつつ、これこそが何とかしなければならない問題点なんですよね(汗)

【改善後】Google AdSense の遅延読み込みを施したら劇的にスコアがアップ!

結論から先に言ってしまいますと、AdSense の遅延読み込みを施したら劇的にスコアがアップしました。


改善後に PageSpeed Insights でページ表示速度を測定したところ、スコアは次の結果になりました。


Google Adsense の広告を遅延読み込みした後の PageSpeed Insights スコア


何と、78点!


アドセンスの他にも第三者コードの読み込みをしている関係で、100点満点にならなかったのは残念でした。しかし、Google AdSense を遅延読み込みさせただけで一気にこれだけスコアが改善されるなんてちょっと凄くないですか?


スポンサードリンク

【実践編】Google AdSense を遅延読み込みさせる方法

Google AdSense を遅延読み込みさせるための導入手順は以下の通りです。


  1. <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> を HTML上からすべて削除する
  2. 下記の 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日)

この記事が気に入ったら
いいねとシェアしよう!

あわせて読みたい
data-matched-content-ui-type="image_card_stacked" data-matched-content-rows-num="6,2" data-matched-content-columns-num="1,5"
現在の人気記事はコチラ!
FC2ブログ日記-カスタマイズの所感など