PageSpeed Insightsの低いモバイルスコア改善！Google Adsense遅延読み込みが鍵

2024年5月7日

当ページのリンクには広告が含まれています。

しろくま

PageSpeed Insightsの対策として、「Google Adsense遅延読み込み」を行えば、スコアを大幅改善できる可能性があります。

くろくま

どれくらいスコアを改善できるの？

しろくま

個人差はあると思いますが、当ブログで試したところ、モバイルスコアが「44→79」になりました。

くろくま

すごっ！

しろくま

「Google Adsense」の改善項目を確認する方法、「Google Adsense遅延読み込み」の設定方法を紹介しますので、試していない方は、ぜひ続きを確認してみて下さい。

「Google Adsense遅延読み込み」設定後のスコア改善例

しろくま

当ブログで「Google Adsense遅延読み込み」設定後、PageSpeed Insightsでモバイル「44→79」、PC「83→94」と、それぞれスコアを改善しています。

くろくま

僕も同じように設定すれば、スコアが大きく改善されるかな？

しろくま

PageSpeed Insightsで「Google Adsense」の改善項目が多数ある場合、「Google Adsense遅延読み込み」を設定する事で、スコア改善の効果を得られると思われます。

「Google Adsense」の改善項目が多数あるか確認しよう【PageSpeed Insights】

くろくま

「Google Adsense」の改善項目って、何を確認したら良いのかな？

しろくま

PageSpeed Insightsの分析結果に「googleads.g.doubleclick.net」や「pagead2.googlesyndication.com」の表示があるか確かめます。

▲ JavaScriptの実行にかかる時間の低減

▲ 第三者コードの影響を抑えてください

しろくま

上記のように、Adsenseの改善項目が何箇所もあるような場合、「Google Adsense遅延読み込み」設定を行えば、スコアを大きく改善できる可能性があります。

くろくま

Adsenseが原因になっているとは…

しろくま

当ブログでは、「▲ document.write() を使用しない」「▲ 使用していないJavaScriptの削除」にも、同様の改善項目を確認しています。
次は「Google Adsense遅延読み込み」の設定方法をご紹介します。

「Google Adsense遅延読み込み」設定方法

しろくま

Google Adsense設置用のコードは、通常下記のようになっているかと思います。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="XXXXXXXXXXXXXXX"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="XXXXXXXXXX"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

しろくま

1行目の「<script async…></script>を下記コードに置き換えて、Adsenseを遅延読み込みさせます。（ca-pub-XXXXXXXXXXXXXXXXはご自身のIDに書き換えて下さい）

<script>
(function(window, document) {
  function main() {
   
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    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);
  }
 
  // Adsense遅延読込み
  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() {
    
    if (window.pageYOffset) {
      onLazyLoad();
    }
  });
})(window, document);
</script>