CocoonでLiteSpeed Cacheを最大限活用する設定について

けーちゃん

こんにちは。管理人のけーちゃんです。

mixhost等で採用されているLiteSpeedサーバーの性能を最大限に発揮するために、LiteSpeed Cacheは欠かせないWordPressプラグインです。

しかし安易にLiteSpeed Cacheの設定を行うとWebページのレイアウト崩れなどの問題を引き起こす原因になります。

さらに厄介なのが、テーマごとに最適な設定を探す必要があります。あるテーマでは有効でも、異なるテーマでは問題解決にならないのです。

そこで今回は、WordPressの無料テーマとして人気があるCocoonで、LiteSpeed Cacheプラグインの性能を最大限に発揮できる設定についてお伝えします。

＼目次も見てね！／

競合プラグインを停止する

LiteSpeed Cacheと機能が重複するプラグインはレイアウトが崩れるなどの不具合が出る可能性があるので停止させておきます。

重複するのは、次の機能です。

• 画像最適化/画像遅延読み込み機能
  EWWW Image Optimizer
  TinyPNG
  Smush
  ShortPixel Image Optimizer
  Imagify
  等
  
• HTML/CCS/JavaScript最適化（圧縮）機能
  Autoptimize
  Fast Velocity Minify
  Better WordPress Minify
  等
  
• キャッシュ機能
  WP Super Cache
  W3 Total Cache
  WP Rocket
  Cache Enabler
  Hyper Cache
  Swift Performance
  Breeze
  WP-Optimize
  等

けーちゃん

特にキャッシュ系プラグインは不具合の原因なので確実に停止させましょう

Cocoonの競合機能を停止する

Cocoonの一部の機能もLiteSpeed Cacheと重複します。Cocoon側の重複機能を停止しましょう。

Cocoon側で重複するのはサイト高速化に関する機能です。Cocoonのメニューから『高速化』を選択してサイト高速化画面を開きます。

サイト高速化画面内の全てのチェックボックスから、チェックを外します。

事前読み込み設定は、そのまま残しても問題ありません。

変更したら『変更を保存』ボタンを押して、変更内容を適用します。

けーちゃん

Cocoonは独自のキャッシュ機能がありますが、LiteSpeed Cacheのキャッシュ機能とは用途が異なるので停止しなくても問題ありません。

LiteSpeed Cacheの初期設定

次にLiteSpeed Cacheの設定を行いますが、まずはテーマの種類に関係なくレイアウト崩れが起こりにくい設定を適用します。

ここでは簡単に手順のみを紹介します。詳しくは次の記事で詳しく紹介しているので、疑問等あったら次のリンク先を確認してください。

けーちゃん

上記のリンク先でCDN化の紹介をしていますが、CDN化は全ての設定が完了してから行います。ここでは画像最適化まで行いましょう。

Cocoon向けCSS最適化設定

次にCocoon向けのCSS最適化設定を行います。次の表に従って設定してください。

『CSSを非同期読み込み』をオンにすると、ファーストビュー（最初にブラウザ表示される範囲）で使用されているCSS定義がWebページ内に埋め込まれます。そしてファーストビュー表示後に、残りのCSS定義が読み込まれます。これにより、これにより閲覧者の体感でのページ表示速度が高速化されます。

『UCSS を生成する』をオンにすると、Webページ内で使用していないCSS定義が削除されます。一般的にはテーマが用意したCSS定義のうち、使用するのは数パーセントのみです。そのため、UCSSを生成することで読み込み速度を大幅に高速化できます。

今回の設定では『UCSS インライン』のみオフですがオンでも問題ありません。オフの場合は、CCSSによるファーストビュー表示後にUCSSが読み込まれます。ページ表示速度が高速化とムダなCSS読み込みを回避できます。

オンの場合、CCSSの代わりにUCSSがWebページ内に埋め込まれます。UCSSはCCSSと同じ内容を含んでいるため、ムダな読み込みと捉えることができます。ファーストビュー表示が遅くなりますが、ムダな読み込みを回避できます。

けーちゃん

オンとオフのどちらが正しい、という話ではないので好みで選択してください

なお『UCSS を生成する』がオンのとき、Cocoonはページ表示に不具合が発生します。

専門的な話になりますが、UCSSはJavaScriptで動的に追加したIDやクラスを抜き出すことができません。

Cocoonはモバイル向けのサイドバーやカルーセルなどを動的に操作しています。そのため表示されなかったり、レイアウトが崩れるなどの不具合がおこります。

この問題は、ページ最適化の[9] チューニングタブにある『UCSS セレクターの許可リスト』に下記の内容を記述することで解消できます。

#slide-in-sidebar
.carousel*
.slick-*
.cf
.scroll-hint*
#baguetteBox*
.lity*
.lightbox
.lb-*
.hljs*

各行の対象となるCocoonの機能は次の表のようになっています。

けーちゃん

これ以外にもあるかもしれません

また、Cocoonはスキン毎に独自JavaScriptを使用できるようになっています。そのため、スキン単位での不具合がおこる可能性があります。

次の表は独自JavaScriptで動的にIDとクラスを操作しているスキンと関連セレクターです。対象スキンを使用している場合は、セレクターの内容を『UCSS セレクターの許可リスト』に追加してください。

けーちゃん

こちらも漏れがある可能性があります。

CCSSとUCSSの生成

CCSSとUCSSは、非ログイン状態でWebページを表示後に自動で生成されます。つまり初回表示時は、CCSSとUCSSが使用されません。

そのため記事作成後はWordPressからログアウトするか、異なる種類のブラウザでページを表示した後、[1] CSS設定タグ内に現れる『手動で実行』ボタンを押して、CCSSとUCSSを生成してください。

けーちゃん

自動で生成されますが、手動の方が速いです。

CCSSとUCSS生成後にブラウザでWebページを再表示します。ただし、ブラウザキャッシュが有効になっているため、強制リロード（スーパーリロード）でキャッシュを無効にして表示する必要があります。

強制リロードについては、次の外部記事を参考にしてください。

ブラウザのキャッシュを無効にしてWebページを表示する方法 ｜ けーちゃんの個人サイト

ブラウザはWebサーバーから取得したWebページのデータを一時的にパソコン内に保存しています。 そしてある一定期間内に同じページの呼び出しがあったら、そちらを使用します。 つまり、その時間内はWebページの内容に変更があ …

affi-sapo.com

まとめ

ここではWordPressテーマのCocoon上でLiteSpeed Cacheプラグインを最大限活用する設定方法についてお伝えしました。

具体的にはCocoonとLiteSpeed Cacheプラグインで重複する機能を、Cocoon側で無効化します。

次に別ページで紹介している方法で、LiteSpeed Cacheプラグイン側で不具合が出にくい設定を行います。

次にCocoonの特性を考慮したCSS最適化設定を行います。

ここまで完了すれば、LiteSpeed Cacheプラグインを最大限活用したと言えます。さらにチューニングすることも可能ですが、不具合がおこる可能性が多く、それに比例して対処に必要な時間や知識が増えます。上手く問題を解決できても大きな効果を期待できないので、ほどほどで妥協するのが一番です。

LiteSpeed Cacheプラグイン設定が終わって問題が無いことを確認で来たら、次はCDN化を検討してください。LiteSpeed CacheプラグインはQUIC.cloudとの連携を前提として開発されています。そのため、比較的ですが容易にCDN化できます。詳しくは次のページを読んでみてください。