ブログを運営していると、
いつかぶつかるのが
「表示速度」と「収益化（広告）」の両立問題。
アタシのブログでも、
Googleアドセンスやアフィリエイト広告を
設定していくうちに、
PageSpeed Insights（PSI）の
モバイルスコアが40点台まで落ち込んでいました。
「せっかく書いた記事も、
重くて開かれなかったら意味がない……」
そう思って、今回はブログの表示速度と広告設定を、
本気で見直すことにしました。
テーマはCocoon。
広告は残したいけれど、ブログも重くしたくない。
この両立を目指して、AIと一緒に原因を探しながら、
一つずつ設定を見直していきました。
最終的にはモバイルのパフォーマンススコアが
70点台まで改善しました。
さらに、GA4のデータを確認すると、
平均エンゲージメント時間にも変化が見られました。
今回は、私が実際にどこを見て、
何を変えて、どう検証したのかを記録します。
1. まずは「何が重いのか」を探す（チャッピーからGeminiへ）
最初にやったのは、
いきなり設定を変更することではありません。
まずPageSpeed Insightsを見て、
「何がブログを重くしているの？」
というところからスタートしました。
ここで最初に一緒に調べたのが、
最近活躍してくれている
相棒のチャッピー（ChatGPT）です。
チャッピーは、かなり慎重です。
「それが本当に原因なのか？」
「ほかの設定に影響しないか？」
「まず確認してから変更しましょう」
と、一つずつ確認していきます。
これはチャッピーのすごくいいところ。
アタシも、よく分からないまま設定を触って
別のところを壊すのは嫌なので、
慎重に確認してくれるのはありがたい存在です。
ただ、
今回の表示速度改善では、ちょっと事情が違いました。
ある程度
「ここが怪しい」というところまで来たら、
実際に変更して、
PageSpeed Insightsで結果を見る必要があります。
ところが、
慎重に確認しているうちに、
同じところを行ったり来たり。
アタシ自身も
「この画像、PSIに出てるよね？」
「広告同士が喧嘩してない？」
と感じていました。
今振り返ると、
アタシのプロンプト（指示）にも問題がありました。
「原因を探して」と頼むのと、
「この仮説を検証したいから、
ここを変更して測定しよう」
と伝えるのでは、AIの動き方が違います。
今回は、
アタシ自身も「検証に進むための指示」を
うまく出せていなかったんですよね😅
そこで、
慎重に調べ上げてくれたチャッピーから、
Geminiにバトンタッチしました。
Geminiとは、
「怪しいなら、まず実際に変更して測ってみよう」
という方向で、検証を進めていきました。
ここからは
「仮説を立てる ➔ 実際に変更する ➔ PSIで測定する」
というスピード感ある検証プロセスに切り替えました。
2. 重い原因（巨大なブレーキ）を一つずつ外す検証
① ブログカードのキャッシュとアピールエリアの画像見直し
Geminiと一緒にPSIのデータを確認していくと、
最初に大きなボトルネックとして見えてきたのが、
次の2点でした。
- ブログカードの古いキャッシュ情報
- トップページのアピールエリアに
使っていた背景画像
まず、過去のブログカードのキャッシュをクリア。
そして、
アタシ自身も
「これ、重くない？」
と気になっていて
PSIでも指摘されていたアピールエリアの背景画像を、
シンプルなデザインに変更しました。
すると、
スコアが一気に70点台後半（一時78点）まで上昇！
「おお、やっぱりここも効いてたんだ」と実感し、
自分の違和感を実際に検証していく手応えを得ました。
② 広告管理プラグイン「Advanced Ads」からの脱却
次に気になったのが広告です。
広告同士が喧嘩して余計な処理が発生していないか疑い、それまで使っていた広告管理
プラグイン「Advanced Ads」
をアンインストールし、
Cocoonの標準広告機能へ一本化することにしました。
プラグインを外しても
広告はしっかり表示されました。
広告を消すのではなく、
広告を管理する仕組みをCocoonの標準機能へ
一本化しました。
「広告を消す」のではなく
「広告を管理する仕組みをシンプルにする」。
やりたかったのはまさにこれでした。
③ Cocoonの広告コード設定を最適化
Cocoon側の広告設定では、
AdSenseコードの貼り方も見直しました。
Cocoon側の広告設定では、
AdSenseコードの記述方法も見直しました。
広告コード全体ではなく、<ins>タグを中心とした記述に整理しています。
今回は広告設定を整理した上で、
PageSpeed Insightsの数値を確認しながら、
表示速度への影響を検証しました。
④ 画像サイズの調整とPSI指摘への対処
画像についても
「とにかく全部軽くする」のではなく、
PSIで具体的に指摘されているブログカードなどの
画像サイズや表示比率（アスペクト比）を
一つずつ直していきました。
こちらのツールを利用しました👇
使用ツール : squoosh.app
画像の圧縮・変換Webアプリ
地味ですが、
どこを変更したことで数字が変わったのかを
追うためには一番大事な作業でした。
3.広告表示・PR表記とステマ規制への対応
表示速度だけでなく、
サイトの信頼性に関わるルールもしっかり整理しました。
投稿ページへ「PR表記」を自動挿入
CocoonのPR表記設定を使い、
投稿ページに「PR」の表記が
自動で表示されるように設定。
景品表示法のステマ規制も意識して、
投稿ページには「PR」の表記が
自動で表示されるよう設定しました。
不要なページ（固定ページ）の広告・PR除外
・プライバシーポリシー
・お問い合わせ
・プロフィールなど
固定ページについては、
個別編集画面で
「広告を除外する」
「PR表記を除外する」
にチェックを入れました。
載せる場所と載せない場所を明確に分けることも、
重要な広告最適化の一部です。
4. 改善結果：モバイル40点台から70点台へ＆アクセス解析の変化
設定を見直し、
サーバーキャッシュを削除して再測定した
最終結果がこちらです。
PageSpeed Insightsの最終数値（モバイル）
- パフォーマンススコア：74点
- TBT（操作の遅延時間）：190ms（緑色・合格）
- CLS（画面のガタつき）：0（緑色・完全合格）
- LCP（最大コンテンツの描画）：5.4秒
最初は40点台だったスコアが、
広告を残した状態でも70点台へ回復！
特に画面のガタつきを示す
「CLSが0」になったのは嬉しい結果でした。
また、TBTも190msとなり、
操作時のブロックについても改善が見られました。
一方で、LCPは5.4秒とまだ改善の余地があります。
しかし、重要なTBTとCLSが合格判定になり
「何が効いたか分からなくなるのを防ぐため、
まずはここで一旦止める」
という判断をしました。
GA4（アクセス解析）に表れたリアルな変化
数字が改善したのはPSIのスコアだけでは
ありませんでした。
速度改善後のGA4データを生データで確認すると、
驚くべき変化がありました。
- 平均エンゲージメント時間：14秒 ➔ 1分06秒（+347.9%Up！）
- 直接訪問（Direct）の滞在時間：16秒 ➔ 1分33秒（+454.8%Up！）
表示速度を見直した時期に、
GA4の平均エンゲージメント時間にも大きな変化が見られました。
ただし、
この変化が表示速度改善だけによるものとは
断定できません。
アクセス数や流入元、読まれたページなど、
ほかの要因も考えられるため、
今後も継続して確認していきます。
速度改善は単なる点数稼ぎではなく、
「読者体験（UX）を良くする最高の施策」だと
実感した瞬間でした。
5. 今回の表示速度改善で分かったこと
今回、一番大きかったのは
「一つの原因を見つけて解決した」
という話ではありません。
ブログカードのキャッシュ、
アピールエリアの背景画像、
画像サイズ、
広告プラグインの整理、
Cocoonの広告コード設定、
固定ページの広告除外……
といった複数の原因候補を仮説として立て、
一つずつ整理して検証していった結果です。
そして、この作業を通して分かったのは
自分の
『なんか変じゃない？』
という感覚も大事な検証材料になる」ということです。
AIに相談すると、
色々な可能性を出してくれます。
でも、実際にブログを触っていて
「この画像怪しくない？」
「設定が二重になってない？」
と感じるのは自分自身です。
その感覚をAIにぶつけ、
「じゃあ実際に変えて測ってみよう」
と進めていく姿勢が一番大切だと学びました。
まとめ：2つのAIを相棒にして、広告を残してブログを軽くする
今回やったことをまとめます。
- ブログカードの古いキャッシュを整理
- アピールエリアの背景画像を見直し
- PSIで指摘された画像のサイズ・比率を調整
- 「Advanced Ads」をアンインストールし、Cocoon標準機能へ一本化
- 広告コード（
<ins>タグ）の記述を見直し - PR表記を自動設定＆不要な固定ページの広告を除外
- キャッシュ削除後にPageSpeed InsightsとGA4で効果検証
結果、モバイル40点台 ➔ 70点台へ改善しました。
さらにGA4では、
平均エンゲージメント時間にも大きな変化が
見られました😉
「広告を載せたらブログは重くなる」と
最初から諦める必要はありません。
不要な仕組みを整理するだけでも、
大きく改善できる部分はありました。
そして何より、
今回の作業は一人だったら途中で
投げていたと思います🙄
慎重に分析しながら土台を固めてくれた
「チャッピー（ChatGPT）」
今回は仮説を実際の変更・測定へ進めるきっかけをくれた
「Gemini」
どちらかが上ということではなく、
慎重に調べたい時はチャッピー、
仮説をすぐ検証したい時はGemini
というように、
それぞれの得意分野に合わせてAIを頼ることで、
最高チームとして乗り越えることができました😆
AIを
✖「答えを教えてもらう道具」ではなく、
○「一緒に原因を探して検証する相棒」として使う。
アタシのブログ改善はまだまだ続きます。
次は……どこを見直そうかな😁
コメント