「第三者コードの影響を抑えて下さい」の対処方法(cocoon)

最近はブログの表示速度が重視されています。Googleは、特にモバイルファースト重視なので、モバイルスコアが低いと順位下落の可能性があります。2020年5月初めにgoogleが「CoreWebVitals」を発表して以降、特に2021年以降サイトの評価が厳しくなったことを実感します。
PageSpeed Insightsをチェックすると「第三者コードの影響を抑えてください」と表示されます。第三者コードとは外部サイトと連携する時に接続されるリンク先(googleアドセンス,googleアナリティクス,Yahoo,facebook等)のことをいいます。この第三者コードの接続が行われるとサイト読み込みに時間がかかり、サイトスピードが遅くなる原因になるのです。WordPressでブログを運営している場合、アドセンスやアナリティクス等を設置しているとどうしても、ページを開く時に外部URLの影響を受けてしまう為、その分表示速度に影響が出てしまいます。ここではPageSpeed Insightsのスピードスコアが、「第三者コードの影響」で「Google/Doubleclick Ads」が原因になっている場合の改善策を解説します。

現象と原因
1. 現象
2. 原因
対処と結果
1. 対処
2. 結果

現象と原因

現象

pagespeed insightで、携帯電話のパフォーマンスが48という非常に悪い結果となりました。

原因

その大きな原因の1つとして「第三者コードの影響を抑えてください」と指摘されています。「メインスレッドが2,080ミリ秒間ブロックされました」となっていて、その内訳を見ると、「Google AdSense広告」である「Google/Doubleclick Ads」が大半を占めています。つまり”第三者”とは、ここではGoogleAdSense広告なんです。

対処と結果

対処

GoogleAdSense広告を止めるわけにはいかないので、遅延読み込みをさせて対処します。ページにアクセスすると同時に広告を表示させるのではなく、ページが読み込まれた後にスクロールされたら広告が表示されるようにします。

Googleアドセンスの読み込みを遅延化する方法としては以下の2つだけです。

「GoogleAdSenseの自動広告タグのコードを消去」(コードの一番上を消す。)
HTMLファイルの直前に遅延化用のコードを追記する。

但し、Cocoonでは、広告タブにGoogle AdSenseのコードが設定されていると、GoogleAdSense用のJavaScriptが/tmp/footer-javascript.phpで出力されていますので、これを編集することが必要です。

それでは、ここから使用しているWordPressテーマのcocoonで解説します。

GoogleAdSenseの自動広告タグを削除

まず、GooglAdSenseの自動広告タグのコードを消去します。自動広告タグは、次のコードです。

設定されている「広告コード」から削除します。Cocoonでは次の通りです。

HTMLファイルのの直前に遅延化用のコードを追記する

cocoon設定で、「アクセス解析・認証 – フッター用コード」でJavaScriptの遅延読み込みコードを設定します。

[ 遅延化コード ]

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

footer-javascript.phpの修正

Cocoonでは、広告タブにGoogle AdSenseのコードが設定されていると、GoogleAdSense用のJavaScriptが/tmp/footer-javascript.phpで出力されています。そこで/tmp/footer-javascript.php22行目付近の「ADSENSE_SCRIPT_CODE」をコメントアウトさせなければなりません。

footer-javascript.phpの修正は、アップデート対応として親テーマ内のfooter-javascript.phpを直接修正するのではなく、子テーマで行います。