Google AdSenseを導入したことで、サイトの読み込み速度が遅くなって困っている方が多いのではないでしょうか? サイト読み込み速度は、SEO対策において非常に重要な要素となりますので、放置しておくと不利になります。
今回はWordPressのプラグインを使用せずに、JavaScriptのみで広告遅延表示に対応する方法をご紹介します。プラグインを使用したくない方におすすめの方法となります。
本記事では図をたくさん使って丁寧に解説しておりますので、初心者の方でも簡単に真似できるような構成にしております。
「JavaScriptって何?」
「Google AdSenseの広告設定がわからない」
って方でも大丈夫です!
では早速やっていきましょう!
※本記事では、レンタルサーバー「Conoha」、WordPressテーマ「Cocoon」を例に説明しております。別のレンタルサーバーやテーマをご使用の方は、少し操作方法が異なります。
広告表示遅延対応の流れ
JavaScriptによる広告遅延
WordPressプラグイン「Flying Scripts」でも広告遅延表示が可能です。プラグインのインストールが必要ですが、JavaScriptで設定するより簡単なため、おすすめです。
設定方法はこちらで解説していますので、興味のある方はご覧ください。
それでは具体的な設定方法を解説していきます。
JavaScriptで広告遅延を設定する
万が一に備えて、設定する前に必ずバックアップを取るようにお願いします。バックアップ方法は以下の記事に詳細をまとめておりますので、ご一読をお願いします。
Google AdSenseの広告コードを遅延対応のコードに変更する
- 1WAFをOFFにする
レンタルサーバーが「ConoHa WING」の場合、図のように設定します。
設定が正常に完了すると、図のように表示されます。
WAFの設定をOFFにしないとセキュリティが強すぎて、あとで説明する「Cocoon設定」の設定が保存できなくなります。
ご契約されているレンタルサーバーによって設定方法が異なります。有名なレンタルサーバーの公式WAFページへのリンクをまとめましたので、ご参考にしてください。
レンタルサーバー名 WAF
(公式サイトの説明ページ)ConoHa Wing エックスサーバー シンレンタルサーバー さくらのレンタルサーバ - 2「Cocoon設定 - 広告」のAdSenseコードを編集する
Cocoonの場合、図の場所にコードを貼り付けていると思いますので、AdSenseコード前半の <script async> ~ </script> を削除してください。
※削除したコードは後ほど別の場所に記載します。簡単に貼り付けられるように、コードも掲載しておきます。
<!-- <script async> ~ </script>を削除 --> <!-- 広告名 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-0000000000000000" data-ad-slot="0000000000" data-ad-format="auto" data-full-width-responsive="true"></ins> <!-- ca-pub-0000000000000000の番号をご自身のIDに入れ替える --> <!-- data-ad-slot="0000000000"の番号をご自身のIDに入れ替える --> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>
6・7行目について、ご自身のIDに入れ替えてからご使用ください。
設定を保存します。
- 3「Cocoon設定 - アクセス解析・認証」のAdSenseコードを削除する
Cocoonの場合、図の場所にコードを貼り付けていると思いますので、AdSenseコード前半の <script async> ~ </script> を削除してください。
※削除したコードは後ほど別の場所に記載します。※AdSenseコード以外のコードがある場合、間違って削除しないように注意してください。
- 4フッター用コードにJavaScriptの広告遅延表示コードを入力する。
右上のJavaScripitにマウスをあわせると、コピーアイコンが表示されるため、クリックしてコードをコピーしてください。
<script> //<![CDATA[ (function(window, document) { // lazyLoad: 遅延表示をしたかどうか判別のための変数をセット // false:まだ遅延表示していない場合(初期値) // true :遅延表示を行った場合 var lazyLoad = false; function main() { var ad = document.createElement('script'); ad.type = 'text/javascript'; ad.async = true; ad.crossorigin = 'anonymous'; // ca-pub-0000000000000000:ご自身のコードに入れ替えてください。 ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-0000000000000000'; var sc = document.getElementsByTagName('script')[0]; sc.parentNode.insertBefore(ad, sc); } // ----------------------------------- // 遅延読み込みの実行 // 一度も遅延読み込みしてない場合 //(lazyLoad が false の場合)遅延読み込みを行う // ----------------------------------- function onLazyLoad() { // 一度も遅延読み込みをしてない場合 if (lazyLoad === false) { // 2度以上行わないように false から値を変えておく lazyLoad = true; // スクロールしたら、など、遅延読み込みを行う条件を全て削除しておく // スクロールした場合 window.removeEventListener('scroll', onLazyLoad); // マウスを動かした場合 window.removeEventListener('mousemove', onLazyLoad); // マウスのボタンが押された場合 window.removeEventListener('mousedown', onLazyLoad); // 画面をタッチされた場合 window.removeEventListener('touchstart', onLazyLoad); // キーが押された場合 window.removeEventListener('keydown', onLazyLoad); // 実際の遅延読み込み(アドセンスの script 読み込み) 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() { // 表示されたときページの途中の場合 if (window.pageYOffset) { onLazyLoad(); } //何もされない場合は、指定した秒数後に自動で読み込み(ミリ秒で指定) window.setTimeout(onLazyLoad,5000) }); })(window, document); //]]> </script>
コードはたびびとJINのブログさんを参考にさせて頂きました。ありがとうございます。
フッター用コードにコピーしたコードを貼り付けます。
17行目のパブリッシャーIDをご自身の番号に入れ替えてください。
※パブリッシャーIDの調べ方がわからない方は、こちらを参考にしてください広告遅延する秒数を変更したい場合は、76行目の数値を修正してください。(初期値は5000ミリ秒 = 5秒)
設定を保存します。
AdSenseコードの遅延表示対応は、以上となります。
※WordPressテーマ「Cocoon」の場合、これだけでは広告遅延表示ができません。
次に解説する内容もあわせて対応してください。
「footer-javascript.php」ファイルをコピーする
「footer-javascript.php」は通常、Cocoonの親テーマにしか存在していませんが、親テーマを直接編集すると、失敗したときに復元できなくなる場合があります。そのためバックアップとして必ず子テーマにコピーしてから編集するようにしましょう。
また、子テーマへファイルをコピーする方法は2つありますので、どちらも解説させて頂きます。
個人的にはファイルマネージャーの方が、直感的でわかりやすくておすすめです。
「footer-javascript.php」を親テーマから子テーマにコピーする
(レンタルサーバーのファイルマネージャー)
ご契約のレンタルサーバーによって使用方法が異なります。以下に有名なレンタルサーバーの説明ページを掲載しておりますので、ご参考にしてください。
レンタルサーバー名 | ファイルマネージャー (公式サイトの説明ページ) |
ConoHa Wing | |
エックスサーバー | |
シンレンタルサーバー | |
さくらのレンタルサーバ |
本記事では「ConoHa WING」のファイルマネージャーを例に解説していきます。
- 1
- 2登録情報を入力して、ログインする
- 3ファイルマネージャーを起動する
- 4Cocoonの親テーマフォルダ「cocoon-master」の「footer-javascript.php」をコピーする
「pubulic_html」→「サイトのアドレス」→「wp-content」→「themes」→「cocoon-master」→「tmp」に移動してください。
「footer-javascript.php」を右クリックしてコピーしてください。
- 5子テーマフォルダ「cocoon-child-master」に移動し、「tmp」フォルダを作成する
※既に「tmp」フォルダが存在する場合は読み飛ばしてください。
フォルダ名を「tmp」と入力してください。
※「tmp」以外はファイルの読み込みができなくなるため、間違えないように注意してください。 - 6コピーした「footer-javascript.php」を「tmp」フォルダに貼り付ける
ファイルマネージャーでのコピーは以上となります。
「footer-javascript.php」を親テーマから子テーマにコピーする
(FTPクライアントソフト)
FTPクライアントソフトを使用すると、ConoHa WINGにログインする必要がなくなり、大変便利になります。ただし、事前にソフトのインストールや設定が必要です。
インストール方法については以下の記事に詳しくまとめておりますので、ぜひご参考にしてください。
- 1FileZillaを起動する
アイコンをダブルクリックして起動してください。
- 2設定したSFTP or FTPサーバーに接続する
左上の下矢印をクリックしてください。
設定済みの名前が表示されるため、クリックしてください。
Filezillaは以下のレイアウトになっています。
これを覚えておくと、この後の説明が頭に入りやすくなると思います。
- 3右側のサーバー側ウィンドウで、Cocoonの親テーマフォルダ「cocoon-master」の「footer-javascript.php」をダウンロードする
サーバー側で「pubulic_html」→「サイトのアドレス」→「wp-content」→「themes」→「cocoon-master」→「tmp」の順に移動してください
ファイルマネージャーと異なり、サーバー上でのファイルのコピー&ペーストに対応していません。そのため一旦パソコンにダウンロードする必要があります。
手順⑦で、パソコン側のダウンロード先を選択してください。
※本記事では、ダウンロード先として「デスクトップ」を例に解説しています。サーバー側の「footer-javascript.php」を選択後、右クリックしてからダウンロードしてください。
ダウンロード完了後、左下のウインドウに「footer-javascript.php」ファイルが表示されます。
- 4右側のサーバー側ウィンドウで、Cocoonの子テーマフォルダ「cocoon-child-master」に「tmp」フォルダを作成する
※既に「tmp」フォルダが存在する場合は読み飛ばしてください。
フォルダ名を「tmp」と入力してください。
※「tmp」以外はファイルの読み込みができなくなるため、間違えないように注意してください。 - 5「tmp」フォルダに「footer-javascript.php」をアップロードする
図の順番にクリックし、アップロードしていきます。
アップロードが完了すると、右下のウィンドウに「footer-javascript.php」ファイルが表示されます。
FTPクライアントソフトでのコピーは以上となります。
コピーした「footer-javascript.php」を編集する
先ほどアップロードしたので、WordPressの管理画面から編集ができるようになっています。
- 1WordPressの管理画面で、「テーマファイルエディター」に移動する
- 2「footer-javascript.php」のAdSenseコードを停止させる
「tmp」→「footer-javascript.php」の順にクリックします。
22行目のコードの頭に「//」を追記し、コメントアウトします。
この内容がすべての元凶です。これを止めない限り遅延コードが上書きされて、無効化されます。
ファイルを更新をクリックして、設定を保存します。
- 3広告を掲載しているページに移動し、動作をチェックする
パソコンとスマホで動作が異なる場合があるため、両デバイスでチェックすることをおすすめします。
- 4PageSpeed Insightsで点数を確認する
- 5WAFの設定をONにする
WAFがOFFのままだとセキュリティが弱いため、忘れずにONにします。
設定が正常に完了すると、図のように表示されます。
長くなりましたが、「JavaScript」での広告遅延方法は以上となります。
まとめ
ここまで読んで頂き、ありがとうございます。
いかがでしたでしょうか。
長文となってしまいましたが、基本的には設定が単純明快な「Flying Scripts」で問題ございません。JavaScriptの方は、オマケで紹介していると考えてください。
ただ、広告を遅延表示の設定をした場合、レイアウトの表示崩れが起こる可能性があります。表示崩れ対策について、以下の記事に詳しく解説していますので、あわせてご覧ください。
不明な点や間違った点がございましたら、気軽にお問合せフォームよりご連絡をお願いします。できる限りサポートさせて頂きます。
それではまた会いましょう!
コメント