2024年10月29日 (火曜日)本日の人気記事トップ10
今日は2024年10月29日です。
目次に行く・戻る
メルカリ招待コード: 招待コードをコピー
Googleのサービスを利用されている方々は多いと思います。さまざまサービスがありますが、今回はグーグルアドセンス(Google AdSense)の新しいコードの遅延読み込みコードの2種類の方法についてです。サイト表示のスピードによっては、Java Scriptが読み込みに邪魔?をしてしまいます。しかし、アドセンス(AdSense)に関わらず他にもJava Scriptは必要不可欠なプログラミング言語となっています。Java Scriptを用いることでさまざまなことを実装することがきでます。ただ、問題なのはサイトの表示速度が一旦そのJava Scriptがページ内のどこの部分に配置されているのかや、非同期にしてあるのか同期なのか遅延読み込みなのかなどでサイトの表示速度が変わってきてしまいます。Java Scriptを使用している数にもよりますがGoogle AdSense(グーグルアドセンス)のJava Scriptはかなりのサイト表示に遅延をもたらしてしまいます。
アドセンス336pxPC閲覧記事下表示1つ目コード
+これまでによく読まれている記事一覧クリックでOPEN+
150,737件の PV
106,741件の PV
75,752件の PV
67,240件の PV
44,824件の PV
40,747件の PV
38,216件の PV
37,259件の PV
36,629件の PV
33,450件の 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 > をすべて削除します。
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の場合ですと以下のような結果になりました。
あとは、少しでも早くするために以下コード(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 );
参考サイト)
あなたにおすすめな関連記事 おすすめの記事一部広告 Total487
アドセンス336pxPC閲覧記事下表示1つ目コード
目次に戻る
-AdSense , WordPress , カスタマイズ , 伝えたいこと , 備忘録
目次に戻る
目次に戻る
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
This opt out feature requires JavaScript.
The tracking opt-out feature requires cookies to be enabled.
comment