Life Collections

Googleのページ速度改善ツール『PageSpeed Insights』を使っていると、「第三者コードの影響を抑えてください google/doubleclick ads」という項目が出てきました。GoogleAdsenseの表示速度が遅いという意味ですが、標準コード・・・ということで、改善方法見つけましたのでご紹介します。

GoogleAdsenseコードとは

GoogleAdsenseコードは下記のようなコードです。この中で、adsbygoogle.jsを読み込んでいる箇所が広告数分出てくるのですが、この処理が遅いのでユーザーアクション時（スクロールとか）に読み込むようにすることで、ページ表示の待ち時間を減らします。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block; text-align:center;"
     data-ad-format="fluid"
     data-ad-layout="in-article"
     data-ad-client="ca-pub-XXXXX"
     data-ad-slot="XXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

1. adsbygoogle.js読込全削除

下記コードがPerformance読込が悪い原因なので、このコードは一律削除します。

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

2.直前にjsコード追加

記録のために、参考サイトのソースコードを流用しています。綺麗にまとめられている×問い合わせに応じて最新化もされておりますので、ぜひお立ち寄りください。

GoogleAdSenseの遅延読込みでページ表示速度を改善

(function(window, document) {
  function main() {
    // GoogleAdSense読込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す
    //ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXXX';
    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, document);