Cocoon で Prime Cache を使う｜高速化設定を全部オンにしても崩れませんでした

Cocoon を使っているサイトに Prime Cache を入れても大丈夫か。
Cocoon にも高速化の設定があるので、二つを重ねて壊れないかが気になる人は多いと思います。

先に断っておくと、Prime Cache は私が作っているプラグインです。
そのうえで、自分のサイトの複製に Cocoon と Prime Cache を入れて、Cocoon の縮小化・遅延読み込み・ブラウザキャッシュをオンにしたまま試しました。
表示の崩れも、JavaScript のエラーも出ませんでした。以下は、そのとき何を見たかの記録です。

Cocoon と Prime Cache、重なるところと重ならないところ

試す前に、二つの機能を並べてみました。
Cocoon の高速化設定は、テーマとしてはかなり充実しています。ただ、ページそのものを保存しておく「ページキャッシュ」はありません。Prime Cache を足す意味があるのは、主にここです。

表のとおり、ページキャッシュ以外はほとんど重なっています。
重なっている機能を両方オンにして壊れないか。今回確かめたかったのは、そこです。

試した環境

Pro は入れた状態で一度試し、そのあと Pro を止めて無料版だけでも同じ確認をしました。結果はどちらも同じです。

Cocoon 側：縮小化・遅延読み込み・ブラウザキャッシュをオン

Cocoon 設定の「高速化」で、ブラウザキャッシュ、CSS と JavaScript の縮小化、Lazy Load（画像の遅延読み込み）をオンにしました。
どれも Prime Cache に同じ役割の機能があるものです。どれかを外してから試すと「外したから動いた」のか分からなくなるので、重なりがいちばん多い状態を選んでいます。
Google フォントの非同期読み込みは、今回はオフのままで試しています。

Prime Cache 側：Auto を押しただけ

Prime Cache は、Tools 画面の Auto を一度押しただけです。細かい設定は触っていません。
Auto は、サーバーの環境を見て、動く範囲の設定をまとめて入れるプリセットです。

Tools 画面の Auto の欄には、Prime Cache が読み取った環境が並びます。
今回は、Web サーバーが Apache、.htaccess が書き込み可能、PHP 8.3、オブジェクトキャッシュに APCu、テーマが「Cocoon Child（クラシックテーマ）」と表示されていました。
Cocoon の子テーマを使っていることも、ここで認識されています。

Auto のほかに、安全・バランス・アグレッシブの3つのプリセットがあります。
今回 Auto だけで試したのは、プラグインを入れたばかりの人が、最初に押すのがこのボタンだからです。

確かめたこと

ログアウトした状態で、トップページ、画像と目次とブログカードのある記事、スマホ表示の3つを開きました。
レイアウトの崩れはなく、ブラウザの開発者ツールの Console にもエラーは出ていません。

見た目だけでは分からないのが、圧縮が二重にかかっていないかです。
二重にかかると、ブラウザが中身を読めずに文字化けします。そこで、ターミナルからヘッダーと本文の末尾を確認しました。

1行目では、content-encoding: gzip が1行だけ返ってきました。圧縮は一度だけです。
2行目の出力は </html> で終わり、文字化けもありませんでした。
vary: Accept-Encoding が2行並んでいましたが、同じ値が重なっているだけなので、害はありません。

HTML の cache-control は max-age=0 でした。
ブラウザが、ページを開くたびに「新しい版はあるか」をサーバーに確かめる設定です。記事を直したとき、読者の画面にすぐ反映されるので、HTML はこれで正しい状態です。
画像や CSS のように、めったに変わらないファイルには、長い有効期限が付きます。

.htaccess では何が重なっているのか

Cocoon も Prime Cache も、ブラウザキャッシュの設定を .htaccess に書き込みます。
同じ種類のファイルに両方が有効期限を指定しているところがありますが、Apache は後に書かれたほうを使います。Cocoon のブロックは Prime Cache のブロックより後ろにあるので、重なった部分は Cocoon の値が効きます。どちらの値でも、キャッシュとしては問題なく働きます。

圧縮も両方が関わっています。
Cocoon は、Apache が返すデータを gzip で圧縮させる設定を書きます。Prime Cache は、あらかじめ圧縮して保存しておいたページをそのまま返します。
Apache は、すでに圧縮済みと印の付いたデータをもう一度は圧縮しないので、二重にはなりません。上の curl の結果は、それを確かめたものです。

遅延読み込みが二重になっても大丈夫だったのか

画像の遅延読み込みは、実は三者が関わっています。
WordPress 本体（5.5 から標準機能）、Cocoon の Lazy Load、Prime Cache の遅延読み込みです。

Cocoon の Lazy Load は、設定画面の説明にあるとおり、WordPress 標準ではカバーしきれない場所を受け持ちます。新着記事や人気記事のサムネイル、カルーセル、NO IMAGE の画像などです。
Prime Cache の遅延読み込みは、ページの先頭にある画像は遅らせません。最初に目に入る画像まで遅らせると、かえって表示が遅く見えるからです。

今回の確認では、トップページでも記事ページでも、画像の表示に問題は出ませんでした。
もし最初に見える画像だけ表示が遅れるようなら、Cocoon の「遅延読み込み」の除外欄に、その画像のファイル名の一部を入れてみてください。

Cocoon の「キャッシュ削除」は、Prime Cache のキャッシュとは別物

二つを併用すると、「キャッシュを消したのに表示が変わらない」という場面が出てきます。
原因の多くは、消すキャッシュを取り違えていることです。

Cocoon 設定にある「キャッシュ削除」で消えるのは、SNS のシェア数、人気記事、ブログカード、Amazon・楽天の商品情報など、Cocoon が自分で保存しているデータです。
Prime Cache が保存しているページそのものは、ここでは消えません。

記事を更新したときは、Prime Cache の自動パージで、関係するページのキャッシュが消えます。
ただ、Cocoon 設定の変更や、スキン・子テーマの CSS の編集は、記事の更新ではありません。こうした変更をしたあとは、管理バーの Prime Cache メニューから、すべてのキャッシュを削除してください。

おかしいと思ったら、この順番で外す

今回は崩れませんでしたが、テーマのカスタマイズや、ほかのプラグインとの組み合わせで、崩れることはありえます。
そのときは、次の順番で一つずつ試してください。

1. Cocoon の「高速化」で、CSS と JavaScript の縮小化をオフにする
2. Prime Cache の Tools 画面で、Safe を押す（控えめな設定にまとめて戻ります）
3. Prime Cache のキャッシュを削除して、ログアウトした状態でもう一度見る

縮小化を先に外すのは、テーマとプラグインの組み合わせで崩れる原因になりやすいのが、CSS と JavaScript の書き換えだからです。
ブラウザキャッシュや遅延読み込みは、表示を壊すことがほとんどないので、最後まで残してかまいません。

よく聞かれること

縮小化は、どちらか片方だけにしたほうがいいですか

今回は両方オンでも問題なかったので、そのままで大丈夫です。
ただ、表示が崩れたときに原因を探しやすいのは、片方だけにしている状態です。崩れが出たら、上の順番どおり、まず Cocoon 側の縮小化を外してください。

SWELL など、ほかのテーマでも同じですか

今回確かめたのは Cocoon 2.9.5 だけです。
ほかのテーマは、テーマ自身の高速化機能の作りが違うので、同じ結果になるとは言えません。確かめたテーマが増えたら、この記事に書き足します。

Cocoon をアップデートしたら、また確かめる必要がありますか

大きな変更がなければ、不要です。
アップデートのあとで表示がおかしくなったら、まず Prime Cache のすべてのキャッシュを削除して、ログアウトした状態で見直してください。古いページが残っているだけのことがほとんどです。

使わないほうがいい場合

Cocoon の高速化設定だけで PageSpeed の点数に満足しているなら、Prime Cache を足す必要はありません。
プラグインを増やせば、それだけ管理するものが増えます。点数が伸びない、ページキャッシュで表示を速くしたい、と感じたときに試してもらえれば十分です。

Prime Cache は WordPress.org で無料公開しています。
Prime Cache（WordPress.org）