- Cocoonで削除できるキャッシュの種類と役割
- Cocoon設定だけでできる高速化の手順
- WP Fastest CacheやLiteSpeed Cacheとの正しい併用方法
- トラブル発生時の切り分け手順
Cocoonの「キャッシュ」は2種類ある｜まず仕組みを理解しよう
Cocoonには「内部キャッシュ」と「ページキャッシュ」の2種類があり、それぞれ管理する場所と削除方法が異なります。この違いを把握しておくだけで、キャッシュ関連のトラブルの大半を防げます。1. Cocoon内部キャッシュ（部品単位のキャッシュ）
Cocoonは表示を軽くするために、以下のような「部品」を一時保存して使い回しています。- SNSシェアカウント：記事のシェア数
- 人気記事ウィジェット：アクセスランキングの集計結果
- 外部ブログカード：外部サイトのOGP情報（タイトル・サムネイル）
- Amazon商品リンク：Amazon APIから取得した商品情報
- 楽天商品リンク：楽天APIから取得した商品情報
2. ページキャッシュ（ページ全体のキャッシュ）
こちらはWP Fastest CacheやLiteSpeed Cacheなどのキャッシュプラグイン、またはサーバー側の機能（エックスサーバーの「サーバーキャッシュ設定」など）が担当する領域です。 ページ全体をHTMLとして保存し、PHPの処理を省略することで高速化します。効果は大きいものの、更新が反映されにくくなるため「消し方」と「併用の仕方」を知っておくことが重要です。ポイント： Cocoon自体には「ページキャッシュ」機能がないため、さらなる高速化にはキャッシュプラグインの導入が推奨されています。
Cocoonのキャッシュ削除｜どこで何を消せばいい？
キャッシュ削除の操作は「Cocoon設定 → キャッシュ削除」から行います。各キャッシュの役割と削除タイミングを知っておけば、必要なものだけピンポイントで消せるようになります。操作画面への入口
削除できるキャッシュ一覧
| キャッシュの種類 | 役割 | 削除するタイミング |
|---|---|---|
| 全てのキャッシュ | Cocoon内部の全キャッシュを削除 | 大きな変更後、トラブル時 |
| SNSカウントキャッシュ | シェア数の一時保存 | シェア数が更新されない時 |
| 人気記事ウィジェットキャッシュ | ランキング集計結果 | 順位がおかしい時 |
| 外部ブログカードキャッシュ | 外部サイトのOGP情報 | サムネやタイトルが古い時 |
| Amazon APIキャッシュ | Amazon商品情報 | 商品リンクが更新されない時 |
| 楽天APIキャッシュ | 楽天商品情報 | 商品リンクが更新されない時 |
症状別｜どのキャッシュを消すべきか早見表
「何かおかしい」と感じたら、まずブラウザキャッシュを確認し、次にCocoon側、最後にプラグイン・サーバー側の順で削除するのが鉄則です。以下のケース別に、具体的な手順をまとめました。ケースA：「更新したのに反映されない」
1. まずブラウザのキャッシュを確認（最も基本）- シークレットウィンドウで表示を確認
- ハードリロード（Windows:
Ctrl+F5/ Mac:Cmd+Shift+R）
- 外部ブログカードを使用 → 外部ブログカードキャッシュ
- 人気記事の順位がおかしい → 人気記事ウィジェットキャッシュ
- WP Fastest Cache：「キャッシュを削除」タブから削除
- LiteSpeed Cache：「パージ」からキャッシュをクリア
ケースB：「SNSシェア数が更新されない」
SNSカウントキャッシュを削除 → しばらく待つ SNS側の仕様で即時反映できないこともあります。キャッシュを消してから数時間〜1日待ってみてください。ケースC：「人気記事ウィジェットの順位が変」
人気記事ウィジェットキャッシュを削除 特にアクセス集計系プラグイン（Jetpackなど）と併用していると、集計タイミングのズレで順位が実態と異なることがあります。ケースD：「ブログカード（外部）のタイトルやサムネが古い」
外部ブログカードキャッシュを削除 外部サイト側が更新された直後は、Cocoon側のキャッシュが古いままになっていることが多いです。ケースE：「Amazon商品リンクが更新されない」【重要】
Amazon商品リンクはAPI制限を避けるためにキャッシュ前提で動いています。むやみに「全削除」すると大量リクエストが発生し、表示が不安定になりやすいです。
推奨される手順：
Cocoon公式によると、全キャッシュ削除後も「時間が経てばキャッシュが順次生成され、いずれ正常表示される」仕組みになっています。
- できるだけ「個別の商品リンク」だけキャッシュ削除 管理者としてログインし、該当ページで商品リンク下部の「キャッシュ削除」をクリック
- それでもダメなら Amazon APIキャッシュの削除
- 「全キャッシュ削除」は最終手段（やりすぎない）
Cocoon設定だけでできる高速化｜まずはここから
Cocoonは「高速化」メニューから、ブラウザキャッシュ・CSS/JS縮小化・遅延読み込みなどを設定するだけで、プラグインなしでも十分な速度改善が見込めます。ただし、一気に全部ONにせず「1つずつ有効化→動作確認」の手順を守ることが重要です。設定画面への入口
推奨設定一覧
Cocoon公式では、以下の項目にチェックを入れることが推奨されています。| 設定項目 | 効果 | 注意点 |
|---|---|---|
| ブラウザキャッシュの有効化 | 2回目以降の表示を高速化 | .htaccessに設定が追記される |
| CSSを縮小化する | ファイルサイズを削減 | スキンとの相性で崩れる場合あり |
| JavaScriptを縮小化する | ファイルサイズを削減 | 一部機能が動かなくなる場合あり |
1. ブラウザキャッシュの有効化
画像やCSS、JavaScriptなどをブラウザに保存させ、2回目以降のアクセスを高速化する定番設定です。注意点： 画像を差し替える際は、必ずファイル名を変更してください。同じファイル名だとブラウザが古い画像を使い続けます（キャッシュ期間は最大1年間）。
2. CSS縮小化・JavaScript縮小化
コード内の不要な空白や改行を削除し、ファイルサイズを減らします。転送量が減って速くなる反面、プラグインやスキンとの相性で表示崩れが起きることがあります。 崩れた場合の対処： まず縮小化をOFFにして原因を切り分けましょう。特にJavaScript縮小化でスライダーやメニューが動かなくなるケースが報告されています。3. Lazy Load（遅延読み込み）
ファーストビュー外の画像の読み込みを遅らせて、初期表示速度を向上させます。重要： 遅延読み込み機能を持つプラグイン（EWWW Image Optimizer、LiteSpeed Cacheなど）と二重化させないこと。両方ONにすると画像が表示されなくなる不具合が報告されています。
4. Google Fontsの非同期読み込み
Google Fontsはレンダリングをブロックしがちなので、非同期読み込みが効果的です。ただしフォントの「ちらつき（FOUT）」が気になる場合もあるので、見た目のチェックは必須です。キャッシュプラグインとの併用｜「事故らない」コツは1つだけ
Cocoonとキャッシュプラグインを併用する最大のコツは「機能の重複を避ける」ことです。Cocoonは多機能テーマのため、プラグインと役割がかぶりやすく、二重化がトラブルの最大の原因になります。以下の表で「どちらが担当するか」を明確にしておきましょう。機能の担当分け表
| 機能 | Cocoon | プラグイン | どちらを使う？ |
|---|---|---|---|
| ページキャッシュ | × | ○ | プラグイン側 |
| ブラウザキャッシュ | ○ | ○ | どちらか一方 |
| CSS/JS/HTML縮小化 | ○ | ○ | どちらか一方 |
| Lazy Load（遅延読み込み） | ○ | ○ | どちらか一方 |
| Gzip圧縮 | × | ○ | プラグイン側 |
WP Fastest Cacheとの併用設定
- HTML縮小化（WP Fastest Cache側で行う場合）
- CSS縮小化（WP Fastest Cache側で行う場合）
- JavaScript縮小化（WP Fastest Cache側で行う場合）
- 「キャッシュを有効にする」：ON
- 「先読み」：ON（投稿、カテゴリー、固定ページなど）
- 「モバイルキャッシュ」：OFF（Cocoonはレスポンシブ対応のため）
- 「Gzip圧縮」：OFF（エックスサーバーはBrotli対応のため不要）
LiteSpeed Cacheとの併用設定
LiteSpeed系サーバー（mixhost、ロリポップなど）で利用できるプラグインです。重要： LiteSpeed Cacheを本格的に使う場合は、Cocoon側の高速化設定を全てOFFにしてLiteSpeed Cache側に任せる方法が推奨されています。
Cocoon側で無効化すべき項目：
- ブラウザキャッシュの有効化
- CSSを縮小化する
- JavaScriptを縮小化する
- Lazy Loadを有効にする
- 「モバイルをキャッシュ」：OFF（Cocoonはレスポンシブ対応）
- 「CSS圧縮化」「CSS結合」：モバイルでレイアウト崩れが発生しやすい
- 画像の遅延読み込み：Cocoon側と二重化しない
サーバー側キャッシュとの関係
レンタルサーバーにもキャッシュ機能があるため、Cocoonやプラグインと三重に設定が重なると不具合の原因になります。特にエックスサーバーを利用している場合は、以下の点を確認しておきましょう。エックスサーバーの場合
- サーバーキャッシュ設定：ページキャッシュ機能
- ブラウザキャッシュ設定：Cocoonと重複する可能性あり
- Brotli圧縮：Gzipより高圧縮（プラグインのGzip設定は不要）
不具合が出たら｜最短で原因を見つける切り分け手順
キャッシュや高速化設定で不具合が出た場合、「全部OFF → 1つずつON」で原因を切り分けるのが最速の解決法です。以下のチェックリストに沿って順番に確認してください。ステップ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分でできる！おすすめの最短ルート
Cocoonの高速化は、「計測→Cocoon設定→（必要なら）プラグイン導入」の3ステップで進めれば、10分程度で完了します。以下の手順で、安全に最大限の効果を引き出しましょう。Step 1：現状を計測
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の高速化で最も大切なのは、設定を盛り込むことではなく「どの機能を誰が担当するか」を整理することです。- Cocoonのキャッシュ削除は 「内部キャッシュ」を消す場所
- ページキャッシュは プラグイン（またはサーバー）側 の担当
- 高速化の最大のコツは 「二重化させない」 こと
- 不具合時は 「全部OFF → 1つずつON」 が最短の解決法
コメント