ページのスピードを上げる高速化では、グーグルアドセンスの遅延読み込み（Lazy Load）を行うのが非常に効果的。
この遅延表示では「アドセンスの広告コード先頭にある scriptタグ を後で読み込む」、ということが一般的に行われてるようです。
（これにより、ページ読み込みスピードを上げて page speed insights の点数（パフォーマンス スコア）を上げてSEO効果を期待する）
ネット上には その遅延読み込みを実現するための javascript が確認した範囲では2,3種類あるようですが、以下のポイントが気になります。
- script タグを javascript で組み立てているのがどうも気になる
（コードの見通しが良くないので、何か広告コードの改変につながるかも、といった不安感） - そのためもあって、アドセンスの古い広告コードと現在の標準コードで javascriptの記述の仕方も変わって少々面倒
（間違えること（意図しない改変）にもつながりそうですし）
アドセンス系のプラグインを作っている中で、
- 「もっと汎用的」であり
- 「より簡単にscriptタグをコピペするだけで良い」
（目視で明らかに読み込むコードが分かる）
みたいにできないものかということで、jQueryで作ってみましたのでご紹介。
（ネット上で見かける javascriptのコードもあわせてご紹介です）
javascript の lazyload
まずネット上でよく見る
javascript によるアドセンスの遅延表示用のコードと気になる点から。
※）コードには分かりやすいようにコメント追加してます
1：スクロールのみ対応の遅延読み込み用コード
まずよく見かける遅延表示用のjavascriptが以下。
<script>
//<![CDATA[
// lazyloadads: 遅延表示をしたかどうか判別のための変数をセット
// false：まだ遅延表示していない場合（初期値）
// true ：遅延表示を行った場合
var lazyloadads = false;
// -----------------------------------
// スクロールした時の動作
// -----------------------------------
window.addEventListener("scroll", function() {
// html 要素にスクロールがあり、かつ、遅延表示を一度も行ってない、
// または
// body 要素にスクロールがあり、かつ、遅延表示を一度も行ってない場合
if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
// ① scriptタグを作る
// async、ソース（adsbygoogle.jsのURL）を 作った script タグに入れる
(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-xxxxxxxxx';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
})();
// lazyloadads: 遅延表示をしたので true を設定し、
// 重複して遅延表示をしないようにする
lazyloadads = true;
}
}, true)
//]]>
</script>「スクロールをしたら、
アドセンス広告コードの最初の script タグを読み込む」
とすることで、遅延表示を実現してます。
19行目から30行目で 読み込む script タグを作ってますね。
アドセンスの広告コードからコピペのように持ってこれれば良いですが、javascript では scriptタグを含む文字列がそのままうまく書きだしできないことから、このような、プログラムで作る形になるようです。
スクロールでは、「スクロール操作がされ、実際スクロールがされているか」までを見ているようですが、すぐ下でみる もう１つの javascript では、「単に スクロールされたかどうか」を見てscriptタグの挿入をしています。
利用する意図から考えると、実際にスクロールされているかどうかは省いて、単にスクロール操作がされたかどうかだけでも良さそうです。
（コードの見た目がもっとシンプルになりますし）
【スクロール操作がされたかどうかだけを見るように変更】
<script>
//<![CDATA[
// lazyloadads: 遅延表示をしたかどうか判別のための変数をセット
// false：まだ遅延表示していない場合（初期値）
// true ：遅延表示を行った場合
var lazyloadads = false;
// -----------------------------------
// スクロールした時の動作
// -----------------------------------
window.addEventListener("scroll", function() {
// 遅延表示を一度も行ってない場合
if ( false === lazyloadads) {
// ① scriptタグを作る
// async、ソース（adsbygoogle.jsのURL）を 作った script タグに入れる
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-xxxxxxxxx';
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
// lazyloadads: 遅延表示をしたので true を設定し、
// 重複して遅延表示をしないようにする
lazyloadads = true;
}
}, true)
//]]>
</script>2：スクロール以外も対応の遅延読み込み用コード
もう１つよく見るのが以下のコード。
<script>
//<![CDATA[
(function(window, document) {
var lazyLoad = false;
function main() {
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-xxxxxxxxxxxxxxxx'; // 自分のIDを入れる
var sc = document.getElementsByTagName('script')[0];
sc.parentNode.insertBefore(ad, sc);
}
function onLazyLoad() {
if (lazyLoad === false) {
lazyLoad = true;
// イベントリスナーの解除（mousemoveは即時発火しやすいため除外を推奨）
window.removeEventListener('scroll', onLazyLoad);
window.removeEventListener('mousedown', onLazyLoad);
window.removeEventListener('touchstart', onLazyLoad);
window.removeEventListener('keydown', onLazyLoad);
main();
}
}
// 遅延読み込みの条件
window.addEventListener('scroll', onLazyLoad);
window.addEventListener('mousedown', onLazyLoad);
window.addEventListener('touchstart', onLazyLoad);
window.addEventListener('keydown', onLazyLoad);
window.addEventListener('load', function() {
// ページ途中から表示された場合
if (window.scrollY && window.scrollY > 0) {
onLazyLoad();
}
// 何も操作されない場合でも3秒後に読み込み
window.setTimeout(onLazyLoad, 3000);
});
})(window, document);
//]]>
</script>こちらもやってることも1つ目のコードに同じで、
違いはざっくり以下3点。
- １）広告読み込みを関数化：
処理をまとめることで、複数の条件（きっかけ）から呼び出せるようにしている。 - ２）多彩な「きっかけ」に対応：
スクロールだけでなく、クリック、キー入力、スマホの画面タッチなど、読者の何らかの操作に反応して即座に読み込みを開始する。 - ３）利便性の考慮：
ページが途中から表示された際の即時読み込みや、何も操作がなくても3秒後には自動で読み込むといった、実用的な配慮が含まれている。
使う目的が「 ページ読み込みスピードを上げて page speed insights の点数（パフォーマンス スコア）を上げる 」場合には、とにかく何もされなければ広告を表示しない、とできればよいので、1つ目のコードでも2つ目のコードでもどちらを使っても良いですね。
実使用上で考えると、記事にアクセスして来た読者がいて、その読者に対してはすぐにでも広告を表示したい、となることから、スクロールだけでなくキーが押されたり（スマホでは）画面タッチされたり、とにかく何かされれば広告を読み込む、としている2つ目のコードの方が良さそうです。
より分かりやすく汎用的に対応したコード
アドセンスの広告を遅延読み込みする、という場合、
上で見た2つの javascript でも良いですが、気になるのが以下の点。
- script タグをそのままコピペのように貼れない：
プログラムで script タグを作っているので、自分が使っているアドセンスのコードと同じなのか何か不安感がある - 仕様変更への対応が難しい：
Googleが広告コードの記述形式を将来的に変えた場合、JavaScriptのプログラム自体を書き換える手間が発生する。
そこで、これらを解決して「Googleから取得したコードをそのままコピペして、視覚的にも分かりやすく」できないか、作成したのが以下紹介するコードです。
jQueryの遅延読み込み用コード（2の改良版）
このコードはjQueryというものを使ってます。
- ※）jQueryはワードプレスで標準的に動作します
- ※）jQueryはワードプレス用の書き方になってます
参考：WordPressでjQueryが動かない場合の対処法！コードの書き方と読込みタイミング
<script>
jQuery(function ($) {
/* -----------------------------------
* 変数の設定
* ----------------------------------- */
/* 遅延読み込みするスクリプトをセット */
/* 最後の「</」+「script>」は 「<\/」+「script>」に変更するのを忘れずに */
var add_script = `★★★scriptタグをここに記述★★★`;
//遅延読込み判別
var lazyload_check = 'not_yet';
/* -----------------------------------
* リロードされていきなりページ途中であったり、ページ表示後何もしない場合の処理
* ----------------------------------- */
$( window ) . on( 'load' , function() {
if ( 'not_yet' === lazyload_check ) {
// 何もイベント発生がない場合：指定秒後に読み込込む
//（ミリ秒で指定：ここでは3秒に設定している）
lazyloadTimeout = setTimeout( onLazyLoad , 3000 );
}
// ページ途中の場合（縦方向のスクロールがある場合）
if( $( window ) . scrollTop() ){
onLazyLoad();
}
});
/* -----------------------------------
* 読み込むタイミングをセット
* ----------------------------------- */
$( window ) . scroll( onLazyLoad ); // スクロール時
// $( window ) . mousemove( onLazyLoad ); // マウスを動かした時
$( window ) . mousedown( onLazyLoad ); // マウスキーが押された時
$( window ) . keydown( onLazyLoad ); // キーボードが何か押された時
$( window ) . touchstart ( onLazyLoad ); // 画面タッチされた時
/* -----------------------------------
* LazyLoadの処理
* ----------------------------------- */
// まだ一度も遅延読み込みしてなければ スクリプトを実際に書き込み
function onLazyLoad() {
if ( 'not_yet' === lazyload_check ) {
// 1度でも lazyload した場合には already に設定（2回以上動作しないようにしておく）
lazyload_check = 'already';
// 余計な動作がないよう、指定したイベントに対する動作もoffしておく
$( window ) . off( "scroll" , onLazyLoad ); // スクロール時off
// $( window ) . off( "mousemove" , onLazyLoad ); // マウスを動かした時
$( window ) . off( "mousedown" , onLazyLoad ); // マウスキーが押された時
$( window ) . off( "keydown" , onLazyLoad ); // キーボードが何か押された時
$( window ) . off( "touchstart" , onLazyLoad ); // 画面タッチされた時
// bodyタグの最後にスクリプトを追加
$('body').append( add_script );
// タイマーもクリア
clearTimeout( lazyloadTimeout );
}
}
});
</script>※）「mousemove」は、1pxでもマウスが動くと（つまり意図せず少しでも動かしてしまうと）と広告が表示されることになり、あまり意味がなくなるためあえて外してます
アドセンス広告コード先頭にある「<script async src="https://～></script>」を8行目の「★★★scriptタグをここに記述★★★」にコピペ。
その時、最後の「 </script>」は「<\/script>」と必ず「\」を入れておく。
- ※）使用しているPCや表示するプログラムによって
「\」は、「¥」（円マーク）または「\」（バックスラッシュ）で表示されますがどちらも同じ - ※）これを入れておかないと、jQueryの終了タグとして誤認識され、プログラムが正しく動作しなくなるのでその回避
少し具体的に見てみると．．．
赤枠部分の「<script async ～></script>」をコピーして、
jQueryコード内の「★★★scriptタグをここに記述★★★」に貼り付けます。
最後の </script> を <\/script> にして、
以下のような感じになりますね。
<script>
jQuery(function ($) {
/* -----------------------------------
* 変数の設定
* ----------------------------------- */
/* 遅延読み込みするスクリプトをセット */
/* 最後の「</」+「script>」は 「<\/」+「script>」に変更するのを忘れずに */
var add_script = `<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxx"
crossorigin="anonymous"><\/script>`;
//遅延読込み判別
var lazyload_check = 'not_yet';
（以下省略）※）コピーした赤枠部分は、記事に入れるすべての広告コードから削除します。
補足）囲っている記号について
「★★★scriptタグをここに記述★★★」 を囲っている記号は、
シングルクォート「'」ではなくバッククォート「`」（Shift + @ で入力できる文字）にしてます。
間違って削除してしまった場合、
シングルクォートではなくバッククォートを入力してみてください。
Googleアドセンスから取得したコードには「改行」が含まれています。
通常のJavaScriptやjQueryでは、文字列の中に改行が含まれているとエラーになり、プログラムが動かなくなってしまいます。しかし、このバッククォート（テンプレートリテラル）で囲むことで、改行を含んだコードもそのまま丸ごと読み込めるようになるんですね。
ユーザーがコピーしてきた広告コードの形式を気にせず、ただ貼り付けるだけで確実に動作させるための工夫ってわけです。
補足）javascript版との違い
javascript の2つのコードと今回紹介している改良版jQueryコードとの違いについて。
どちらも「操作に合わせて広告を読み込む」という最終的な動作は同じですが、「コードがどこに挿入されるか」に違いがあります。
- JavaScript版（前述の2つ）：
既存のスクリプトタグの「直前」に割り込む形で挿入されます。動作は確実ですが、他のコードに紛れてしまい、正しく読み込まれたかどうかが少し探しにくい面があります。 - jQuery版（本記事の推奨コード）：
HTMLの最後（</body>タグの直前）に、広告コードを丸ごとドロップするように追加します。
jQuery版のメリット： ブラウザの「検証（デベロッパーツール）」で確認した際、一番下に新しいコードがパッと現れるため、「あ、今ちゃんと読み込まれたな！」という動作確認が視覚的に非常に分かりやすいのが特徴です。
自分で設置して「本当に動いているのかな？」と不安になる場合にも、この見え方の分かりやすさは大きな安心感につながります。
遅延表示用コードの入れ方
最初に見た javascript の２つの遅延読み込み用コードにしても、改良版の jQueryの遅延読み込み用コードにしても、記事内の最後（</body>タグの前：フッター）に入れればOK。
まずは使用しているテーマにそうした機能があるかを確認してみてください。
（あればまずそれを使ってみる）
もしテーマに機能がない、あるいは使い方が分かりにくい場合は、以下のプラグインを使うのが簡単です。
1. 「Simple Custom CSS and JS」を使う場合：
このプラグインは、JavaScript専用の設定にすると、自動的に <script> 〜 </script> の枠組みを生成してくれます。 そのため、紹介したコードの最初と最後の <script> と </script> を除いた「中身だけ」を貼り付けてください。
【WordPress】CSSやJavaScript,jQueryを簡単追加する方法！プラグインのおすすめ
2. 「Head, Footer and Post Injections」を使う場合：
こちらは入力したコードがそのまま出力されるため、紹介したコード（1行目から最後のリミッターまで）を丸ごと貼り付けてください。
※設置場所は「Before the closing tag」を選択します。
どちらのプラグインを使う場合も、
設定画面で「フッター（Footer / 直前）」に配置するように指定しましょう。
jQueryが使えるかどうかについて
ワードプレスは標準で jQueryが使えるようになってます。
- ※ ワードプレスを使っている場合には、
jQueryが動作する環境なのかな？と考える必要はない - 参考）【ワードプレス公式】WordPress に含まれ登録されているデフォルトスクリプト
ワードプレス以外では、
jQuery が動作するようライブラリの読み込み、というのが必要になります。
詳しくは「jQuery 導入方法」「jQuery 使うには」などで検索してみてくださいね。
ページスピード計測結果
実際、この jQueryの遅延表示用コードを使って「アドセンス広告コードの先頭の scriptタグを遅延読み込みする」ことで、どれほどページスピードが上がるのか。
page speed insights で確認してみると以下のようになりました。
- 確認したページ概要
（文字数が多い、画像もそれなりにある記事で試してみた）- 記事の文字数：約9500文字
- 画像の枚数：ヘッダ画像（266KB）＋記事本文に6枚（70～100KBぐらい）
ヘッダ画像以外は、遅延読み込み（lazyload）をしている - 画像以外：画像以外の貼り付け無し
（X投稿 や youtube動画、インスタなどの貼り付けなし） - 使用テーマ： Cocoon
以下、携帯電話（モバイル）での表示スピードを確認。
遅延読み込み）未対応の場合：40台
アドセンス広告の遅延読み込みを対応してない場合の結果。
アドセンス広告の遅延読み込みをしてない場合、
パフォーマンス値としては「49」。（複数回計測しても大体同じ）
計測に利用されたファ―ストビューの画面構成は、右上にあるように
「ヘッダ画像」＋「タイトル」＋「アドセンス広告」（自動広告が表示されている）＋「画像」（記事先頭のアイキャッチ画像）＋「メニュー」（テーマが出しているもの）。
数値だけから見れば、
まぁ遅いよね（もっと早くできればいいけどね）という感じです。
遅延読み込み）対応したもの：70台
今回の jQueryコードを使って、
アドセンス広告の遅延読み込み対応をした結果。
今回の jQuery を使ったアドセンス広告の遅延読み込みを使用すると、パフォーマンス値も「75」を越えて、かなりの改善が見られました。（複数回計測すると、大体80弱）
ちなみに、広告を全く貼ってない状態も同じ程度の値です。
つまり、遅延読み込みを行うことで、アドセンス広告を維持しつつ、Googleが重視する「ページの表示速度」も同時に手に入れられるといった、効果の高い対策だと言えますね。
遅延表示に関するグーグルの見解
上で見たjavascript の２つの遅延読み込み用コード、改良版の jQueryの遅延読み込み用コードは、記事内に貼り付けるアドセンスの広告コードから先頭のscriptタグを削除して、そのscriptタグは後から別に読み込む、といったことをしています。
こうした広告の遅延表示について、グーグル的に問題あるのか、
広告コードの改変となりポリシー違反にならないか、というのが気になります。
実際アドセンスのヘルプフォーラムでチェックしてみると、
グーグル的には問題ないようですね。
アドセンスのヘルプフォーラムでチェック
以下で、script タグを広告コードから削除し、かわりに遅延読み込みすることは規約違反（アドセンスのポリシー違反）になるのかどうかの質問と回答があります。
- １）アドセンス広告の遅延読み込みによる高速化についての疑問（2022年1月17日）
https://support.google.com/adsense/thread/146204030?hl=ja - ２）アドセンス広告の遅延読み込みについて（2022年2月8日）
https://support.google.com/adsense/thread/149769572?hl=ja
１）、２）ともですが、denさん（ゴールド プロダクト エキスパート）の回答によれば（グーグルの）社員からは問題ないという回答を得ている、ということですね。
- その他関連情報１：アドセンスコードの変更と省略についてhttps://support.google.com/adsense/thread/11038545?hl=ja
- その他関連情報２）グーグルの開発者向けサイト情報
グーグルの開発者向けサイト（Google Developers）でも遅延読み込みのためのコードサンプルを提供してますがこちらはより本格的で、広告が画面領域内に入ったら表示する、というもの。
enableLazyLoad（遅延読み込みの有効化）
Googleパブリッシャータグ（GPT）というのを利用するものですが難しいので割愛 ^-^;）
補足）アドセンス自動広告について
今回アドセンス広告の遅延表示を確認する中で、アドセンスの自動広告コード（アドセンスの審査時にヘッダに挿入するコード（AdSenseコード））は一旦削除しました。
その上で遅延読み込みを確認しましたが、なぜか自動広告も表示される。
あれ？コードの消し忘れかな？、と
あれこれチェックしましたがそれでも自動広告が表示される。
恥ずかしながら認識できてませんでしたが、
アドセンスの広告コードは 自動広告を表示する「AdSenseコード」があり、ディスプレイ広告や記事内広告を表示するコードは「AdSenseコード」＋「広告ユニットコード」という構成になってます。
参考）Google AdSense ヘルプ
コード導入ガイド：AdSense コードを取得してコピーする
広告ユニットコードに自動広告用のコードと同じコードが含まれているのは気が付いてましたが、気が付いているだけで、自動広告とディスプレイ広告などは独立したものだとばかり思ってました。（思い込みの恐ろしさ ^-^;) ）
今回遅延読み込みしているのは AdSenseコードになることから、ヘッダに挿入していた自動広告用のコード（AdSenseコード）を削除しても、遅延読み込みで読み込んでいるので結果意図せず自動広告も表示された、ということになりますね。
自動広告は完全に使わない（ディスプレイ広告や記事内広告だけにする）としたい場合には、アドセンスアカウントにログイン後、「広告」メニューの中で自動広告の設定をOFFにする必要があります。
今回のポイント
アドセンスはブログの収益化にはなくてはならない存在ですが、広告があるために記事の表示に時間がかかるようになりますね。（現状、かなり遅くなる）
記事表示スピードは検索順位にも影響するところなので、少しでも早くできる余地があれば対応しておきたいところ。
今回紹介した jQueryの遅延読み込み用コードにしても、調べるとすぐ出てくる javascript の遅延読み込み用コードにしても、いったん対応すればよいだけなので、時間の合間に試してみてください。
（どれほど表示スピードがアップするか、運営するブログやサイトで使用する価値があるかどうか一度試してみるのが良いと思います）
また、ブログで収益化したい、収益化したいけどなかなかうまく行かない、基本からしっかり体系的に学び直したい、などあれば、以下のメルマガにも是非登録していろいろ情報取ってみてくださいね。
コメント