Loading…

AdSense WordPress カスタマイズ 伝えたいこと 備忘録

アドセンス新コード遅延読み込みモバイルでページスピード最高値

AdSense(アドセンス)新コードの遅延読み込み2つの方法

本日の人気記事BEST10

所要時間目安:8

この記事は2021年10月6日のものです。現在は状況が異なる可能性がありますのでご注意ください。

AdSense WordPress カスタマイズ 伝えたいこと 備忘録

アドセンス新コード遅延読み込みモバイルでページスピード最高値

Googleのサービスを利用されている方々は多いと思います。さまざまサービスがありますが、今回はグーグルアドセンス(Google AdSense)の新しいコードの遅延読み込みコードの2種類の方法についてです。サイト表示のスピードによっては、Java Scriptが読み込みに邪魔?をしてしまいます。しかし、アドセンス(AdSense)に関わらず他にもJava Scriptは必要不可欠なプログラミング言語となっています。Java Scriptを用いることでさまざまなことを実装することがきでます。ただ、問題なのはサイトの表示速度が一旦そのJava Scriptがページ内のどこの部分に配置されているのかや、非同期にしてあるのか同期なのか遅延読み込みなのかなどでサイトの表示速度が変わってきてしまいます。Java Scriptを使用している数にもよりますがGoogle AdSense(グーグルアドセンス)のJava Scriptはかなりのサイト表示に遅延をもたらしてしまいます。

スポンサーリンク

アドセンス336pxPC閲覧記事下表示1つ目コード

この記事を読む方へのオススメ
よく読まれている人気記事一覧

グーグルアドセンス(Google AdSense)のJava Script遅延読み込み方法の2つの方法です。

いくつかのサイトにて、おおむね同じようなコードが記載されています。当たり前ですが、どれもlazy loadを用いたものになっています。

2021年7月19日にグーグルアドセンス(Google AdSense)の広告コードが新しくなりました。

具体的には以下のように異なっています。

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

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-◯◯◯◯◯◯◯◯◯◯" crossorigin="anonymous"></script>

 

このこれまでの

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

だけではなく、

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-◯◯◯◯◯◯◯◯" crossorigin="anonymous"

というように末尾に、

?client=ca-pub-◯◯◯◯◯◯◯◯" crossorigin="anonymous"

と追記されました。

このことにより、通常でもこれまでよりは早くはなったものやはりページ表示速度に関してはページスピードインサイトで分析してみても、Java Scriptが邪魔をして遅くなっていますみたいなアドバイスが表示されます。

目次に戻る


数年前より、この遅くなってしまうグーグルアドセンス(Google AdSense)のJava Scriptの遅延読み込みコードの方法が紹介されています。

多くはインドの以下サイトのコードを</body>直前に挿入すつ方法がひとつです。

 

//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)

上記コードにても今の所表示されます。

 

しかし、新コードになりより高速になったので上記コードを少しだけ追記編集することにより実現可能になります。

上記のコードのオプション部分のcrossorigin = 'anonymous';とご自身の?client=ca-pub-◯◯◯◯◯◯◯◯の部分のca-pub-以降の数字もデフォルトで追記されました。

上記のアドセンスの新コードによる遅延読み込みコードの方法ですと、以下のようになります。

方法1アドセンス新コード対応遅延読み込みコードスクリプト

 

//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.crossorigin = 'anonymous';
ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-◯◯◯◯◯◯◯◯◯';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();

lazyloadads = true;
}
}, true)

 

上記の赤い部分を新コードに対応させるべく記入位置と記入内容を上記のようにします。

※pub-以降の◯◯◯◯◯◯◯部分はご自身の数字に置き換えてください。

 

そして、themeの</body>直前に挿入します。

 

あとは、サイト内の<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-◯◯◯◯◯◯◯◯" crossorigin="anonymous"></script>をすべて削除します。

1つでも残っていますと、表示はされますが、ページ表示速度が著しく低下もしくは低評価になってしまうことです。

なので、サイト内のグーグルアドセンス(Google AdSense)のそれぞれの広告コードの、

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-◯◯◯◯◯◯◯◯" crossorigin="anonymous"></script>

をすべて削除します。

次にアドセンス新コードの遅延読み込みコードの方法2です。

多くのサイトで上記方法1の遅延読み込みコードと以下の遅延読み込みコードの方法が記載されています。

 

<script>
(function(window, document) {
function main() {
// GoogleAdSense読込み
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);
}

//遅延読込み
var lazyLoad = false;
function onLazyLoad() {
if (lazyLoad === false) {
// 複数呼び出し回避 + イベント解除
lazyLoad = true;
window.removeEventListener('scroll', onLazyLoad);
window.removeEventListener('mousemove', onLazyLoad);
window.removeEventListener('mousedown', onLazyLoad);
window.removeEventListener('touchstart', onLazyLoad);
window.removeEventListener('keydown', onLazyLoad);
main();
}
}
window.addEventListener('scroll', onLazyLoad);
window.addEventListener('mousemove', onLazyLoad);
window.addEventListener('mousedown', onLazyLoad);
window.addEventListener('touchstart', onLazyLoad);
window.addEventListener('keydown', onLazyLoad);
window.addEventListener('load', function() {
// ドキュメント途中(更新時 or ページ内リンク)
if (window.pageYOffset) {
onLazyLoad();
}
//何もアクションがないときは指定秒数後に読み込み開始(ミリ秒)
window.setTimeout(onLazyLoad,3000)
});
})(window, document);
</script>

 

方法1、方法2のどちらも内容としては、サイトが表示されただけでは読み込みませんよ。マウススクロールやマウスを動かした後や画面にタッチしたなどのユーザの行為の後にアドセンスのJava Scriptコードを読み込みますよ。

という内容の意味になります。

これだけでも問題はないのですが、それだとアドセンスのJava Scriptが読み込まれないので何も起こりません。

それでも良いのですが、赤い部分を追加することにより表示3秒後に強制的にJava Scriptを読み込みますよいう意味内容のコードを追記しています。

この方法2の場合でも古いアドセンスコードであれば問題はないのですが、上記のように新しいアドセンスの新コードには、

?client=ca-pub-◯◯◯◯◯◯◯◯" crossorigin="anonymous"></script>

が追加されています。

 

よってこちらの新コードを正確に遅延読み込みさせるには、これまでになかった上記コード部分を追記する必要があります。

追記した遅延読み込みコードが以下のようになります。

<script>
(function(window, document) {

function main() {
// GoogleAdSense読込み
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
ad.crossorigin = 'anonymous';

ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-◯◯◯◯◯◯◯◯◯◯';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
}

// 遅延読込み
var lazyLoad = false;
function onLazyLoad() {
if (lazyLoad === false) {
// 複数呼び出し回避 + イベント解除
lazyLoad = true;
window.removeEventListener('scroll', onLazyLoad);
window.removeEventListener('mousemove', onLazyLoad);
window.removeEventListener('mousedown', onLazyLoad);
window.removeEventListener('touchstart', onLazyLoad);
window.removeEventListener('keydown', onLazyLoad);

main();
}
}
window.addEventListener('scroll', onLazyLoad);
window.addEventListener('mousemove', onLazyLoad);
window.addEventListener('mousedown', onLazyLoad);
window.addEventListener('touchstart', onLazyLoad);
window.addEventListener('keydown', onLazyLoad);
window.addEventListener('load', function() {
// ドキュメント途中(更新時 or ページ内リンク)
if (window.pageYOffset) {
onLazyLoad();
}
//何もアクションがないときは指定秒数後に読み込み開始(ミリ秒)
window.setTimeout(onLazyLoad,3000)
});
})(window, document);
</script>

以上、アドセンスの新コードの遅延読み込みにするには" crossorigin="anonymous"と?client=ca-pub-◯◯◯◯◯◯◯◯"に2つをどこにどのように追記すれば良いのかわからない時は、

上記コードのように赤い部分に新たに加わったアドセンスの新コード2つを追加することにより、遅延読み込みコードを実現することができるようになります。

何度かページスピードインサイト(PageSpeedInsight)にて、分析(測定)してみた結果、ある程度のバラツキはあるものの当サイトでは2倍以上の評価になりました。過去最高値でした。

以下参照です。

 

アドセンス新コード遅延読み込みモバイルでページスピード最高値

 

PCの場合ですと以下のような結果になりました。

アドセンス新コード遅延読み込みPCPageSpeedInsight最高値

スポンサーリンク

あとは、少しでも早くするために以下コード(DNSプリフェッチ)をhead内に追記すると少しは効果があるかもしれません。

直接header.phpに記載する場合は以下になります。

<link rel='dns-prefetch' href='//ajax.googleapis.com'/>
<link rel='dns-prefetch' href='//lh3.googleusercontent.com'/>
<link rel='dns-prefetch' href='//pagead2.googlesyndication.com'/>
<link rel='dns-prefetch' href='//googleads.g.doubleclick.net'/>
<link rel='dns-prefetch' href='//adservice.google.co.jp'/>
<link rel='dns-prefetch' href='//adservice.google.com'/>

function.phpに以下コードを追記すると、自動的にhead内に追加されます。

//DNSプリフェッチ

function add_resource_hints( $hints, $relation_type ) {
if( is_single() ){
if ( 'dns-prefetch' === $relation_type ) {
$hints[] = '//lh3.googleusercontent.com';
$hints[] = '//pagead2.googlesyndication.com';
$hints[] = '//adservice.google.co.jp';
$hints[] = '//adservice.google.com';
$hints[] = '//googleads.g.doubleclick.net';
}
}
return $hints;
}
add_filter( 'wp_resource_hints', 'add_resource_hints', 10, 2 );

参考サイト)

GoogleAdSenseの読込みの遅さを改善する。 問題点と目標 問題点 GoogleAdSenseは、JavaScript/画像/フォント/設定ファイルなどの複数データを読込むため、非常に低速です。そのため、広告を導入したページは、広告のないページに比べてページ表示速度が低速...
AdSenseの表示を速くしたいのであえて遅延表示?! AdSenseの広告を表...


アドセンス336pxPC閲覧記事下表示1つ目コード

おすすめの記事一部広告

    Multiplex 広告

AdSense, WordPress, カスタマイズ, 伝えたいこと, 備忘録」同じカテゴリーの記事一覧


関連記事

ハイブリッドHDD

PC Windows10 カスタマイズ カスタマイズ 伝えたいこと 備忘録

dynabookEX56/MRDにST1000LM014ハイブリッドHDDに交換・換装したレビュー評価

もう数年前と言うには、 ある意味ふさわしくはなくなってきたハイブリッドHDD(SSHD)です。 Seagate社をはじめ東芝製ハイブリッドHDDなど数社が、 既に1TBを超えるハイブリッドHDD(SS…

もっと読む

インフィード広告アドセンス

アイキャッチ画像自動設定

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録

アイキャッチ画像を設定し忘れないように自動で設定する方法

WordPressやFC2ブログなどで、アイキャッチ画像を設定しなければならないのは意外と手間ですよね。 以前に、アイキャッチ画像を設定し忘れた時にランダムに表示させる方法を記事として紹介しました。 …

もっと読む

インフィード広告アドセンス

人気記事ランキング表示

STINGER PLUS+ Stinger6 Stinger7 WordPress カスタマイズ 伝えたいこと 備忘録

人気記事ランキングに順位を付けてCSSで丸く表示する方法

多くのサイトやブログにおいて人気のある記事は異なると思います。 また、 人気記事をサイトやブログに表示しておくだけで訪れてくれた人にこのブログやサイトでの人気のある記事ランキングが分かるようになります…

もっと読む

インフィード広告アドセンス

AMP非対応化

WordPress カスタマイズ カスタマイズ 伝えたいこと 備忘録 時事ネタ

AMP化対応方法を辞めてみるアクセス解析が不明瞭なので

昨年11月から徐々にAMP対応にしていき12月にはページのみAMP完全対応にしました。 ですが、 Google Analyticsでのアクセス解析の仕方・方法がいまいちわからないというのと、通常ページ…

もっと読む

目次に戻る

よろしかったらシェアよろしくお願いします。

-AdSense, WordPress, カスタマイズ, 伝えたいこと, 備忘録

目次に戻る

目次に戻る


コメントを閉じる

comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください