「がちゃんの部屋」Google Adsense掲載でモバイルでも高速表示化

 度々書いていることだが、僕はこのブログの他に、「がちゃんの部屋~映画と旅行の偏愛」というサイトも運営している。アクセス数は多くはない。昔は多かったのだが、最初に間借りしていたDionのレンタルサーバーを追い出されて以降、あちらこちらを転々として、アクセス数低迷という状況に至っている。この「がちゃんの部屋~映画と旅行の偏愛」だが、レスポンシブ に対応しているので、1つのHTMLでPCでもモバイルでも見ることはできる。しかし、Google Adsenseを導入しているために、PageSpeed Insightsで速度を測ると、モバイルではかなり表示速度が遅く、ネックになっていた。この週末、解決策を探していたところ、Google Adsenseの書き方を変えれば、PageSpeed Insightsでも高速表示ができることがわかった。それは、

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

という記述の代わりに

<!– Google AdSense –>

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