WordPressの無料テーマ「Cocoon」は、テーマ単体でもPageSpeed Insightsで90点前後を狙えるほど高速化機能が充実しています。
しかし「キャッシュ」は速くする代わりに、「更新したのに反映されない」「レイアウトが崩れる」といったトラブルも起こしがち。特にキャッシュ系プラグインと併用すると、機能が重複して思わぬ不具合に悩まされることがあります。
この記事では、Cocoonユーザーが安心して高速化できるよう、以下の内容を整理してまとめました。
- Cocoonで削除できるキャッシュの種類と役割
- Cocoon設定だけでできる高速化の手順
- WP Fastest CacheやLiteSpeed Cacheとの正しい併用方法
- トラブル発生時の切り分け手順
Cocoonの「キャッシュ」は2種類ある｜まず仕組みを理解しよう
Cocoonのキャッシュを正しく扱うには、まず「2種類のキャッシュ」の違いを理解することが大切です。
1. Cocoon内部キャッシュ（部品単位のキャッシュ）
Cocoonは表示を軽くするために、以下のような「部品」を一時保存して使い回しています。
- SNSシェアカウント：記事のシェア数
- 人気記事ウィジェット：アクセスランキングの集計結果
- 外部ブログカード：外部サイトのOGP情報（タイトル・サムネイル）
- Amazon商品リンク：Amazon APIから取得した商品情報
- 楽天商品リンク：楽天APIから取得した商品情報
これらは 「Cocoon設定 → キャッシュ削除」 から個別に削除できます。
2. ページキャッシュ（ページ全体のキャッシュ）
こちらはWP Fastest CacheやLiteSpeed Cacheなどのキャッシュプラグイン、またはサーバー側の機能（エックスサーバーの「サーバーキャッシュ設定」など）が担当する領域です。
ページ全体をHTMLとして保存し、PHPの処理を省略することで高速化します。効果は大きいものの、更新が反映されにくくなるため「消し方」と「併用の仕方」を知っておくことが重要です。
Cocoonのキャッシュ削除｜どこで何を消せばいい？
操作画面への入口
WordPress管理画面 → Cocoon設定 → キャッシュ削除
ここに各種キャッシュの削除ボタンが並んでいます。Cocoon公式では定期的な削除が推奨されています。
削除できるキャッシュ一覧
| キャッシュの種類 | 役割 | 削除するタイミング |
|---|---|---|
| 全てのキャッシュ | Cocoon内部の全キャッシュを削除 | 大きな変更後、トラブル時 |
| SNSカウントキャッシュ | シェア数の一時保存 | シェア数が更新されない時 |
| 人気記事ウィジェットキャッシュ | ランキング集計結果 | 順位がおかしい時 |
| 外部ブログカードキャッシュ | 外部サイトのOGP情報 | サムネやタイトルが古い時 |
| Amazon APIキャッシュ | Amazon商品情報 | 商品リンクが更新されない時 |
| 楽天APIキャッシュ | 楽天商品情報 | 商品リンクが更新されない時 |
症状別｜どのキャッシュを消すべきか早見表
ケースA：「更新したのに反映されない」
1. まずブラウザのキャッシュを確認（最も基本）
- シークレットウィンドウで表示を確認
- ハードリロード（Windows:
Ctrl+F5/ Mac:Cmd+Shift+R）
2. Cocoon設定 → キャッシュ削除で関連項目を削除
- 外部ブログカードを使用 → 外部ブログカードキャッシュ
- 人気記事の順位がおかしい → 人気記事ウィジェットキャッシュ
3. キャッシュプラグイン導入中ならプラグイン側も削除
- WP Fastest Cache：「キャッシュを削除」タブから削除
- LiteSpeed Cache：「パージ」からキャッシュをクリア
4. サーバー側キャッシュも確認（エックスサーバーなど）
ケースB：「SNSシェア数が更新されない」
SNSカウントキャッシュを削除 → しばらく待つ
SNS側の仕様で即時反映できないこともあります。キャッシュを消してから数時間〜1日待ってみてください。
ケースC：「人気記事ウィジェットの順位が変」
人気記事ウィジェットキャッシュを削除
特にアクセス集計系プラグイン（Jetpackなど）と併用していると、集計タイミングのズレで順位が実態と異なることがあります。
ケースD：「ブログカード（外部）のタイトルやサムネが古い」
外部ブログカードキャッシュを削除
外部サイト側が更新された直後は、Cocoon側のキャッシュが古いままになっていることが多いです。
ケースE：「Amazon商品リンクが更新されない」【重要】
Amazon商品リンクはAPI制限を避けるためにキャッシュ前提で動いています。むやみに「全削除」すると大量リクエストが発生し、表示が不安定になりやすいです。
推奨される手順：
- できるだけ「個別の商品リンク」だけキャッシュ削除
管理者としてログインし、該当ページで商品リンク下部の「キャッシュ削除」をクリック - それでもダメなら Amazon APIキャッシュの削除
- 「全キャッシュ削除」は最終手段（やりすぎない）
Cocoon公式によると、全キャッシュ削除後も「時間が経てばキャッシュが順次生成され、いずれ正常表示される」仕組みになっています。
Cocoon設定だけでできる高速化｜まずはここから
設定画面への入口
WordPress管理画面 → Cocoon設定 → 高速化
初心者は「1つずつONにして動作確認」がおすすめです。一気に全部ONにすると、問題が起きたときの原因特定が難しくなります。
推奨設定一覧
Cocoon公式では、以下の項目にチェックを入れることが推奨されています。
| 設定項目 | 効果 | 注意点 |
|---|---|---|
| ブラウザキャッシュの有効化 | 2回目以降の表示を高速化 | .htaccessに設定が追記される |
| CSSを縮小化する | ファイルサイズを削減 | スキンとの相性で崩れる場合あり |
| JavaScriptを縮小化する | ファイルサイズを削減 | 一部機能が動かなくなる場合あり |
1. ブラウザキャッシュの有効化
画像やCSS、JavaScriptなどをブラウザに保存させ、2回目以降のアクセスを高速化する定番設定です。
2. CSS縮小化・JavaScript縮小化
コード内の不要な空白や改行を削除し、ファイルサイズを減らします。転送量が減って速くなる反面、プラグインやスキンとの相性で表示崩れが起きることがあります。
崩れた場合の対処： まず縮小化をOFFにして原因を切り分けましょう。特にJavaScript縮小化でスライダーやメニューが動かなくなるケースが報告されています。
3. Lazy Load（遅延読み込み）
ファーストビュー外の画像の読み込みを遅らせて、初期表示速度を向上させます。
4. Google Fontsの非同期読み込み
Google Fontsはレンダリングをブロックしがちなので、非同期読み込みが効果的です。ただしフォントの「ちらつき（FOUT）」が気になる場合もあるので、見た目のチェックは必須です。
キャッシュプラグインとの併用｜「事故らない」コツは1つだけ
Cocoonは多機能なため、キャッシュプラグインと最も衝突しやすいテーマです。
コツは「機能の重複を避ける」こと
以下のように「どちらが担当するか」を明確に決めておくだけで、トラブル率が大幅に下がります。
| 機能 | Cocoon | プラグイン | どちらを使う？ |
|---|---|---|---|
| ページキャッシュ | × | ○ | プラグイン側 |
| ブラウザキャッシュ | ○ | ○ | どちらか一方 |
| CSS/JS/HTML縮小化 | ○ | ○ | どちらか一方 |
| Lazy Load（遅延読み込み） | ○ | ○ | どちらか一方 |
| Gzip圧縮 | × | ○ | プラグイン側 |
WP Fastest Cacheとの併用設定
Cocoon公式で推奨されているプラグインです。Apache系サーバー（エックスサーバーなど）で効果的です。
Cocoon側で無効化すべき項目：
- HTML縮小化（WP Fastest Cache側で行う場合）
- CSS縮小化（WP Fastest Cache側で行う場合）
- JavaScript縮小化（WP Fastest Cache側で行う場合）
WP Fastest Cache側の設定ポイント：
- 「キャッシュを有効にする」：ON
- 「先読み」：ON（投稿、カテゴリー、固定ページなど）
- 「モバイルキャッシュ」：OFF（Cocoonはレスポンシブ対応のため）
- 「Gzip圧縮」：OFF（エックスサーバーはBrotli対応のため不要）
LiteSpeed Cacheとの併用設定
LiteSpeed系サーバー（mixhost、ロリポップなど）で利用できるプラグインです。
Cocoon側で無効化すべき項目：
- ブラウザキャッシュの有効化
- CSSを縮小化する
- JavaScriptを縮小化する
- Lazy Loadを有効にする
LiteSpeed Cache側の注意点：
- 「モバイルをキャッシュ」：OFF（Cocoonはレスポンシブ対応）
- 「CSS圧縮化」「CSS結合」：モバイルでレイアウト崩れが発生しやすい
- 画像の遅延読み込み：Cocoon側と二重化しない
サーバー側キャッシュとの関係
レンタルサーバーにもキャッシュ機能があることがあります。
エックスサーバーの場合
- サーバーキャッシュ設定：ページキャッシュ機能
- ブラウザキャッシュ設定：Cocoonと重複する可能性あり
- Brotli圧縮：Gzipより高圧縮（プラグインのGzip設定は不要）
エックスサーバーでは、Cocoonのブラウザキャッシュ機能とサーバー側の機能を併用すると、.htaccessの設定が競合する可能性があります。どちらか一方に統一しましょう。
不具合が出たら｜最短で原因を見つける切り分け手順
以下のチェックリストに沿って順番に確認してください。
ステップ1：Cocoon高速化をいったん全部OFF
Cocoon設定 → 高速化 のチェックを全て外して保存します。
ステップ2：キャッシュプラグインの最適化機能をOFF
WP Fastest CacheやLiteSpeed Cacheを使っている場合、「縮小化」「Lazy Load」などの最適化機能だけをOFFにします（ページキャッシュはONのままでOK）。
ステップ3：ブラウザキャッシュを無効化して確認
- シークレットウィンドウで表示
- DevTools（F12）でキャッシュを無効化
ステップ4：1つずつONに戻す
機能を1つずつONにしていき、崩れた瞬間の項目が原因です。
よくある「当たり」パターン
| 症状 | 原因として多い設定 |
|---|---|
| スライダーやメニューが動かない | JavaScript縮小化 |
| アイコンフォントが表示されない | Webフォントの非同期読み込み |
| 画像が表示されない | Lazy Loadの二重化 |
| ページが真っ白になる | HTML縮小化（まれ） |
| モバイル表示が崩れる | CSS縮小化・結合（LiteSpeed Cache） |
10分でできる！おすすめの最短ルート
Step 1：現状を計測
まずPageSpeed Insights（https://pagespeed.web.dev/）で現在のスコアを記録しておきます。
Step 2：Cocoon高速化を設定
Cocoon設定 → 高速化 で以下を1つずつON → 表示確認：
- ブラウザキャッシュの有効化
- CSSを縮小化する
- JavaScriptを縮小化する
Step 3：ページキャッシュプラグインを導入（任意）
サーバーに合わせて選択：
- Apache系（エックスサーバーなど）→ WP Fastest Cache
- LiteSpeed系（mixhost、ロリポップなど）→ LiteSpeed Cache
Step 4：表示崩れが出たら
縮小化またはLazy Loadの二重化を疑い、どちらかをOFFにします。
Step 5：更新が反映されない時
3段キャッシュを順番に削除：
- ブラウザのキャッシュ
- Cocoon設定のキャッシュ削除
- プラグイン側のキャッシュ削除（+ サーバー側）
まとめ：Cocoon高速化は「足し算」より「整理」が効く
- Cocoonのキャッシュ削除は 「内部キャッシュ」を消す場所
- ページキャッシュは プラグイン（またはサーバー）側 の担当
- 高速化の最大のコツは 「二重化させない」 こと
- 不具合時は 「全部OFF → 1つずつON」 が最短の解決法
設定を盛り込むよりも「どの機能を誰が担当するか」の整理こそが、「速くて安定した」サイトへの近道です。
Cocoonテーマのみでも、PageSpeed Insightsでモバイル・パソコン双方90点前後は十分に狙えます。 ただし、Googleアドセンス、アナリティクス、SNS連携などの外部リソースを読み込むと点数は下がります。これはテーマ側ではどうしようもない部分なので、過度にスコアを気にしすぎないことも大切です。
コメント