☆100達成!PageSpeed Insightsのスコアアップ方法 その2:GoogleAdSenseの読込みを遅延させる(Youtubeも)

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

目次

  1. Google『PageSpeed Insights』でチェック
  2. GoogleAdSenseの読込みを遅延させる
    1. GoogleAdSenseのスクリプトタグをhtmlから削除する
    2. GoogleAdSenseの読込みを遅延させるコードを記述する
  3. Youtubeの読込みを遅延させる
  4. 今回の結果

「PageSpeed Insights」のスコアアップ方法一覧

Google『PageSpeed Insights』でチェック

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

対策前のスコア(画像圧縮&読込み遅延対策後)

モバイル

PSI-Sample_モバイル2_9

パソコン

PSI-Sample_パソコン2_37

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

GoogleAdSenseの読込みを遅延させる

効果:

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

GoogleAdSense対策前

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

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

まずはhtmlのソースから

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

をすべて削除します。

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

GoogleAdSenseのスクリプトタグコメントアウト

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>

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

GoogleAdSense対策後

eBayに関しては消えちゃいました!これで大幅にスコアはアップしたのですが、「Youtubeの読込み遅延対策」がまだなので、次に「Youtubeの読込み遅延対策」を行いたいと思います。

バグ取りの日々さんの「GoogleAdSenseの遅延読込みでページ表示速度を改善
を参考にさせていただきました。ありがとうございます!

Youtubeの読込みを遅延させる

効果:

ここでの「Youtubeの読込み遅延対策」は『PageSpeed Insightsのスコアアップ方法 その1:画像の圧縮&読込みを遅延させる』の対策で導入した、『a3 Lazy Load』の設定をするだけです。

ってことで『a3 Lazy Load』の設定は、「Lazy Load Videos and iframes」の項目を「オフ」から「オン」にするだけです。

a3LazyLoad-settingOFF

a3LazyLoad-settingON

超簡単!これでYoutubeなどのiframeも読込み遅延の対策は完了です!

これで項目の中から「Youtube」の読込みの項目は消えちゃいました!GoogleAdSenseの項目「Google/Doubleclick Ads」もこれなら問題なしですよね!

Youtbe対策後

ちなみに『a3 Lazy Load』は、画像の読込みを遅延させるのがメインのプラグインですので、他の画像の読込み遅延対策のプラグインを入れている方は、Youtube動画の読込み遅延対策用の『WP YouTube Lyte』というプラグインで対策可能です。

最初はそのようにしてたのですが、わざわざYoutubeだけのためにプラグイン一つ増やすのもなぁ。ってことで、ここでは『a3 Lazy Load』のみで対策することにしました。

今回の結果

今回は「GoogleAdSense」「Youtube」の読込みを遅延させる対策をメインに行ったのですが、その結果は以下になりました。

対策前のスコア

モバイル

PSI-Sample_モバイル2_9

パソコン

PSI-Sample_パソコン2_37

対策後のスコア(GoogleAdSenseの読込み遅延対策後)

モバイル

PSI-Sample_モバイル3_23

パソコン

PSI-Sample_パソコン3_64

対策後のスコア(GoogleAdSenseとYoutubeの読込み遅延対策後)

モバイル

PSI-Sample_モバイル4_34

パソコン

PSI-Sample_パソコン4_79

モバイルは「9」「34」「25」アップ、
パソコンも「37」「79」「42」アップと、大幅にスコアアップしてくれました!

これは大きかったな。

ってことで、次は『PageSpeed Insightsのスコアアップ方法 その3:Autoptimizeを導入する』です。
こちらもだいぶスコアアップしましたので、こちらも参考にしてください!

「PageSpeed Insights」のスコアアップ方法一覧



関連記事

WPで全ページ見れなくなった時

WordPressの記事がトップページ以外、全部見れなくなった時の対処方法(404 error)


年末にサーバーの移転を進めていたのですが、以前に何度かサーバーの移転やWordpressの引っ越し等々していたので、大変…

記事を読む▷


WordPressでリダイレクト:『.htaccess』の書き方まとめ


『.htaccess』は変更する頻度が少ないので、変更する時に勉強して把握しても、一度変更してしまえばそれでおしまい!と…

記事を読む▷


WordPress:特定カテゴリで投稿を古い順に表示させる方法


Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…

記事を読む▷


☆100達成!PageSpeed Insightsのスコアアップ方法 その5:設定の見直し


Google「PageSpeed Insights」のスコア(点数)をアップさせる方法 その『5』です! これまでたい…

記事を読む▷


これは便利!!WordPressの投稿内に、管理者やログインユーザーにしか見れないメモを残す方法


よく投稿を途中まで作って、なかなか仕上げれずに長い期間あいてしまうと『これなんのサイト参考にしてたんやっけ?』とか『え〜…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP