【Cocoon×AI】PageSpeed Insightsのモバイルスコアを劇的に改善する実践ガイド!原因の切り分けとキャッシュ回避の裏技まで

※ 当サイトではアフィリエイト広告を利用しています。リンクは広告リンクも含みます。

この記事は約10分で読めます。

「PageSpeed Insights(PSI)で測定したら、モバイルのスコアが赤点(30〜40点台)だった……」

WordPressでブログを運営していると、必ずぶつかるのがページ表示速度の壁です。特にスマホ(モバイル)のスコア改善は難易度が高く、何を直せばいいか分からず途方に暮れている方も多いのではないでしょうか。

実は筆者も、最初はモバイルスコアが30点台(真っ赤)という絶望的な状態でした。
しかし、無料のAI(Gemini等)に相談しながら1つずつ対策を施した結果、「64点(実用レベルの黄色)」まで改善。さらに原因の切り分けとしてGoogle系スクリプトを一時停止してみたところ、なんと「98点(ほぼ満点の緑)」を叩き出しました。

【筆者のスコア推移の実例】

  • 対策前:30点台(赤)…何から手を付ければいいか分からない状態
  • AIに対策を聞いて改善後:64点(黄)…現実的な運用状態で実用的な速度を達成!(現状これで運用してます。)
  • Google系スクリプト一時停止時:98点(緑)…Cocoon本来の圧倒的なポテンシャルが証明された瞬間

本記事では、無料のAIを「専任エンジニア」として活用し、Cocoonサイトの表示速度を効率よく改善する方法を詳しく解説します。

筆者が実際に導入しているプラグイン構成や、変更前に必ずやっておくべき「ソースコード保存による事前準備」、そして測定が狂わない「キャッシュ回避の裏技」まで、すべて実践ベースでお届けします。

【実録】なぜAdSenseに「サポート詐欺広告」が出るのか?悪質広告がGoogleの審査をすり抜ける仕組みとブロック対策
Webサイトを運営していると、ある日突然、読者から「お前のサイトに変なウイルス警告が出たぞ!」と言われたり、自分自身でサイトを閲覧しているときに突然「ピーッ!」と警告音が鳴って「パソコンがウイルスに感染しました」という画面(いわゆるサポート…

  1. 筆者のサイト環境と導入プラグイン(Cocoon最優先の考え方)
    1. 主な利用プラグイン(いずれも無料プラン)
    2. 【超重要】プラグインよりも「Cocoon設定」を最優先する
  2. 混乱しやすい「キャッシュ」の違いを完全整理!
    1. サイト高速化に関わる4大キャッシュ一覧
    2. 料理に例えるとイメージしやすい!
  3. なぜモバイル版のスコア改善はこんなにも難しいのか?
  4. 高速化の相棒!AIを正しく使い倒す鉄則
    1. 無料で使えるおすすめAIツール
    2. 鉄則①:まずは自分の「環境」をAIに伝える
    3. 鉄則②:指摘項目は「1つずつ」相談する
    4. 鉄則③:AIの丸投げ・深追いは厳禁!
  5. 原因のほとんどはGoogle系スクリプト!「素の実力(ポテンシャル)」を測定する手順
    1. 【最重要・事前準備】変更前に「現在のHTMLソース」を必ず保存する!
    2. 手順:Cocoon設定でスクリプトを一時的にオフにする
      1. ① アクセス解析・認証コードの退避
      2. ② 広告設定の解除
    3. 【差分チェック】変更後のソースコードと比較する
    4. スクリプト除外時の注意点・デメリット
  6. 改善が反映されない?!「キャッシュの罠」を突破する実践手順
    1. ステップ①:サーバー側&テーマ側のキャッシュを全削除
    2. ステップ②:PSI自体の測定キャッシュを回避する「クエリパラメータ」技
      1. なぜパラメータを付けると解決するのか?
  7. まとめ:AIと現実的に付き合い、ユーザーファーストなサイトへ
MINISFORUM日本公式ストア

筆者のサイト環境と導入プラグイン(Cocoon最優先の考え方)

まず参考として、今回の検証を行った筆者のサイト環境と利用プラグインを紹介します。高速化プラグインはやみくもに入れると不具合のもとになるため、必要最小限に絞っています。

主な利用プラグイン(いずれも無料プラン)

  • EWWW Image Optimizer(無料版)
    • 目的:画像を次世代フォーマット「WebP(ウェッピー)」に自動変換し、画像容量を圧縮・軽量化するため。
  • WP Super Cache(無料版)
    • 目的:ページキャッシュを生成し、サーバーの負荷を下げて表示を高速化するため。

【超重要】プラグインよりも「Cocoon設定」を最優先する

Cocoonには標準で「ブラウザキャッシュ」「HTML/CSS/JavaScriptの縮小化」などの優れた高速化機能が備わっています。
プラグイン側でも同じ機能を有効にしてしまうと、処理が重複して表示崩れやエラーの原因になります。

そのため、筆者の環境では「Cocoon側の高速化設定を最優先」にし、プラグイン側はWebP変換や静的キャッシュなど、Cocoonでカバーできない部分だけを補う形で併用しています。


混乱しやすい「キャッシュ」の違いを完全整理!

高速化に取り組むと必ず登場するのが「キャッシュ」という言葉です。
実は、一口にキャッシュと言っても「保存されている場所」も「目的」も全く異なります。ここを混同すると「どこを消せば最新の状態になるのか」が分からなくなるため、まずは違いをスッキリ整理しておきましょう。

サイト高速化に関わる4大キャッシュ一覧

キャッシュの種類置かれている場所何を保存しているか?削除(クリア)しないとどうなる?
① WP Super Cache
(ページキャッシュ)
WEBサーバー上PHPやデータベースが組み立てた「完成版HTMLページ丸ごと」スクリプトの削除や設定変更が、読者やGoogleに全く反映されない
② Cocoonのキャッシュ
(テーマ内部キャッシュ)
WordPress内ブログカードのサムネイルやブログパーツなどの「部品データ」内部リンクの画像更新や設定変更したパーツが反映されない
③ ブラウザキャッシュ
(端末キャッシュ)
読者(自分)のスマホ・PC過去に読み込んだ画像やCSSスタイルシート自分が見ている画面だけ古い状態のままになる
④ PSIのシステムキャッシュ
(Googleのキャッシュ)
Googleの測定サーバー前回のPageSpeed Insights測定結果設定を変えたのに、同じ古いスコアが再表示されてしまう

料理に例えるとイメージしやすい!

WordPressは、アクセスがあるたびに「注文を受けてから厨房でシェフ(PHPとデータベース)が一から料理を作って出すレストラン」のような仕組みです。

  • WP Super Cache は、「作り置きのセット定食」です。注文が入ったら即座に出せるので劇的に速くなります。ただし、「レシピ(設定)を変えた」のに作り置き(古いキャッシュ)を捨て忘れると、古い料理が出続けてしまいます。
  • Cocoonのキャッシュ は、「下ごしらえした具材(ブログカード等のパーツ)」です。
  • ブラウザキャッシュ は、お客さんの手元に残っている「持ち帰り用の紙ナプキン」のようなもの。
  • PSIのキャッシュ は、Googleの検査官が持っている「前回の衛生検査カルテ」です。

今回のように「設定を変更してPageSpeed Insightsで効果を測る」ときは、ブラウザキャッシュ以外が最新の状態になっていないと正しいスコアが測れません。


なぜモバイル版のスコア改善はこんなにも難しいのか?

PageSpeed Insightsで計測した際、パソコン版は「90点以上(緑)」が出るのに、モバイル版だけスコアが低くなってしまう理由は明確です。

モバイル版のテストは、「低スペックなスマホ端末」かつ「速度制限に近い低速回線」を想定してシミュレートされるためです。

特に以下の要素があると、一気にスマホのCPU(メインスレッド)を占有し、スコアがガタ落ちします。

  • Google AdSense(自動広告・ディスプレイ広告)
  • Googleアナリティクス(GA4)やタグマネージャー
  • 各種計測タグ・SNSウィジェット

つまり、ブログを収益化・アクセス解析しようとするほど、モバイルスコアは構造的に下がりやすいのです。


高速化の相棒!AIを正しく使い倒す鉄則

専門用語だらけのPSIの指摘も、AIを使えば「具体的にCocoonのどこをどう直せばいいか」をピンポイントで教えてもらえます。

無料で使えるおすすめAIツール

  • ChatGPT(OpenAI): 最も定番。無料プランでも高精度な分析と回答が可能。
  • Claude(Anthropic): 長文の読み取りや丁寧な日本語解説・コード生成が得意。
  • Gemini(Google): Google製のため、Googleのウェブ指標(Core Web Vitals)に関する解説に強い。

鉄則①:まずは自分の「環境」をAIに伝える

最初に自分の前提条件をしっかり伝えます。

AIへの前提共有プロンプト例:
「WordPress(Cocoon)でブログを運営しています。PageSpeed Insightsのモバイルスコアを改善したいです。
私の環境は以下の通りです。

  • テーマ:Cocoon(子テーマ使用)
  • サーバー:〇〇(ご自身のサーバー名)
  • 利用プラグイン:EWWW Image Optimizer、WP Super Cache(いずれも無料版、Cocoon設定優先)
  • 収益化:Googleアドセンス、GA4導入済み
    これからPSIの指摘事項を1つずつ相談するので、初心者にも分かりやすく対策手順を教えてください。」

鉄則②:指摘項目は「1つずつ」相談する

「レンダリングを妨げるリソースの除外」「使用していない JavaScript の削減」など、PSIで出た指摘を1つずつ貼って改善策を聞き、試して再測定するサイクルを回します。一気に直そうとすると原因が分からなくなります。

鉄則③:AIの丸投げ・深追いは厳禁!

AIの提案は完璧ではありません。
指示通りにCSSやfunction.phpをいじって効果がなかったり、デザインが崩れた場合は、深追いせずに即座に元の状態へ戻してください。丸投げしてあれこれコードを足しすぎると、最悪の場合サイトが真っ白になり復旧できなくなります。


原因のほとんどはGoogle系スクリプト!「素の実力(ポテンシャル)」を測定する手順

AIと共に対策を進めると、筆者のように30点台から60点台(合格ライン)までは十分に伸ばせます。
しかし、「これ以上どうしても上がらない……」という壁にぶつかったら、外部スクリプトを一時停止してテーマ本来の実力(ポテンシャル)を確認してみましょう。

冒頭でお伝えした通り、筆者の環境でもスクリプトを外しただけで64点から一気に98点まで跳ね上がりました。

【最重要・事前準備】変更前に「現在のHTMLソース」を必ず保存する!

設定を変更した後に確認しても遅いです!
「本当にスクリプトが外れたか」を後から比較できるように、必ず変更前のソースコードを保存しておきます。

  1. ブラウザのシークレットウィンドウで自分のサイトを開く。
  2. キーボードの Ctrl + U(Macは Cmd + Option + U)を押して、ページのHTMLソースを表示する。
  3. ソースの先頭から </head> タグまでの部分をコピーし、メモ帳などのテキストファイルに保存しておく。

手順:Cocoon設定でスクリプトを一時的にオフにする

設定内容をメモ帳等に退避させ、入力欄を一時的に空にします。

① アクセス解析・認証コードの退避

  1. WordPress管理画面の 「Cocoon設定」>「アクセス解析・認証」 を開く。
  2. 以下の項目に設定されているIDやコードをコピーしてメモ帳に貼り付ける。(確認が終わったら元に戻せるようにするため。)
    • GA4測定ID
    • Google Search Console ID
    • ヘッド用コード
    • フッター用コード
  3. 入力欄を空にして、画面下の「変更をまとめて保存」をクリック。

② 広告設定の解除

  1. WordPress管理画面の 「Cocoon設定」>「広告」 を開く。
  2. 「全ての広告を表示する」のチェックを外す(またはアドセンスコードの入力欄を空にする)。
  3. 画面下の「変更をまとめて保存」をクリック。

【差分チェック】変更後のソースコードと比較する

設定保存後、もう一度シークレットウィンドウでページを再読み込みし、Ctrl + U でソースを表示します。
事前に保存しておいた変更前の <head> と見比べ、Google関係のタグが綺麗に消えているか確認しましょう。これで準備完了です。


スクリプト除外時の注意点・デメリット

この検証は、「ボトルネックがCocoon側にあるのか、Google系スクリプトにあるのか」を完全に切り分けるためのテストです。影響を最小限にするため、短時間で測定してすぐに元に戻しましょう。

影響項目発生する現象対策
Googleアナリティクス (GA4)外している間のPVやアクセスデータが記録されないアクセスの少ない深夜帯に行い、数分〜十数分で測定を終える
Googleアドセンス広告が非表示になり、その間のインプレッション・収益が出ないテスト終了後、速やかにバックアップしたコードを再設定する
PSIスコア劇的にスコアが向上する(筆者は64点→98点)高得点が出れば、Cocoon自体の設定は合格であり、外部スクリプトが負荷の主原因だと確定できる

改善が反映されない?!「キャッシュの罠」を突破する実践手順

「コードを外したのに、PageSpeed Insightsのスコアが1点も変わらない……」
そんなときは、第2章で解説した「サーバー側キャッシュ(WP Super Cache)」または「Google側の測定キャッシュ」が残っているのが原因です。以下の2ステップで確実に解消しましょう。

ステップ①:サーバー側&テーマ側のキャッシュを全削除

設定変更を行ったら、古い「作り置きHTML」と「下ごしらえパーツ」を破棄します。

  1. WP Super Cacheのキャッシュクリア(最重要!)
    • WordPress管理画面の「設定」>「WP Super Cache」を開き、「キャッシュを削除」をクリック。
    • これにより、サーバー上に保存されていた古い完成版HTMLがすべて破棄されます。
  2. Cocoonのキャッシュクリア
    • 管理画面上部のツールバーまたはCocoonメニューから「キャッシュ削除」>「全てのキャッシュの削除」をクリック。
    • ブログカード等の内部パーツキャッシュがリセットされます。

ステップ②:PSI自体の測定キャッシュを回避する「クエリパラメータ」技

PageSpeed Insights側が持っている「前回の測定結果」をスキップするため、URLの末尾にダミーのパラメータをつけて測定します。

【通常のURL】
https://your-domain.com/

【キャッシュを強制回避する測定用URL例】

your-domain.com
your-domain.com

なぜパラメータを付けると解決するのか?

Googleの測定サーバーは、?nocache=1 などがついたURLを「未測定の全く新しいURL」として扱います。
これにより、Google側の古いキャッシュを強制的にスキップし、その瞬間の最新状態(スクリプトが外れた状態)で確実に再テストさせることができます。


まとめ:AIと現実的に付き合い、ユーザーファーストなサイトへ

Cocoonの高速化とPageSpeed Insights対策のポイントをまとめます。

  1. 4つのキャッシュを意識する:WP Super Cache(ページ全体の静的化)とCocoon内部キャッシュ、PSI側のキャッシュを区別して正しくクリアする。
  2. Cocoon設定を最優先にする:EWWW Image OptimizerやWP Super Cacheは必要な機能だけ使い、Cocoonとの機能重複・競合を防ぐ。
  3. AIと二人三脚で挑む:前提環境を共有し、PSIの指摘を1つずつ壁打ちする(深追い・丸投げはNG)。
  4. 事前にソース(Ctrl+U)を保存:変更前のコードを残しておくことで、正確な差分確認ができる。
  5. 98点のポテンシャルを知った上で割り切る:Google系スクリプトを外せば98点が出ると分かれば、「日常運用で60点台が出ているなら実用上十分」と冷静に判断できる。

アドセンスやGA4を導入している以上、実運用でモバイル100点をキープするのは至難の業です。大切なのは「数字に囚われすぎて必要な広告や機能を削り落とすこと」ではなく、読者がストレスなく快適に記事を読めることです。

ぜひ今回の切り分け手法を活用し、無理のない健全な高速化を進めてみてください!

目次へ

イチゲをOFUSEで応援する

タイトルとURLをコピーしました