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の指標とは相関があまりないように感じる。
なので個人のサイトには収益機会の損失を防ぐためにこのスクリプトは導入しなかった。広告位置的に問題のない人は試してみると良いだろう。
関連記事
