ブログサイト表示が遅いとＳＥＯ評価もマイナス、せっかくアクセスしてくれた人がはなれちゃう原因にもなるため、今回の記事を参考に是非ためしてみてください。
私は、アドセンス遅延読み込み・画像を適正サイズに変更・不要なプラグインの削除でスコアを45→88にすることができました。
☑本記事の内容
- アドセンス広告を遅延読み込みする方法
- アドセンス広告のサイズをきめる
- まとめ
アドセンス広告を遅延読み込みする方法
まず、画像の<head></head>タグ内にコピーしてあるコードをすべて消してください。
広告ユニット（ディスプレイ広告やインフィールド広告）を利用している場合は下画像の赤枠コードだけ消してください。一つでもコードが残っていると遅延読み込みできないので必ずすべてのコードを消すこと。
アドセンス遅延読み込みコードを<body></body>間に張り付け
下記コードを<body></body>間に張り付けてください。
<!– 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><!– Google AdSense ID –>
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: “ca-pub-****************”,
enable_page_level_ads: true
});
</script>
google_ad_client: “ca-pub-****************”,の※印にはアドセンスコードの番号を入力します。
これで、遅延読み込みができます。
最初に紹介した速度測定サイトにて再度測定してみてくださいスコアが上がっていれば成功です。
自動広告だとサイトの表示がくずれるため、広告ユニットで好きな場所に広告をだす人も多いと思いますが、先ほど説明したコード
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>これだけ消しておけば遅延読み込みされるので、必ず上記コードだけ消すようにしてください。
自動広告のみ設定している人は、そのままでＯＫです。
アドセンス遅延読み込みの広告サイズを決める
アドセンス遅延読み込み広告サイズをコード入力
広告ユニットのディスプレイ広告の場合
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><!-- ******* --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-*********" data-ad-slot="*******" data-ad-format="auto" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script>
このようなコードを入力しますが、一番上のコードは遅延読み込みの邪魔になるので消します。
そして、data-ad-format="auto"をdata-ad-format="rectangle"に変更すれば完了です。
<!-- ******** --><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-**********" data-ad-slot="*********" data-ad-format="rectangle" data-full-width-responsive="true"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({});</script>
広告が適正サイズで表示されていればＯＫ
最初から適正サイズで表示されている場合はコードの変更は必要ありません。
アドセンス遅延読み込み まとめ
アドセンス遅延読み込みは絶対しておいた方がいい対策です。実際、遅延読み込みをしてから検索順位があがりましたしブログ表示速度も速くなりました。
デメリットは広告の位置など細かく決めるまで時間がかかることですが、設定さえしてしまえば見返りは十分あります。
コードのことなので難しい点も多々ありますが、分からないことがあればコメントかＴｗｉｔｔｅｒにて聞いてください。
ここまで読んでいただき、ありがとうございました。