Gazelle
2021年03月21日公開 917 Views

Adsenseの表示を遅延させるスクリプト

GoogleのPageSpeed Insigntで速度改善を行っていると、モバイルではどうしても点数が伸びない。その最たる原因はGoogle Adsenseのダウンロード量が100KB超と大きいことにある。

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

のようにべた書きで書いてしまうとモバイルの遅い環境をエミュレートしているテストではスコアを伸ばすことができないのも無理はない。良くて70点といったところだろう。

唯一の方法はAdsenseのScriptを遅延させて読み込むことである。下記のようにする。

window.addEventListener("load", function() {
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    setTimeout(function(){
      document.getElementsByTagName('body')[0].appendChild(ad);
    }, 2000);
});

Reactで書いているならば<body>の閉じタグ直前に次のように書く感じになるだろう。

<script dangerouslySetInnerHTML={{
    __html: `
      window.addEventListener("load", function() {
        var ad = document.createElement('script');
        ad.type = 'text/javascript';
        ad.async = true;
        ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
        setTimeout(function(){
          document.getElementsByTagName('body')[0].appendChild(ad);
        }, 2000)
      });
    `
  }}
/>

読み込みTimingの記事に上手くまとめられているが、loadイベント発火のタイミングは、読み込むべきリソースを全て読み込んだ段階であり、少なくともこれ以降で読み込む必要がある。

広告の表示はできる限り速い方が良いため、setTimeoutはできれば使いたくないものだが、loadから更にいくらか遅延させなければMobileのスコアは上がってくれなかった。

ただ、流石にページ表示から少ししないと広告が出ないのはちょっとという感じである。なので主な使用シーンとしてはページを表示したときはAdsense広告が見えない位置にある場合と言える。

見えない位置にある前提だとaddEventListener("load"ではなく、最初にスクロールした時に読み込むaddEventListener("scrollなんかでも問題はないかと思われる。

これを行うと70点のスコアが90点ぐらいまでには上がるのだが、体感的には大して変わらず、またSEO視点ではCore Web Vitalの指標とは相関があまりないように感じる。

なので個人のサイトには収益機会の損失を防ぐためにこのスクリプトは導入しなかった。広告位置的に問題のない人は試してみると良いだろう。

関連記事

javascriptとjquery、cssを使用してトップへ戻るボタンを作成。考え方も含めて説明していきます。
2020年03月23日
Googleスプレッドシートとスクリプト言語Google App Script(GAS)を使用して青色申告含む確定申告を行ったのでまとめ
2020年03月28日
reduxで理解すべきimmutable objectの概念を深めていく。
2021年01月19日
commit前に他のコードを実行する方法を解説
2022年04月07日
ホームへ戻る