☆100達成！PageSpeed Insightsのスコアアップ方法その２：GoogleAdSenseの読込みを遅延させる（Youtubeも）

2021/07/09
2020/02/09
SEO
WordPress

Google「PageSpeed Insights」のスコア（点数）をアップさせる方法その『2』です！
今回はGoogleAdSense（＆Youtubeなど）の読込みを遅延させます。

Google『PageSpeed Insights』でチェック

まずはGoogleの『PageSpeed Insights』にて、前回の対策後のスコアをサンプルとして置いておきます。

対策前のスコア（画像圧縮＆読込み遅延対策後）

モバイル

パソコン

今回はここから大幅にアップします！

GoogleAdSenseの読込みを遅延させる

効果：

『PageSpeed Insights』の測定後にでてくる診断の結果、「▲第三者コードの影響を抑えてください」の項目が一番やばそうな数値を出していたんですよね。

ってことで、今回はこの3つの項目の対策をするのですが、まずはGoogleAdSenseの項目「Google/Doubleclick Ads」の読込みを遅延させたいと思います。

1. GoogleAdSenseのスクリプトタグをhtmlから削除する

まずはhtmlのソースから

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

をすべて削除します。

このページ（サイト）はWordpressで作成しているので、ウィジェットにいくつか記述していた上記の「GoogleAdSenseのスクリプトタグ」を、1行目のようにコメントアウトすることで、html内からは全て削除できました。

WordPressで作成されてない方は、htmlのソースで検索して、とりあえず全てのこの「GoogleAdSenseのスクリプトタグ」を消しちゃってください。

2. GoogleAdSenseの読込みを遅延させるコードを記述する

bodyの閉じタグ＜/body＞の直前に、以下のコードを配置します。

<script>
(function(doc, win) {
  function main() {
    // GoogleAdSense読込み
    var ad = doc.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    var sc = doc.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }

  // 遅延読込み
  var lazyLoad = false;
  function onLazyLoad() {
    if (lazyLoad === false) {
      // 複数呼び出し回避 + イベント解除
      lazyLoad = true;
      win.removeEventListener('scroll', onLazyLoad);
      win.removeEventListener('mousemove', onLazyLoad);
      win.removeEventListener('mousedown', onLazyLoad);
      win.removeEventListener('touchstart', onLazyLoad);
      main();
    }
  }
  win.addEventListener('scroll', onLazyLoad);
  win.addEventListener('mousemove', onLazyLoad);
  win.addEventListener('mousedown', onLazyLoad);
  win.addEventListener('touchstart', onLazyLoad);
  win.addEventListener('load', function() {
    // ドキュメント途中（更新時 or ページ内リンク）
    if (doc.documentElement.scrollTop != 0 || doc.body.scrollTop != 0) {
      onLazyLoad();
    }
  });
})(document, window);
</script>

ちなみに上記コードはGoogleAdSenseの項目「Google/Doubleclick Ads」の読込みのみを遅延させるものですので、他にもある場合は以下のように記述します。

この対策を行ったサイトでは「eBayのアフィリエイトタグ」もめちゃくちゃ読み込みに時間がかかっていたので、ここで以下のように記述（12~20,33行目を追加）し、読込みを遅延させました。
ですので、他に読込みを遅延させたいものがあれば、htmlから同じようにタグを削除し、こちら記述を使って17行目の「ad.src=’httls://〇〇’」部分を変更してください。

<script>
(function(doc, win) {
  function main() {
    // GoogleAdSense読込み
    var ad = doc.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    var sc = doc.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }
  function main2() {
    // eBayのアフィリコード読込み
    var ad = doc.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    ad.src = 'https://epnt.ebay.com/static/epn-smart-tools.js';
    var sc = doc.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }

  // 遅延読込み
  var lazyLoad = false;
  function onLazyLoad() {
    if (lazyLoad === false) {
      // 複数呼び出し回避 + イベント解除
      lazyLoad = true;
      win.removeEventListener('scroll', onLazyLoad);
      win.removeEventListener('mousemove', onLazyLoad);
      win.removeEventListener('mousedown', onLazyLoad);
      win.removeEventListener('touchstart', onLazyLoad);
      main();
      main2();
    }
  }
  win.addEventListener('scroll', onLazyLoad);
  win.addEventListener('mousemove', onLazyLoad);
  win.addEventListener('mousedown', onLazyLoad);
  win.addEventListener('touchstart', onLazyLoad);
  win.addEventListener('load', function() {
    // ドキュメント途中（更新時 or ページ内リンク）
    if (doc.documentElement.scrollTop != 0 || doc.body.scrollTop != 0) {
      onLazyLoad();
    }
  });
})(document, window);
</script>

これでここまで落ちてくれました！