Loading

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

CAFEonnnanoko15212650_TP_V

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

『三国天武』言葉解説:ダメージ深化効果とは?

『三国天武』#B09 名馬『紫電(しでん)』のおすすめスキル発動タイミング・騎乗武将

関連記事

コメント

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

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

CAPTCHA


New Article

  1. 三国天武 陥陣先鋒
  2. 三国天武 顔良 文醜
  3. 三国天武 名馬 黒捷
  4. 三国天部 夏侯淵 神器
  5. 三国天武 夏侯淵 夏侯妙才

人気記事

  • 該当なし
PAGE TOP