SEO対策

【SEO対策】Google広告を遅延読み込みしてサイト表示スピードを改善する方法。

サイト表示スピード

こんにちは makadamiです。

「Googleアドセンス広告が重い..どうにかしてサイト表示スピードを改善したい。」

と悩んでいないでしょうか。

「Google広告を貼らない」という対策はありますが、収益をあげたい方にとっては、それは断じて不可。

ということで

Google Adsense広告を遅延読み込みさせてサイト表示スピードを改善する方法をご紹介していきたいと思います。

初心者の方でも非常に簡単に設定を行うことができるので是非みていってください。

よろしくお願いします。

Google Adsense広告を遅延読み込みする方法

技術向上

僕の場合、Google Adsense広告の遅延読み込みをして大幅にサイトスピードを改善することができましたが...

他にもサイト表示スピードを改善する対策は一通りやってきたので、一概には「コレ!」とはいえないです。

ですが、PageSpeed Insightsで、遅延読み込みをする前のスコアは、モバイルで大体40~50点でした。


そこでGoogle Adsense広告の遅延読み込みでサイト表示スピードを改善したところ...

サイト表示スピードスコア
モバイルが86!
サイト表示スピードスコア
パソコンが100!

とどちらもハイスコアを叩き出す事に成功しました。

ですが、ここ最近、使用していないJavaScriptの削減やら何やらをやっていたので真偽は不明です...

ただ一ついえることは、今まで色んな対策をして、その度にスコアを確認してみて、特に変わらなかったんですが

google Adsenseの遅延読み込みをしたらすぐにスコアが変動したことです。

ということで具体的な設定方法を今から解説していきます。

不要なコードを削除しよう

まずはGoogle Adsenseコードで不要なコードを削除します。

ポイント

※ここで重要なことは、記事にある全ての不要なコードを削除すること。

一つだけ削除しても記事に反映されません。

不要なコードとは「Scriptタグ」の部分です。

この囲っているコードを削除してください。下記にて参照。

コード

コードを削除すると下記のようになります。

コード

記事にあるすべてのGoogle Adsenseコードをこんな感じにすればOKです。

Google Adsense広告コードの一番最初が、<ins class="adsbygoogle"から始まっていれば大丈夫です。

だいぶスッキリしましたね。

自動広告の場合は?

どこにもやり方が載っていなかったので、自分なりにやってみた結果がこちら。

自動広告コード

※僕の使っているテーマはAFFINGERなのでAFFINGER管理画面に自動広告コードを貼り付けています。

他のテーマを使用している場合は、各、自動広告コードを貼り付けている箇所から編集してください。

できるなら自動広告は使わない方がいいかも?

※非推奨。間違っている可能性があります。

LazyLoad用コードの設置

無事、不要なコードを削除したら、javaScriptコードを設置していきます。

以下のコードをbody直前の部分に追記してください。

<script>
//<![CDATA[
//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)
//]]>
</script>

・AFFINGERの場合は、AFFINGER管理画面から⇨「その他」とすすんでいき、「上級者向け」から「コードの出力」の

「</body>直前に出力するコード」に上記のコードを入力します。

・プラグインを使う場合は、lnsert Headers and Footersというプラグインを使いましょう。

そのプラグインの一番下にある「Scripts in Footer」に上記のコードを入力すればOKです。

・プラグインを使わない場合は、テーマエディターのテーマファイルから「footer.php」を選択します。

その中にある、「</body>」と記述された部分の直前に上記のコードを入力してください。

※非推奨

※自己責任でお願いします。

今回、参考にさせて頂いた記事です。コードのコピーはこちらの記事からコピーさせて頂きました。

無事コードを入力できたら完了です。

お疲れ様でした。これでサイト表示スピードがあがっているはず!?

以上で「【SEO対策】Google広告を遅延読み込みしてサイト表示スピードを改善する方法。」でした。

こちらの記事もおすすめです↓


  • この記事を書いた人

まかだみ

1995年生まれの茨城県出身フリーター
不労所得を獲得の為ブログを開始。
ブログ運営のノウハウを日々勉強し、主にその情報発信をしています。 基本的な記事から上級者向けの記事などを幅広く執筆しています。
【好きな食べ物】
寿司・焼肉・ラーメン・アイス。

-SEO対策
-,