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. sangokutenbu_syoi

人気記事

  • 該当なし
PAGE TOP