PageSpeed InsightsでGoogleAdsenseのページ表示の速度改善をする方法
今回ご紹介する事例は、Googleのページ速度改善ツール『PageSpeed Insights』で「第三者コードの影響を抑えてください google/doubleclick ads」の項目ができたときの改善方法のご紹介です。この第三者コードの接続が行われるとサイト読み込みに時間がかかり、サイトスピードが遅くなる原因となります。メインスレッドのブロック時間が0msなら影響はないのですが、それ以上のブロック時間が発生している場合は改善をしましょう。
第三者コードの影響とは
人によって多少異なりますが、「第三者」の行にGoogleアナリティクスやYahoo!、Facebook第三者コードとはGoogleアナリティクスなどが表示されていると思います。この外部サイトと連携する時に接続されるリンク先のことを指します
また、 実はWordPressのテーマによっては、TwitterやFacebookへのSNS共有機能があります。この第三者コードの接続が行われるとサイト読み込みに時間がかかり、サイトスピードが遅くなる原因になっています。
サイトスピードは下記にからアクセスできます。
GoogleAdsenseコードとは
GoogleAdsenseコードは下記のようなコードです。この中で、adsbygoogle.jsを読み込んでいる箇所が広告数分出てくるのですが、この処理が遅いのでユーザーアクション時（スクロールとか）に読み込むようにすることで、ページ表示の待ち時間を減らします。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-XXXXX"
data-ad-slot="XXXXX"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>adsbygoogle.js読み込み全削除
上記のGoogleAdSenseのコードで不要なコードを削除します。ここで注意する事は１つだけ不要なコードを削除しても反映されないので記事内にあるコードを全て削除する必要があります。削除するコードは下記script部分になります。
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>直前にjsコード追加する
下記のコードを</body>直前に配置します。
[ca-pub-XXXXXXXXXXXXXXXX] ご自身のGoogleAdSenseコードを入力してください。
(function(window, document) {
function main() {
// GoogleAdSense読込み
var ad = document.createElement('script');
ad.type = 'text/javascript';
ad.async = true;
// 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す
//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);
}
// 遅延読込み
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() {
// ドキュメント途中（更新時 or ページ内リンク）
if (window.pageYOffset) {
onLazyLoad();
}
});
})(window, document);まとめ
今回は、Googleのページ速度改善ツール『PageSpeed Insights』で「第三者コードの影響を抑えてください google/doubleclick ads」の項目ができたときの改善方法をご紹介しました。『PageSpeed Insights』でサイトスピードが遅いと検証結果が出たときは、上記の設定を試してしてみてください。