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

ABOUTこの記事をかいた人

兵庫県加古川市在住の3児の父親です。
・ブログのサポート（月額会員制＆スポット）
・某コミュニティの技術サポート
・オルゴナイトのネットショップ店長
・職業訓練校のグラフィック/Web制作コースの講師3期目

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

どうも、がみたか（@gamitaka02）です！

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

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

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

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

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

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

この記事の目次

「遅延読み込み」とは？
アドセンス広告を遅延読み込みする手順
アドセンス広告の遅延読み込み：まとめ

「遅延読み込み」とは？

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

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

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

ちなみにこちらのサイトを参考に設定させていただきました。感謝感激です！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じゃねえか！」ってツッコミは無しなｗ

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

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

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

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

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