Loading

『SEO』PageSpeed InsightsでGoogleAdsenseのページ表示速度改善


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);

ふぇにば|PhoEniBiR

投稿者プロフィール

わくわくしてて偉い系VTuver ふぇにば です。
少しでもお役に立てておりましたら嬉しいです(。・ω・。)

関連記事

  1. 『SEO』管理人が実践したWEBサイト・ブログのアクセス数をアップさせる10の手…

    2017.05.09

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


New Article

  1. ドラクエウォーク 覚醒千里行
  2. VRChat TrustRank
  3. cluster いつかの放課後 美しいワールド
  4. 武烈皇后 神器
  5. 三国志真戦 絆効果
PAGE TOP