AdSenseで低くなっているPageSpeedInsightのスコアを改善 2022
久々に緑のスコアを見られた～ しかも100！！
WordPressのバージョンアップのせいなのか、PageSpeedInsightの値が良くて70%ぐらいの事が多くて、あれこれいじっても中々80%とか90%にならなかったんです。
過去にパフォーマンス対策で色々な設定をしていたので、今回は設定をシンプルにして、スコアが悪くてもAdSense収益が減らなければ、そのまま様子を見ようと思っていました。
サイトの状態
変更前のサイトの状態は以下です。
・テーマ：Luxeritas
・プラグイン：20弱のプラグインを使用していました。結構色々入れてました。
・表示遅延系のコード：２つ (AdSense、Yutoube)
サーバー：ロリポップ ライトプラン PHP 8.1 モジュール版 （高速ではないです)
以下のプラグインを使っていました。
平均的にはいくつぐらいのプラグインを使っているのでしょうか？ 多いかな？と思ったので、plugin load filter を入れて、不要なプラグインが読み込まれない様に対策していました。
a3 Lazy Load
Advanced Editor Tools
Akismet Anti-Spam
Contact Form 7
Enlighter – Customizable Syntax Highlighter
EWWW Image Optimizer
Jet Pack
Google XML Sitemaps
Gutenberg
Paste Raw HTML
plugin load filter
Rinker
Search Regex
Site Kit By Google
SiteGuard WP Plugin
UpdraftPlus – バックアップ/復元
WordPress インポートツール
WP Multibyte Patch
：
表示遅延系は、以下のカスタマイズコードを仕込んでいました。
・AｄSense：ページがスクロールするか、操作が無い場合は4秒経過するまで広告表示しない
・Youtube動画：再生ボタンを押すまでは、サムネイル画像しか表示しない
【結論(推測)】何が効果的だったか？ 多分。。
① AdSenseのコードをタグマネジャーに設定して、タグマネジャーのヘッダーに挿入するコードをフッターに挿入した
② Flying Scripts プラグインで gtag、gtm キーワードを指定してタグマネジャー関連のJava scriptの読み込みを5秒遅延させた = AdSenseの表示も遅延できてます
プロではないので理解間違いや説明が誤っている所があるかもしれません。そのあたりはお許しください。
どうもこの2つが両方設定してらうのが良かった様に思います。
このページを参照している方は、それなりにブログの運営経験のある方かなぁと思いますので、上記の説明で分かりそうですね。ですので具体的な設定は最後に記載します。
さて、「遅かったときのサイトの状態」から、【結論(推測)】に至るまでにどのような設定変更を行ったか、記録しておくことにしました。
設定変更① Plugin 削除
・Site Kit By Google
・Jet Pack
Site Kitは googleの色々なツールとの連携設定が簡単なので一時使っていましたが、Analitycs GA4の対応のコードをタグマネジャーに設定したあたりで、二重に発火していたのかな。。。。よくわからなくなってしまったので、Site Kitは削除して、タグマネジャーに集約することにしました。
Jet Packは統合的なプラグインです。色々なプラグインを1つに集約できて便利そうで入れたのですが、何だたか、他の設定とバッティングしているという警告が出ていたり、画像表示の遅延は、Luxeritas、Jet pack、Lazy Loadのどれで設定するれば最適なの？と、ややこしくなってしまったので使うのをやめました。今となっては、一体なんの機能を使うために残していたのか。。。という始末です。
ちなみに、画像表示の遅延は動画の遅延にも効果があるa3 Lazy loadが、Pagespeed Insightのスコアが最も高くなりました。何度か試した気がします。
設定変更② Luxeritas 子テーマバージョンアップ＆高速化設定の見直し
・子テーマのバージョンアップ （2021年7月からだいぶVUPしていました。)
・キャッシュ使わない
スコア改善のために2週間ぐらい前に、今まで無視していたキャッシュの設定も試していました。確かにキャッシュは効いていたのですが、設定を変えたときに、キャッシュ効いていて効果が分かりづらいので、れきれば設定せずに済ませたいと思っていました。まずは、シンプルにしようという方針でしたので、キャッシュを使わない設定に戻しました。
設定変更③ AdSense 広告表示遅延コードの削除
Adsense 広告表示遅延コードを削除しました。
ページがスクロールするか、操作が無い場合は4秒経過まで広告表示をしないコードを、Luxeritasのアクセス解析(body)に仕込んでいました。
カスタマイズコードを入れた当初は、スコアがすごく良くなったのですが、最近はあまり効果が無くなっていました。最近はCLSが一向に短縮されなずに困っていました。なので最初3秒待ちにしていたのを4秒待ちに変えてみたりしていたのですが、一向にスコアが上がらず。。でした。
設定変更④ タグマネージャーに連携コード(スニペット)を集約
・Analytics(UA)
・AnalyticsGA4
・AdSense
・Micorosoft Clarity
計測、解析用のコード(スニペット)は、全部Tagマネジャー集約しました。あっちこっちで設定していると訳が分からなくなってしまったので。とにかく今回はシンプルに！！という方針にしたので。
今回、思い切ったのはAdSenseのコードです。広告表示遅延コードを諦めました。表示が遅くなっても現状の広告収益レベルが継続されるならヨシ！！としてみました。 (最終的には、遅延表示になりました。)
設定変更⑤ タグマネジャーのコードの配置をヘッダー➡フッターに変更
タグマネージャーの２つあるコードのうち、ヘッダーには配置するコードをフッターに配置しました。
※script の後に defer を追記しています。
タグマネージャーの発火タイミングが遅くなるので、Anallyticsｍに影響がないの？という心配がありますが、数時間観察した感じだと影響はない様に思います。
設定変更⑥ タグマネージャーのトリガー変更
全ページ ➡ ウィンドウ読み込みトリガ に変更です
コードのフッター配置とトリガーの変更は、効果あった様に思います。ただ、効果が顕著になったのは、後述の設定変更⑦の後です。
広告表示遅延コードは削除しましたが、タグマネジャーの遅延によって広告表示も、結果遅延されたのでは？と思います。
設定変更①～⑥の結果
ヘッダー配置から⑤のフッター配置の変更と、⑥のタグマネージャーのウィンドウ読み込みトリガへの変更は、
共にPageSpeedInsightでは遅いと指摘があったタグマネージャー関係のスクリプトの実行を遅らせる類の変更です。
ところで。。。①～⑥までの結果は、どうも思わしくない。。何度か試してみますが一向に緑いろのグラフにはならないんです。。
あかんです。。。画像は例ですがこんなもんでした。。もっと悪かったかな。
設定変更⑦ New プラグイン fling Scripts の活用
最初の方にも記載しましたが、タグマネージャーの設定変更と、このプララグインの導入で、PageSpeedInsightのスコアが、一気に向上した気がします。両方とも設定することで効果が高くなったみたいです。
一応多少は検証しました。キモだと思っている2つを前の状態に戻すと、いずれもスコアがかなり下がります。50～60台あたりまで下がっていました。
・flying scriptを無効化する
・タグマネジャーのコードをフッターからbodyに移動する。
教えてあげてもいいけど