今回は、コクーン（Cocoon）標準の「高速化設定」と高速化プラグイン・レンタルサーバーの競合回避について紹介します。
プラグインを追加しなくても高速化設定を行えるため、とても優秀なテーマと言えます。
しかし、高速化プラグインやレンタルサーバーの高速化機能と併用されている方も多いです。
ですが、
- 同じ処理が重複して逆に遅くなったり
- 表示が崩れたり
と、「競合」によるトラブルが発生することがあります。
そこで、当記事では、コクーン標準の高速化設定の使い方から、高速化プラグインやレンタルサーバー機能との正しい共存方法まで、初心者の方にもわかるように詳しく解説します。
コクーンを使ったWebサイトを安全に高速化したい方は、ぜひ参考にしてください。
コクーン標準の高速化設定
コクーンの高速化設定は、WordPress管理画面から簡単にアクセスできます。
「Cocoon設定」→「高速化」
と画面を移動してください。
高速化設定には、主に以下の4つのセクションがあります。
それぞれ順番に確認していきましょう。
①、ブラウザキャッシュの有効化
ブラウザキャッシュとは、一度読み込んだCSS・JavaScript・画像などのファイルをブラウザに一時保存する機能です。
それにより、2回目以降のアクセス時に再ダウンロードしなくて済むようにする仕組みです。
.htaccessファイルにキャッシュの有効期限が書き込まれ、リピーターのページ表示速度が大幅に向上します。
この設定を有効にすると.htaccessファイルが自動的に編集されます。
ただ、他のプラグインやサーバー側の機能でも.htaccessにブラウザキャッシュのルールが書き込まれていると、競合の原因になるため、注意が必要です（詳しくは後述します）。
②、縮小化（HTML・CSS・JavaScript）
縮小化（Minify）とは、コードの中の余計な改行・スペース・コメントなどを自動的に削除して、ファイルサイズを軽くする処理です。
以下の3項目にチェックを入れることで、それぞれのファイルが縮小化されます。
- HTMLを縮小化する
- CSSを縮小化する
- JavaScriptを縮小化する
コクーンの縮小化機能は、既存のファイルをその場で処理するシンプルな仕組みです。
他のプラグイン（Autoptimizeなど）のように「新しいファイルを生成して読み込みを差し替える」方式ではないため、比較的不具合が起きにくいのが特徴です。
③、遅延読み込み（Lazy Load）
Lazy Load（レイジーロード）とは、ページ表示時に画面外にある画像の読み込みを後回しにして、ユーザーがスクロールして表示領域に入ったタイミングで読み込む仕組みです。
コクーンのLazy Loadはこれとは異なるJavaScriptベースの実装です。
環境によってはコクーンのLazy Loadを有効にすることでスコアが下がるケースも報告されているため、PageSpeed Insightsで効果を確認しながら設定するのがおすすめです。
④、Googleフォントの非同期読み込み
Googleフォントフォントを非同期で読み込む設定です。
非同期読み込みにすることで、Googleフォントの読み込みがページの表示をブロックしなくなります。
非同期読み込みを有効にすると、フォントの読み込みが完了するまでの一瞬、ローカルフォント（デフォルトフォント）が表示される「FOUT（Flash of Unstyled Text）」と呼ばれるチラつきが発生することがあります。
気になる場合はチェックを外してください。
おすすめの設定まとめ
【コクーン高速化のおすすめ設定】
- ✓ ブラウザキャッシュの有効化
- ✓ CSSを縮小化する
- ✓ JavaScriptを縮小化する
- ✓ WEBフォント（β版）の非同期読み込みを有効にする
※Lazy LoadとGoogleフォントの非同期読み込みは、環境に応じてPageSpeed Insightsのスコアを確認しながら判断してください。
設定が完了したら、ページ下部の「変更をまとめて保存」ボタンをクリックしてください。
高速化プラグインとの競合と回避方法
コクーンの高速化設定と同じ処理を行うプラグインを併用すると、機能の重複（競合）が発生します。
最悪の場合、サイトの表示が崩れたり、逆に速度が低下する原因になります。
競合しやすいと言われているプラグインをまとめておくので、高速化プラグインを利用される場合には参考にしてください。
競合しやすいプラグインと対処法
対処法：Cocoonの縮小化機能とAutoptimizeの縮小化機能はどちらか一方だけを有効にしてください。両方を有効にすると二重に縮小処理が走り、表示崩れやJavaScriptのエラーが発生する可能性があります。
コクーンの縮小化だけで十分な場合がほとんどなので、基本的にはAutoptimizeは不要です。
対処法：WP Fastest Cacheはページキャッシュ機能に特化して使い、HTML・CSS縮小化やブラウザキャッシュの設定はコクーン側で行うのがおすすめです。
WP Fastest Cacheの設定画面で「HTMLを縮小」「CSSを縮小」「CSSを統合」「JSを統合」はオフにするのが安全です。
「Gzip」「ブラウザキャッシュ」はコクーン側と重複する場合があるため、どちらか一方に統一してください。
対処法：LiteSpeed Cacheでページキャッシュと縮小化の両方を行っている場合は、コクーン側の縮小化とブラウザキャッシュ、Lazy Loadはすべてオフにしてください。
LiteSpeed Cacheに縮小化機能がない（または使わない）場合のみ、コクーン側の縮小化を有効にします。
対処法：EWWW Image OptimizerのLazy Load機能を有効にする場合は、コクーンのLazy Loadをオフにしてください。
両方を有効にすると画像が二重に遅延処理されて、画像が全く表示されなくなるケースがあります。
EWWW Image Optimizerの画像圧縮・WebP変換機能はコクーンの機能と競合しないため、そのまま併用できます。
競合回避の鉄則
同じ処理は必ず1か所だけで行うのが鉄則です。
- ブラウザキャッシュ → コクーン または プラグイン または サーバー、のいずれか1つ
- CSS・JS縮小化 → コクーン または プラグイン、のいずれか1つ
- 画像のLazy Load → コクーン または プラグイン または ブラウザネイティブ、のいずれか1つ
複数箇所で同じ処理が走ると、二重処理によるエラーや.htaccessの記述衝突が起きます。
レンタルサーバーの高速化機能との競合と回避方法
最近のレンタルサーバーには、サーバー側で高速化を行う機能が搭載されています。
これらもコクーンの高速化設定と競合する可能性があります。
エックスサーバーの場合
エックスサーバーには、サーバーパネルに以下の高速化機能があります。
- Xアクセラレータ：サイトの高速化と同時アクセス数の拡張（Ver.2推奨）
- サーバーキャッシュ設定：サーバー側でページデータをキャッシュ
- ブラウザキャッシュ設定：ブラウザにリソースを保存
- Xアクセラレータ：Ver.2を有効
- サーバーキャッシュ：有効
- ブラウザキャッシュ：有効（この場合、コクーンのブラウザキャッシュはオフにする）
- コクーン側の縮小化：有効（サーバー側に縮小化機能はないため）
エックスサーバーのブラウザキャッシュ機能とコクーンのブラウザキャッシュ機能はどちらもhtaccessに書き込む仕組みです。
両方を有効にすると記述が競合する可能性があるため、サーバー側のブラウザキャッシュを優先し、コクーン側はオフにするのが安全です。
ConoHa WINGの場合
ConoHa WINGには、以下の高速化機能があります。
- コンテンツキャッシュ：ページ全体のサーバーキャッシュ
- ブラウザキャッシュ：ブラウザにリソースを保存
- WEXAL（ウェクサル）：AI搭載の高速化エンジン（上位プラン等で利用可能）
- コンテンツキャッシュ：有効
- ブラウザキャッシュ：有効（コクーンのブラウザキャッシュはオフ）
- WEXALを使う場合：コクーンの高速化設定は基本的にすべてオフ（WEXALがCSS・JSの最適化も行うため）
- WEXALを使わない場合：コクーンの縮小化は有効
LiteSpeed搭載サーバーの場合（ロリポップ、mixhost、ラッコサーバーなど）
LiteSpeedウェブサーバーを採用しているサーバーでは、専用プラグイン「LiteSpeed Cache」を使うことで、サーバーレベルのキャッシュ機能を最大限に活用できます。
- LiteSpeed Cacheのページキャッシュ：有効
- LiteSpeed Cacheの縮小化・遅延読み込みを使う場合：コクーン側の縮小化・Lazy Loadはすべてオフ
- LiteSpeed Cacheの縮小化を使わない場合：コクーンの縮小化は有効
- コクーンのブラウザキャッシュ：オフ（LiteSpeed Cache側で管理）
コクーン＋プラグイン＋サーバーの役割分担早見表
- CSS・JS・HTMLの縮小化
- Webフォントの非同期読み込み
- ページキャッシュ
- 画像圧縮・WebP変換
- JS遅延読み込み
- ブラウザキャッシュ
- サーバーキャッシュ
- Gzip圧縮
高速化設定以外にも効果のある施策
コクーンの高速化設定だけでなく、以下の施策も表示速度の改善に効果があります。
コクーンのアクセス集計を無効にする
コクーンにはアクセス集計機能があります。
便利な機能ですが、サーバーに負荷がかかるため、速度を重視する場合は無効にしてGoogleアナリティクスで代用するのがおすすめです。
「Cocoon設定」→「アクセス集計」で
「アクセス集計の有効化」のチェックを外します。
不要なプラグインを削減する
使っていないプラグインは「無効化」だけでなく「削除」まで行いましょう。
コクーンの機能で代用できるプラグイン（SEO系、目次生成、SNSボタンなど）も多いので見直してみてください。
画像を最適化する
画像の圧縮やWebP形式への変換も、表示速度の改善に大きく貢献します。
EWWW Image Optimizerなどのプラグインを使って、アップロード時に自動圧縮する仕組みにしておくと便利です。
スキンの選択に注意する
コクーンのスキンの中には、アニメーションなどの演出が含まれるものがあります。
アニメーションはサイトスピードを低下させる要因になるため、速度を重視する場合はシンプルなスキンを選ぶか、スキンを使用しないのも選択肢です。
設定変更時の注意点
高速化設定時に注意すべきポイントも、一覧でまとめておきます。
- 設定変更後はキャッシュを削除する：コクーン設定画面の「キャッシュ削除」ボタンを押し、プラグインやサーバー側のキャッシュもクリアしてから効果を確認してください。
- 一度に複数の設定を変えない：1項目ずつ変更→保存→スコア確認、を繰り返すことで、どの設定が効果的かを特定できます。
- PageSpeed Insightsのスコアは変動する：同じ状態でも計測タイミングで数値が前後します。2〜3回計測して判断しましょう。
- 表示崩れが起きたら落ち着いて対処する：直前に変更した設定を元に戻し、キャッシュを削除すれば復旧できます。
- スコアに執着しすぎない：コクーン開発者のわいひら氏も「大事なのはサイトの内容。スコアにこだわるよりコンテンツに注力するのが正しい時間の使い方」と述べています。
最後に
今回は、コクーン（Cocoon）標準の「高速化設定」と高速化プラグイン・レンタルサーバーの競合回避について紹介しました。
そのため、プラグインなしでも十分な高速化効果が得られます。
また、高速化プラグインやレンタルサーバーの機能を併用する場合は、
「同じ処理は1か所だけで行う」という鉄則を守り、機能の重複を避けることが重要です。
さらに、設定を変更したらPageSpeed Insightsでスコアを確認しつつ、無理のない範囲で高速化に取り組んでみてください。
当記事を参考に、コクーンサイトの表示速度改善にお役立てください。
コメント