アドセンス広告を遅延読み込みしてPageSpeed Insightsのスコアを改善する

ABOUTこの記事をかいた人

兵庫県加古川市在住の3児の父親です。
・ブログのサポート(月額会員制スポット
・某コミュニティの技術サポート
オルゴナイトのネットショップ店長

アニメやマンガ好きで、子供の影響か?ギターの練習を再開しましたw

口座やカードの自動取り込みが優秀すぎて、隙間時間に仕訳ができておすすめです^^

 

フリーランスの支払いトラブルを未然に防止


どうも、がみたか(@gamitaka02)です!

Webサイトの表示速度をスコアで表すGoogleから提供されている「PageSpeed Insights(以下PSI)」

スマホサイトの測定が3G回線だったり、Javascriptがあるとスコアがかなり悪くなったりと、何かしらの収益化目的でWebサイトを運営するオーナーにとっては少しやっかいな存在です(^_^;)

偉大な冒険家
自分とこ(Google)のサービスでもある「アドセンス」「タグマネージャー(もしくはアナリティクス)」「reCAPTCHA」もJavascriptを使っているため、それらを導入しているだけでもガッツリ減点されるから、なおさらタチが悪い!!

もちろん、「アドセンス」「タグマネージャー(もしくはアナリティクス)」「reCAPTCHA」は、Webサイトの収益化やセキュリティを行う上で必要なものなので、ある程度の妥協は必要です。

がみたか
基本的に「体感で表示が遅くなければスコアはあまり気にしなくてもよい」というのが自論です

この辺りがPSIの足を引っ張っているのは明白なので今まではスルーしていたのですが、「アドセンス広告は遅延読み込みできる」ということを知ったので、手持ちのサイトで試してみたところ、上手くいったのでここでその方法を紹介しようと思います^^

「遅延読み込み」とは?

「遅延読み込み」とは、ページを開いた時に全てを一度に読み込まず、スクロールに応じて必要な部分を読み込んでいくことです。

がみたか
ページをスクロールしていった時に、空白だった部分に画像がいきなりパッと現れるアレですw

それをアドセンス広告でも適用しようというのがこのページの趣旨になります。

 

ちなみにこちらのサイトを参考に設定させていただきました。感謝感激です!m(_ _)m

Google Adsenseのタグを遅延読み込みする方法

偉大な冒険家
全てのサイトで効果があるかわからないが、手持ちのサイトだといい感じに改善できたので少しは期待しても良いかも?

アドセンス広告を遅延読み込みする手順

PCIのスコア(設定前)

まずはじめに、この設定を行う前のPSIのスコアを見てみましょう。

計測したサイトの仕様はだいたいこのような感じです。

・Xサーバー(新サーバー移行済み)
・XアクセラレータVer2
・WordPress5.7.2
・reCAPTCHA V3設置
・Googleアドセンス設置
・Googleアナリティクス設置
・WordPressテーマ「Seal1.5
・プラグイン23個(整理が必要かも?)

・スマホ=29

・PC=78

最近のサイトはおそらく「PCはまあまあ、スマホがかなり悪い」となっているはずなので、せめてスマホの方はオレンジにはしておきたいところです(^_^;)

それでは、アドセンス広告の遅延読み込みの設定を行なっていきます。

その1:アドセンス広告にあるコードを削除する

まずは、設置しているアドセンス広告に共通して書かれているコード(Javascriptを読み込むコード)を削除します。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

おそらく、どの広告にも画像のあたりに書かれているはずです。

アドセンス広告を設置している全ての箇所でこの作業を行うのですが、

・ウィジェット
・プラグイン(Advanced Ads、WP Quadsなど)
・<head>~</head>の間(アドセンス自動広告など)
・テーマ特有の設置場所

このあたりに設置されていることが多いと思いますので、すべてのアドセンス広告から上記のコードを削除してください。

その2:</body>の手前に遅延読み込みをするコードを記入する

次に、テーマファイルに書かれている </body> の手前(一つ上の行)にこちらのコードを記入します。

<script>
    //<![CDATA[
    //lazy load ads
    var lazyloadads = false;
    window.addEventListener("scroll", function() {
        if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
            (function() {
                var ad = document.createElement('script');
                ad.type = 'text/javascript';
                ad.async = true;
                ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
                var sc = document.getElementsByTagName('script')[0];
                sc.parentNode.insertBefore(ad, sc);
            })();
            lazyloadads = true;
        }
    }, true)
    //]]>
    </script>
偉大な冒険家
「これもJavascriptじゃねえか!」ってツッコミは無しなw

この</body>にコードを記入するばあい、こちらのいずれかの方法で記入できます。

・「外観」→「テーマエディター」→「footer.php」に直接記入する(非推奨)
・テーマオプションに記入場所がある場合がある
・プラグイン「Insert Headers and Footers」の「Footer」部分。

がみたか
ただし「footer.php」に直接記入するのは、テーマの更新でリセットされる場合があるので、あまりおすすめしません(^_^;)

アドセンス広告を遅延読み込みするのはこれだけです。

あとは、試しにPSIで計測してみましょう!

アドセンス広告遅延読み込みの設定後、PSIのスコアはかなり改善しました!

サイトによっては同じように改善される保証はありませんが、手持ちのサイトでアドセンス広告を遅延読み込みすることで、PSIのスコアはこれだけ改善しました^^

・設定前 スマホ=29

・設定後 スマホ=74

・設定前 PC=78

・設定後 PC=97

がみたか
おそらく、これだけ改善したら体感速度も良くなっているはずです^^

アドセンス広告の遅延読み込み:まとめ

この設定をすることで、PSIにおいてJavascriptが足を引っ張っていることがよくわかりました(^_^;)

アナリティクスやタグマネージャーはマーケティングに必要なため、流石に外すことはできませんが、アドセンスに関してはこの方法で少しは対策できるので、アドセンスを設置されているサイトでPSIのスコアが悪すぎて困っている人は一度試してみることをおすすめします^^

もし、「自分でできない!」「ミスしたことを考えると怖い」という方は、スポットサポートにてお手伝いさせていただきますので、お気軽にご相談ください^^

※広告の設置数にもよりますが、作業時間として1時間あたりでお考えいただけたらと思います。

最後に有益なこちらの記事を書いてくれたサイト様、ありがとうございましたm(_ _)m

Google Adsenseのタグを遅延読み込みする方法

それでは、今回はこの辺で!

また次の記事でお会いしましょう^^

ブログ運営者のためのサポート保険!

ブログのトラブルや困ったことに時間を取られて

自分のやるべきことが出来ていない人のためサービスです!


『ちょっと困った』時のスポットサポート!

WordpressやWebに関する「ちょっと困った」を、

30分 4,400円〜で解決するサービスです!


Wordpressのお引越し!

安心・安全・快適で、ブログサポーターがおすすめする、

Xサーバーへのお引越しを代行します!


記事が気に入ったらシェアをお願いします^^