検索結果の参考になると言われているページの表示速度。当然サイトを作る側からしたら気になるところですし、何より根本的に表示の遅いページは見てくれませんよね?
そこでいろいろと高速化対策をするにあたって「Google PageSpeed Insights」や「GTmetrix」を使って問題点や改善箇所を探るのが一般的だと思います。
どれどれ??とこのサイトのトップページを計測してみました。多分余分なものはすべて取り払うべく自作テーマにしていて、いろいろと効率化はしている(ハズ)なので大丈夫でしょ!の結果が・・・
モバイル/35点 PC/56点
という惨憺たる結果でした(泣)。示される改善策に対していろいろと対策したもののあまり数字は変わらず・・「もうこれ以上は望めないのかも・・」とあきらめかけていました。そこで、人気のあるテーマやデフォルトテーマにして同じように設定して試そう!でやってみたところ同じ結果に!!これが私にヒントを与えてくれました。
そうなんです。示される改善策の中で「できれば・・・」と書かれている項目の多くはGoogle Adsenseの広告取得に関するものばかり。どうやらこれの改善がスコアアップの鍵なのでは?というところに至りました。
そこで試しに本来の実力を!ということでアドセンスのスクリプトを外してみたら・・・
モバイル/82点 PC/73点
という結果に。なぁ~~んだ、そこそこの点数出てるじゃん!!計測したのはトップページなので、そこにだけ表示させている画像スライダー他を外せば100点近い数字が出ましたから、やっていることは間違っていないと確信できました。
下手人が発覚したので、「Adsense 遅延」といったキーワードで調べていると・・・Google Adsenseの広告を遅延読み込みする方法がいくつも紹介されていました。いやぁすごい方法考える人がいるんですね。本当にびっくりしました。
方法が掲載されていたのは
AdSenseの広告を遅延表示させてスコア改善とページ表示スピードを高速化
というページ。このページで紹介されているコードの一部を検索にかけるとすごい数の模写?ページが存在するのにもびっくりしましたが、この方も別のサイト(多分そこが大本?)のコードに少し手を加えて紹介されています。
それなら大本のページを紹介すれば??と言われそうですが、大本のサイトは残念ながら紹介しているコードを設置していない模様(ソースコード確認した限りではの話)で、きちんと紹介したものを活用している方の方がいいかなと思い、こちらの方のページを参考とさせていただきました。
自身でコードを書けるわけではありませんし、コピペしたコードの紹介記事はちょっと・・・と考えますので、コードや設置方法自体は上の参考ページをご覧いただければと思います。
Adsenseの遅延読み込みコードで実装される機能
そもそもアドセンスのスクリプトは「読み込めるところで読み込んでくれればいいですよ!」という遅延処理をさせる「async」属性が付加されていて、一応ページ表示に影響が出ないようにはなっているようなのですが、広告の数や自動広告の有無などによってそれでも時間がかかってしまっているようです。
「async」でいくら遅延させても「どこにどんな広告を入れようか(自動広告の場合)」「ここに広告の指示があるからできるだけ効果的なものを(手動広告の場合)」を広告数だけ考えるわけですから、広告数に比例してやはり速度は低下するのでしょうね。
それをやめて
AdSenseの広告を遅延表示させてスコア改善とページ表示スピードを高速化
で紹介されているコードに書き換えると、ページ表示後に
- scroll(スクロールしたとき)
- mousemove(マウスを動かしたとき)
- mousedown(マウスホイールでスクロールダウンしたとき)
- touchstart(タッチスクリーンで画面にタッチしたとき)
- keydown(キーボードで↓キーが押されたとき)
という操作を行った時にアドセンスのスクリプトが読み込まれるようになり、ページ表示段階では読み込まなくなります。これで大幅にスコアが改善され、改善する項目からアドセンスに関するものがなくなります。
この方法で同じくこのサイトのトップページを計測したら
モバイル/81点 PC/73点
と広告設置しない時とほぼ同じスコアが得られました。長年思い悩んでいた問題がすっきり解決して気分爽快です。
懸念事項と注意点
Google Adsenseで公開されていないコードであることに注意が必要かも知れません
本当に劇的にスコアアップ効果が出て、体感としても超高速にページ表示が実現できる方法ですが、結果的に同じコードでスクリプトを実行するものの、あくまでもGoogle Adsenseの広告コードとして推奨されているものではないというところがありますから、この方法を実装するか否かは自己責任ということになります。
私の考え方としては、どこで読み込まれるのかというタイミングを変える話であって、コードそのものを改変してしまうものではない(結果的に同じコードが出力されるのですから)ので、ページ表示を速くして訪問してくれる方をお待たせしないというのを最優先に考えれば妥当な措置と判断してこのコードを使わせていただいています。
何かがない限りはこのサイトでは、遅延読み込みをさせていますので、ソース表示してフッター付近を見れば、コードが入っているのは確認いただけると思います(逆にこのコードの使用をやめたときには「はは~~ん、何かあったな」と判断いただければ結構です)。
広告コードには「新」「旧」があり、どちらかに合わせる必要があるかも
これも参考ページで触れられている事柄ですが、広告コード(特に自動広告)には「新」「旧」のコードがあり、旧コードである
<script>
(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: "ca-pub-xxxxxxx",
enable_page_level_ads: true
});
</script>
と、新コードである
<script data-ad-client="ca-pub-xxxxxxxx"></script>
の2パターンが存在し、私の場合旧コードを使っていたため、Googleデベロッパーツール上で
Refused to frame 'https://pagead2.googlesyndication.com/' because it violates the following Content Security Policy directive: adsense...
というエラーが頻発しました。上下のコードの違いは
google_ad_client: “ca-pub-xxxxxxx”
なのか
data-ad-client=”ca-pub-xxxxxxxx”
なのかの違いで、自動広告のコードを新コードにしたところ、エラーは出なくなりました。長くコードを貼りっぱなしの方は自動広告だけでなく、他の広告も確認した方がいいかと思います(私の場合は自動広告のみでした)。
また、このエラーが出ていると、アドセンスの管理画面上のクリック数とレポート上のクリック数が違うなど「本当に大丈夫?」と不安になりましたので、エラーは出ないようにしておいた方がいいかと思います(このクリック数等の差異についてはこれが原因と特定したわけではありません)。
※エラー内容でググるとコンテンツセキュリティヘッダーを追加して・・という記事が多数出てきますが、本エラーに対してのみ設定するだけでは他の動作不具合を招く恐れがありますから、よーく研究してから取り組むようにしてください。
ちょっと懸念事項もあるコードの紹介記事でしたが、スコア、表示速度重視の方はぜひ試してみてくださいね。
最後に応用ですが、日本ブログ村のスクリプトも結構読み込みに時間がかかってスコアや表示速度に影響がでることがあります。今回のコードを使って、コード中の「ad.src」のURL部分をブログ村のスクリプトURLに書き換えたものを追加すれば、ブログ村のスクリプトも遅延読み込みにできます(このサイトでも実装してます)から、そちらも併せて試してみてください。
モバイル全面広告は有効にしない方がいいかも
この記事の公開日である2020年7月から現在(2020年10月)まで、このサイトで実際に遅延表示に切り替えて運営してきました。
懸念事項であった遅延読み込みによるAdsense側からの指摘や警告などはなく、恐らく問題なく使える方法だとは思いますが、1点だけ気になるところがあります。
それは、「モバイル全面広告を有効にすると具合が悪いかもしれない」ということです。
前述したように、今回のAdsenseの遅延読み込みは、ページ読み込み時ではなく、読み込んだ後に何かの操作をすると広告表示がされるようになります。これは、モバイル全面広告についても同様です。
従ってモバイル環境で訪問者がアクセスした場合
- ページがまず表示される
- スワイプして記事本文を読もうとする
- モバイル全面広告が読み込まれて表示される(すべてではない)
- もっと下にとスワイプしたものがタップとみなされて広告先へ遷移してしまう
という風に、誤タップが発生することがありそうです。
証拠にAdsenseのレポート上では、当日結構なクリック数の増加があったものが、翌日には調整されて大幅に収益額が下がるという事態が発生するようになりました。あくまでも私の場合という話にはなってしまいますが、今回紹介する遅延読み込みを行った際には、モバイル全面広告に限らず、その他の広告の掲載位置などもいろいろと調整した方がいいかも知れません。

当サイトへ採用してから約8か月経過しました 2021年3月25日追記
この記事の公開日は2020年7月20日、それから当サイトや私の管理するサイト、また、配布しているこのサイトのテーマHABONEでもテーマカスタマイザーから適用するかを選択できるようにしています。
ここまで読んでいただいた通り、効果としては大幅なスコア改善ができています。「ほんとに??」と思われる方はこのページのスコアを確認いただけばと思います。
懸念していたGoogleからの警告等もなく、収益自体にも影響はなさそうです(ページの構造によってはページ表示から広告表示までにタイムラグがあるので影響があることがあるかも知れません)。

