The case where the score of Page Speed Insights is improved tremendously by delay loading of Google Adsense

Google Adsenseの遅延読み込みでPageSpeed Insightsのスコアがとんでもなく改善する件

公開日: 使い方など

検索結果の参考になると言われているページの表示速度。当然サイトを作る側からしたら気になるところですし、何より根本的に表示の遅いページは見てくれませんよね?

そこでいろいろと高速化対策をするにあたって「Google PageSpeed Insights」や「GTmetrix」を使って問題点や改善箇所を探るのが一般的だと思います。

どれどれ??とこのサイトのトップページを計測してみました。多分余分なものはすべて取り払うべく自作テーマにしていて、いろいろと効率化はしている(ハズ)なので大丈夫でしょ!の結果が・・・

モバイル/35点 PC/56点

という惨憺たる結果でした(泣)。示される改善策に対していろいろと対策したもののあまり数字は変わらず・・「もうこれ以上は望めないのかも・・」とあきらめかけていました。そこで、人気のあるテーマやデフォルトテーマにして同じように設定して試そう!でやってみたところ同じ結果に!!これが私にヒントを与えてくれました。

そうなんです。示される改善策の中で「できれば・・・」と書かれている項目の多くはGoogle Adsenseの広告取得に関するものばかり。どうやらこれの改善がスコアアップの鍵なのでは?というところに至りました。

そこで試しに本来の実力を!ということでアドセンスのスクリプトを外してみたら・・・

モバイル/82点 PC/73点

という結果に。なぁ~~んだ、そこそこの点数出てるじゃん!!計測したのはトップページなので、そこにだけ表示させている画像スライダー他を外せば100点近い数字が出ましたから、やっていることは間違っていないと確信できました。

下手人が発覚したので、「Adsense 遅延」といったキーワードで調べていると・・・Google Adsenseの広告を遅延読み込みする方法がいくつも紹介されていました。いやぁすごい方法考える人がいるんですね。本当にびっくりしました。

方法が掲載されていたのは

というページ。このページで紹介されているコードの一部を検索にかけるとすごい数の模写?ページが存在するのにもびっくりしましたが、この方も別のサイト(多分そこが大本?)のコードに少し手を加えて紹介されています。

それなら大本のページを紹介すれば??と言われそうですが、大本のサイトは残念ながら紹介しているコードを設置していない模様(ソースコード確認した限りではの話)で、きちんと紹介したものを活用している方の方がいいかなと思い、こちらの方のページを参考とさせていただきました。

自身でコードを書けるわけではありませんし、コピペしたコードの紹介記事はちょっと・・・と考えますので、コードや設置方法自体は上の参考ページをご覧いただければと思います。

Adsenseの遅延読み込みコードで実装される機能

そもそもアドセンスのスクリプトは「読み込めるところで読み込んでくれればいいですよ!」という遅延処理をさせる「async」属性が付加されていて、一応ページ表示に影響が出ないようにはなっているようなのですが、広告の数や自動広告の有無などによってそれでも時間がかかってしまっているようです。

「async」でいくら遅延させても「どこにどんな広告を入れようか(自動広告の場合)」「ここに広告の指示があるからできるだけ効果的なものを(手動広告の場合)」を広告数だけ考えるわけですから、広告数に比例してやはり速度は低下するのでしょうね。

それをやめて

で紹介されているコードに書き換えると、ページ表示後に

  • 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に書き換えたものを追加すれば、ブログ村のスクリプトも遅延読み込みにできます(このサイトでも実装してます)から、そちらも併せて試してみてください。

  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

【スポンサーリンク】