最近はブログの表示速度が重視されています。Googleは、特にモバイルファースト重視なので、モバイルスコアが低いと順位下落の可能性があります。2020年5月初めにgoogleが「CoreWebVitals」を発表して以降、特に2021年以降サイトの評価が厳しくなったことを実感します。
PageSpeed Insightsをチェックすると「第三者コードの影響を抑えてください」と表示されます。第三者コードとは外部サイトと連携する時に接続されるリンク先(googleアドセンス,googleアナリティクス,Yahoo,facebook等)のことをいいます。この第三者コードの接続が行われるとサイト読み込みに時間がかかり、サイトスピードが遅くなる原因になるのです。WordPressでブログを運営している場合、アドセンスやアナリティクス等を設置しているとどうしても、ページを開く時に外部URLの影響を受けてしまう為、その分表示速度に影響が出てしまいます。ここではPageSpeed Insightsのスピードスコアが、「第三者コードの影響」で「Google/Doubleclick Ads」が原因になっている場合の改善策を解説します。
現象と原因
現象
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を直接修正するのではなく、子テーマで行います。
親テーマのfooter-javascript.phpをコピー
子テーマ内に「tmp」というフォルダを作成
footer-javascript.phpをコピー
footer-javascript.phpの修正
親テーマから子テーマへコピーしましたので、子テーマのfooter-javascript.phpを修正します。22行目の「echo ADSENSE_SCRIPT_CODE;」をコメントアウト(行頭に//を追加)します。
結果
「メインスレッドが2,080ミリ秒間ブロックされました」となっていたのが、390ミリと改善されました。
そして、パフォーマンスも大きく改善されました。