【第三者コードの影響対策】グーグルアドセンスのコード削除と遅延化

こんにちは！エディです。

ブログをしている人にとって気になる「PageSpeed Insights」のスピードスコアが、「第三者コードの影響」で「Google/Doubleclick Ads」が原因になっている人向けの改善策を記載します。

改善策は、①「GoogleAdSenseの自動広告タグのコードを消去」し、②「GoogleAdSenseの遅延読込みをさせるコードを新しく入れること」のたった２つのシンプルなことを実行するだけです。

ただし、私は迷いに迷い…、なかなか実行できませんでした。

なぜなら、①の在り処が不明だったからです。これで正しいのだろうか？と…。

同じように「第三者コードの影響を抑えてください」に悪戦苦闘している方の参考になればと思っています。

1 改善する前の私の状態
2 対処方法
3 最後に

1 改善する前の私の状態

WordPressを使用
テーマはCocoonを使用
「PageSpeed Insights」のスコアがモバイルが「40~50点」、パソコンが「70~80点」で推移
グーグルアドセンスの広告は自動広告は「オフ」で、手動で広告を入れている
広告は、バナー広告とインフィード広告を利用
「Google/Doubleclick Ads」が常に警告表示で赤字になり、「メインスレッドのブロック時間」が1000~1200msだった
「AdSense Integration WP QUADS」というプラグインを利用
Googleの「Site Kit」というプラグインも利用し、Googleアドセンスと連動させている

2 対処方法

2-1 Googleアドセンスの自動広告タグのコードを消去する

・消去方法

まず、自動広告のコードは以下です。

コード

ちなみに、この自動広告コードは、グーグルアドセンスの審査時に貼り付けるコードと同じであり、そのまま貼り付けておけば、自動広告の表示で使用できます。

私のように、最初から自動広告をオフにし、手動で広告を入れるのであれば必要のないコードです。

ここが挿入されている場所は、WordPressの使用有無やテーマによりますが、基本以下になります。

場所

WordPress外観⇨テーマエディター⇨親テーマを選択⇨「header.php」のどこか
Cocoon設定⇨アクセス解析・認証⇨その他のアクセス解析・認証コードの設定⇨ヘッド用コード

上記の場所のどこかにある自動広告コードを消去すれば、それで終わりです。

※消去する際は、必ず「<script　〜…〜　</script>」までを消去し、それ以外は消さないことです。

※1の「header.php」は、親テーマを選択しないと出ないケースが多いです。2の場所は、「広告」タブの「広告コード」エリアではないのでご注意ください。

※自動広告コードは以下のパターンもあります（数字はダミー）。

<script async　src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>

なお、この自動広告コードの削除はアンカー広告の表示に影響を与える場合があるのでご注意ください。

アドセンスのアンカー広告が表示されない意外な原因と解決方法

アンカー広告の自動広告設定で「Adsenseフロントエンドでページ単位の広告フォーマットが無効になっています/ページの上部または下部に固定要素がすでに存在しています」と表示されないのは、手動広告運用による自動広告コードの削除が原因かもです。

＜参考＞私が悩んだ理由

私の場合は、コードを何度も探すものの上記のどこにもなく、大変困りました。自動広告コードを自分で消した覚えもないためです。

そして、恐らくこうだろうと思いました。

仮説

アドセンス申請時の自動広告コードは、Googleアドセンスの管理画面でオフにしたことで「header.php」等から削除された
上記１である一方、Googleアドセンス管理HPで手動で広告ユニットを「バナー広告」「インフィード広告」を作り、ワードプレス、Cocoonにコードを埋め込んだが、その全てに自動広告コードが含まれていた

※１のオフは、「Googleアドセンスの管理HP⇨広告⇨自動広告のオンオフ」で簡単にできます。私は、そこをオフにしたので、Cocoonのテーマから自動で消えたのかと想定しました。Googleの「Site Kit」というプラグインも利用しているため、その影響もあるかと。

上記２つの仮説から、該当のコードが埋め込まれている「Cocoonのウィジェット」、「プラグインのAdSense Integration WP QUADS」の全てのタグから、コードを消去しました。

※全てのタグから消去することが大切です。一つでも残っているとスピード改善になりません。

※コードを消去する時は、失敗したときに元に戻せるように事前にコード類を全てメモ等にコピーししておく方が万全です。（Googleアドセンスの管理HPに元のコードはありますが）

2-2 GoogleAdSenseの遅延読込みをさせるコードを新しく入れる

「GoogleAdSenseの遅延読込みをさせる」とは、要するに、ページにアクセスするのと同時に広告を表示させるのではなく、ページが読込まれた後に、スクロールされたら広告が表示させるようにするということです。

ですので、遅延読込みを設定した後は、広告はページにアクセスしただけでは表示されず（空白になる）、少しでもページをスクロールされたら表示されるようになります。

では、遅延読込みをさせるコードとその挿入場所の説明です。

【挿入するコード】

<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>

【挿入場所】

Cocoonはとても簡単で、「Cocoon設定⇨アクセス解析・認証⇨その他のアクセス解析・認証コードの設定⇨フッター（</body>直前）用コード」のエリアに貼り付けるだけです。

Cocoonでない場合でも、htmlの</body>直前（上）に挿入すればOKです。

広告を遅延読み込みさせることで、Googleアドセンスの広告収入に影響があるのかという観点は、結論気にしなくて良さそうです。

私自身のブログもクリック率に大きな変化もなく、その他遅延化を実施している方々も特に影響なしとの答えがほとんどでした。

2-3 対処をした後のスコアは大きく改善

スコアは大きく改善しました。モバイルは30点近く、パソコンは20点近くですね。

この結果が出て正直ホッとしました…。

なお、キャッシュ等はクリアにしておくと良いです。

※「Cocoon設定⇨キャッシュ削除⇨全てのキャッシュの削除」

3 最後に

悪戦苦闘した「第三者コードの影響」の「Google/Doubleclick Ads」対策でしたが、無事対処が終わりました。

結構単純な対処策ですが、少し通常とズレた事象が発生していたりすると、解決までに結構時間がかかったりします。

私の場合、「PageSpeed Insightsのスピード」のスコアは、この第三者コードの対策と次世代フォーマットでの画像の配信（WebP）で、モバイルスコアは80点以前後、パソコンスコアはほぼ100点に安定しました。

この記事が、少しでも皆さんの参考になればと思います。

以上です。ご覧いただきありがとうございました！