Google Adsenseのタグを遅延読み込みする方法

PageSpeed Insightを使ってサイトをチェックすると、アドセンスのタグによって点数がごっそり減らされるのを見たことがあるかと思います。

アドセンスを外すわけにもいかないからしょうがない

と諦めていませんか？

アドセンスのタグを遅延読み込みすることで、すっきり解決するので是非やりましょう。

この解決策によって、アドセンス収益が落ちたりしても責任は負えませんので、あくまで自己責任でお願いします。

アドセンスのタグによって起こる遅延

アドセンスのタグによって、どれだけの遅延が起こっているのかをチェックしてみました。

遅延読み込み前の警告

見て分かる様に、アドセンスのタグによってかなり時間が掛かっていることが分かります。

Chromeのコンソールで確認しても、アドセンス関連全ての読み込みが終わるまで大体2秒近くかかっているので、そりゃPageSpeed Insightさんも怒るってもんですわ。

アドセンスのタグの遅延読み込み

こちらの方の記事を参考に改善しました。

まず最初に、アドセンスのタグにくっついているadsbygoogle.jsの読み込みを全て消します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

上記のタグを全て消します。
各アドセンスのタグに付いているので、広告を表示している箇所全てで消しましょう。

次に</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>

をぶち込みます。以上です。

内容的には、スクロールをした時に画面内にアドセンスのタグがあったら

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

を読み込むよ！といった内容です。

ファーストビュー内にアドセンスのタグを置いている場合は全く意味がないので、注意してください。
PageSpeed Insightの点数だけは上がりますが、点数だけ上げても意味はないです。

PC版はファーストビューにアドセンスのタグがあるけど、モバイル版ならファーストビューにアドセンスは入れてないよ！

という方は下まで読んでいただけると幸せになれます。

遅延読み込みをした結果

アドセンスを遅延読み込みした結果

あれだけあった警告がほとんどなくなったのが分かるかと思います。PageSpeedInsightの点数も飛躍的に上がったと思うので、確認してみましょう！

遅延読み込みにちょい足しで、更に便利に

この項目はモバイル版のファーストビューにアドセンスが無く、PC版のファーストビューにアドセンスが入っている方のみ読んでください。

アドセンスの遅延読み込みをすると、スクロールするまでアドセンスが出なくなります。

なので、PC版のファーストビューにアドセンスが入っている場合、スクロールをしないとアドセンスが出てこない事態が発生します。

そもそも、アドセンスの遅延読み込みを行う目的としては、モバイル版のPageSpeed Insightの点数を上げる（全てを読み込む速度を上げる）目的なので、PC版は考えなくて良いのです。

なら、PC版で遅延読み込みを行わなければ良いじゃない！という事で、カスタマイズ。

モバイル分岐をできるようにする

wordpressを使っている人しか意味がありません。

下記内容を function.php に追記しましょう。

//モバイル分岐
function is_mobile() {
  $useragents = array(
    'iPhone',          // iPhone
    'iPod',            // iPod touch
    'Android',         // 1.5+ Android
    'dream',           // Pre 1.5 Android
    'CUPCAKE',         // 1.5+ Android
    'blackberry9500',  // Storm
    'blackberry9530',  // Storm
    'blackberry9520',  // Storm v2
    'blackberry9550',  // Storm v2
    'blackberry9800',  // Torch
    'webOS',           // Palm Pre Experimental
    'incognito',       // Other iPhone browser
    'webmate'          // Other iPhone browser
  );
  $pattern = '/'.implode('|', $useragents).'/i';
  return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

これで、is_mobile を使ってモバイル版とPC版という分岐が出来るようになります。

アドセンス遅延読み込みをモバイル分岐にする

下記内容を </body> 直前にぶちこみましょう。

<?php if(is_mobile()): ?>
<script>
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>
<?php else: ?>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<?php endif; ?>

これで、モバイル版ではアドセンスの遅延読み込みをおこない、PC版ではおこなわない設定が完了です。

is_mobile の使い方を簡単に説明すると、

<?php if(is_mobile()): ?>
//モバイル版だけで表示される内容
<?php else: ?>
//PC版だけで表示される内容
<?php endif; ?>

といった使い方が基本になります。

他にも is_mobile の前に ! を入れて使うと、

<?php if(!is_mobile()): ?>
//PC版だけで表示される内容
<?php endif; ?>

といった分岐もできるので、覚えておきましょう。

以上、お疲れ様でした！