アドセンス広告を遅延表示し速度評価を満点に

ウェブページの読み込み時間の短縮を行ない、ページスピードインサイトで100点満点となりました。グーグルアドセンス広告を最初のユーザーイベントまで遅らせて読み込むことで、サイトの表示スピードの改善を行ないました。読み込む速度を遅くすることで高速化とは皮肉なものです。

ページスピードインサイトで100点満点にしました

ページスピード100点の画像

ページの表示スピードの改善には、全てのスタイルシートCSSのインライン化や、JSファイルの内部化などの対策をする事が効果があります。また、CSSファイルやJSファイルやテキストファイルや画像ファイルの圧縮なども効果があります。

しかし、自分のサイト側でいくらサイトの 高速化楽天 の対策をしても、サイトの表示スピードには限界があります。

それは、SNSの表示ボタンや、アドセンス広告の表示などが、自サイト以外の外部から影響される要因で、どうしても遅れて表示されるからです。

そこで、SNSの表示ボタンを廃止して、グーグルアドセンスの広告表示を遅らせることで、更にページ表示速度の改善をしました。

この画像のように、ページスピードインサイトのチェックでモバイルでもパソコン(PC)でも100点満点となりました。

これを実現するには、それ以前にサイト側でできる速度の改善は最大限に行なっているのは言うまでもありません。

SNSの表示ボタンの廃止

ページ内にSNSの表示ボタンがあるだけで、この表示を外部からしているために、表示がどうしても遅くなりページ全体の表示スピードが遅くなってしまいます。

私は今まで、はてなブックマークボタンやツイッターのボタンやフェイスブックのいいねなどのボタンを、各ページに表示させていましたが、あまり意味がないと判断して、全て廃止することにしました。

SNSボタンなど無くても、紹介してくれる人はページのアドレスをコピーしてSNSなどで紹介してくれます。ページの内容を充実させたり、ユーザーエクスペリエンスを向上することの方が重要です。

この変更だけでも、スピード評価が10点くらい上がりました。

グーグルアドセンスの広告表示を遅らせる

やはり、一番効果があったのはグーグルアドセンス広告の遅延表示です。私はサイトからの広告収入を得ているので、広告を廃止するわけにはいかないのです。

楽天の広告については、私はテキスト広告のみを使っているので、元々、全くページ速度には影響していませんでした。

この対策のJSファイルについては、Google AdSenseの遅延読込みでページ表示速度を改善のページを参考にしました。とても参考になりました。ありがとうございました。

JSファイルの内容は次の通りです。他のJSファイルと共に、これらを圧縮してヘッドタグ内の最後付近で、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 async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

結果

対策前には60から70点くらいの評価だった、モバイル表示の速度が満点になりました。元々、パソコンの表示の方は、95点以上の評価だったので、これは、文句なしで満点になりました。

この対策後にパソコンでのアドセンスの自動広告表示が表示されにくい傾向があるように見受けられたので、一部に手動でも記事内広告を挿入しています。後で他のブラウザで確認すると、自動広告も表示されているようでした。

やはり、全ページ100点満点は気持ちの良いものです。HTML文法も100点満点になっているはずです。でも、広告を読み込む速度を遅くすることで高速化とは皮肉なものですね。

また、気になる広告の表示と収益ですが、特に問題になるようなものはありませんでした。パソコンでは何もスクロールしなくても、広告は普通に表示されていました。ブラウザを変えても他のパソコンでも同様でした。

スマートフォンでは、スクロールしようとすると広告が表示される感じです。元々ファーストビューには広告が無く、そのすぐ下辺りに広告があるので、これも特に問題はなさそうです。

収益についても特に変わったとは思えません。問題ないと思います。また、この変更は、広告コードを改変している訳ではないし、広告の動作を遅らせているだけなので、アドセンスのプログラムポリシーでも問題はありません。社員の方に確認済です。