今日は2025年4月19日です。
メルカリ招待コード：
Googleのサービスを利用されている方々は多いと思います。さまざまサービスがありますが、今回はグーグルアドセンス（Google AdSense）の新しいコードの遅延読み込みコードの2種類の方法についてです。サイト表示のスピードによっては、Java Scriptが読み込みに邪魔？をしてしまいます。しかし、アドセンス（AdSense）に関わらず他にもJava Scriptは必要不可欠なプログラミング言語となっています。Java Scriptを用いることでさまざまなことを実装することがきでます。ただ、問題なのはサイトの表示速度が一旦そのJava Scriptがページ内のどこの部分に配置されているのかや、非同期にしてあるのか同期なのか遅延読み込みなのかなどでサイトの表示速度が変わってきてしまいます。Java Scriptを使用している数にもよりますがGoogle AdSense（グーグルアドセンス）のJava Scriptはかなりのサイト表示に遅延をもたらしてしまいます。
アドセンス336pxPC閲覧記事下表示1つ目コード
+これまでによく読まれている記事一覧クリックでOPEN+
151,286件の PV
107,003件の PV
75,767件の PV
67,244件の PV
47,278件の PV
40,921件の PV
38,228件の PV
37,261件の PV
36,833件の PV
36,378件の PV
このことにより、通常でもこれまでよりは早くはなったものやはりページ表示速度に関してはページスピードインサイトで分析してみても、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>をすべて削除します。
１つでも残っていますと、表示はされますが、ページ表示速度が著しく低下もしくは低評価になってしまうことです。
なので、サイト内のグーグルアドセンス（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の場合ですと以下のような結果になりました。
あとは、少しでも早くするために以下コード（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 );
参考サイト）
【AmazonタイムセールSALE車＆バイク】！
人気の商品が日替わりで登場。毎日お得なタイムセール「Amazonタイムセール全体」
出展：Amazonタイムセール人気の商品が日替わりで登場。毎日お得なタイムセール
ポチップ あなたにおすすめな関連記事
-
伝えたいこと 備忘録 時事ネタ
昨今では、「全然（ぜんぜん）」◯◯という言葉がある意味では普通になってきています。私の覚えている限りではおおよそ10年くらい前からでしょうか…。そもそも、「全然」という言葉は基本的には否定形な意味合い…
もっと読む
-
伝えたいこと 備忘録 時事ネタ
2020年の1月ころから現在緊急事態宣言の2回目の発出に至る原因となっている新型コロナウイルス感染症（COVID-19）に関してです。感染者（陽性者）が出始めておおよそ2ヶ月後の4月7日に1回目の緊急…
もっと読む
-
備忘録
2015年も数時間前に終わってしまいました。 早いもので既に2016年になって約4時間程度過ぎ去りました。今年も残すところあと364日と20時間あまり…。 （笑）m(__)m2015年は皆さんかがお過…
もっと読む
-
PC Windows10 伝えたいこと 備忘録 時事ネタ
マイクロソフト（Microsoft）によるWindows10へのアップグレード攻撃？と通知が無償アップグレード期間残すところ約2ヶ月となったところで、3月ころから勝手にWindows10になっていた（…
もっと読む
-
メンテナンス 備忘録 車
現在の車は、軽自動車、普通自動車などの種別にかかわらずリサイクル預託金の制度は平成17年から開始されました。そのため2005年以降に製造された車は購入時に必ずリサイクル預託金を支払わねばならないことと…
もっと読む
-
伝えたいこと 備忘録 時事ネタ
以前に記事にしたとおりに早速選挙の投票に行ってきました。 >>そうだ!選挙に行こう!!今回は18才以上の選挙権初の参院選です。選挙に行こう！！。 ...はじめて朝一番での投票をしてしまいま…
もっと読む
入学入社まであと…入学入社祝いはどんなPresent（プレゼント）でどのように過ごされますか？
ホワイトデープレゼントは以下などの豊富なキャンペーン商品から選ぶと良いと思います。
おすすめの記事一部広告
Total723
アドセンス336pxPC閲覧記事下表示1つ目コード
目次に戻る
-AdSense, WordPress, カスタマイズ, 伝えたいこと, 備忘録
目次に戻る
目次に戻る
comment