前回の記事「CocoonでPageSpeed Insightsのスコアを改善するためにやったこと」でPageSpeed Insightsのスコアアップを図りました。
前回の最終的に一番良かったスコアは「77点」でした。
今回は「LiteSpeed Cache」というキャッシュプラグインを使って、更なるスコアアップを目指してみます。
Cocoonにはページ圧縮機能やブラウザキャッシュ機能がありますが、ページキャッシュを生成する機能がありません。それを補うためにキャッシュプラグインを導入すれば更に高速化され、スコアアップに繋がるはずです。Cocoon側でもおすすめプラグインとして紹介されています。
キャッシュプラグイン「LiteSpeed Cache」とは？
キャッシュプラグインはWordPressの高速化に有効です。なないろが利用しているカラフルボックスはLiteSpeedサーバーなので「LiteSpeed Cache」というプラグインを使います。
「LiteSpeed Cache」はLiteSpeedを採用しているサーバーで利用できます。利用することによりページの読み込み速度を大幅に改善し、WordPressの高速化が図れます。画像の最適化設定やWebP化も可能な多機能ツールです。
- ColorfulBox(カラフルボックス)
- mixhost
- ロリポップ！の「ハイスピードプラン」と「エンタープライズプラン」
- ラッコサーバー
- コアサーバー V2
- JETBOY
LiteSpeedサーバー以外では使えませんので、ApacheやNginxのサーバーを利用している方は別のキャッシュプラグインを検討してください。
LiteSpeed Cacheのインストール
インストールする前に機能が重複する他のプラグインは無効化しておきましょう。
例）WP Fastest Cacheなどのキャッシュプラグイン、EWWW Image Optimizerなどの画像圧縮プラグイン、Autoptimizeなどのコード圧縮プラグイン
WordPressの管理画面にログインして、メニューから「プラグイン」→「新規プラグインを追加」に進みます。「LiteSpeed Cache」で検索し、「今すぐインストール」をクリックしてインストールします。
インストールが終わったら有効化してください。
LiteSpeed Cacheの設定
LiteSpeed Cacheはかなり細かく設定ができます。お使いのテーマやプラグインによって設定が違ってくると思いますが、ここではなないろの設定を紹介していきます。前提として、テーマにCocoonを使用しています。
プリセットの設定
メニューから「LiteSpeed Cache」→「プリセット」に進みます。「高度」が推奨されていますが不具合が多いらしいので「基本」を選択しました。「プリセットの適用」をクリックして適用させます。
一般設定
メニューからLiteSpeed Cacheの「一般」をクリックします。「自動アップグレード」はオフのままにしておきます。LiteSpeed Cacheの一部の機能は、QUIC.cloudというサービスと連携しないと使えません。連携するためには「ドメインキーの要求」をクリックしてドメインキーを取得します。
| 設定項目 | 設定内容 |
|---|---|
| 自動アップグレード | オフ ⇒アップグレードすることで不具合が出ると嫌なのでオフ |
| ドメインキーの要求 | QUIC.cloudと連携しないと使用できない機能を使う場合にはクリック |
なお、ページの最適化はCocoonの機能で対応しているので、LiteSpeed Cacheで設定するつもりはありません。CDNも使用しません。
「ドメインキーの要求」をクリックすると、入手まで下記のように待ち時間が発生します。
しばらく待ってからページを更新(F5キー)して、自動的にドメインキーが入力されていればOKです。その下の「QUIC.cloudへのリンク」をクリックしてしまいそうですが、CDNを利用しない場合はクリックしなくてOKです。
「ゲストモード」と「ゲストの最適化」をオンにします。CDNを利用しないのでサーバーIPは空欄、通知はデフォルトのままオンにしてます。
| 設定項目 | 設定内容 |
|---|---|
| ゲストモード | オン |
| ゲストの最適化 | オン ⇒ゲストモードを強化する機能なのでゲストモードをオフにする場合はこちらもオフに |
| サーバーIP | 空欄 |
| 通知 | オン |
「ゲストモード」と「ゲストの最適化」をオンにすると、初回訪問時やBot・クローラーに対してキャッシュからデフォルトページを表示し、ページ速度が向上します。
ただ、ゲストモードを使用することによりサイトが抱えている問題が見えなくなる可能性があります。真の評価を得たい場合はゲストモードをオフにしてPageSpeed Insightsの分析をかけた方が良さそうです。
LiteSpeed Cacheの設定を調べるとオンにすることを奨められていることが多い印象ですが、個人的にはオフの状態でもスマホで50点以上は出るようにしといた方が良いと思います。
設定したら「変更を保存」をクリックします。
キャッシュの設定
キャッシュ制御の設定
メニューから「キャッシュ」をクリックし、「[1]キャッシュ」タブから設定を進めていきます。なないろは画像のように設定にしました。
| 設定項目 | 設定内容 |
|---|---|
| キャッシュを有効にする | オン |
| ログインしたユーザーをキャッシュ | オフ ⇒管理者などのログインユーザーのキャッシュなのでオフ |
| コメントをキャッシュ | オン |
| REST API をキャッシュ | オフ ⇒他のプラグインに影響を及ぼす可能性があるのでオフ |
| ログインページをキャッシュ | オフ ⇒パフォーマンスに悪影響が与える可能性があるのでオフ |
| PHP リソースをキャッシュ | オン |
| モバイルをキャッシュ | オフ ⇒Cocoonはオフで良さそうです。レスポンシブ非対応の場合はオンが良いかも。オン・オフ切り替えてスマホの表示が崩れないか必ず確認してください |
「モバイルをキャッシュ」より下の設定はデフォルトのままでOKです。設定したら「変更を保存」をクリックします。
パージ設定
「[3]パージ」タブをクリックしてパージについての設定をしていきます。パージとはキャッシュをクリアすることです。なないろは画像のように設定しました。
| 設定項目 | 設定内容 |
|---|---|
| アップグレード時にすべてをパージする | オン ⇒WordPress、テーマ、プラグインが更新された時に自動的にパージされます。オフだと古いキャッシュのままで変更が反映されない可能性があります |
| 公開 / 更新の自動パージルール | 全てにチェックを入れる ⇒自動でパージされるところとされないところがあるとややこしいので全てパージされるようにしておきます |
| 古いものを出す | オフ ⇒古いコンテンツを提供する場合があるらしいのでオフ |
「古いものを出す」より下の項目はデフォルトのままでOKです。設定後は「変更を保存」をクリックしてください。
ブラウザのキャッシュ設定
「[7]ブラウザー」タブをクリックしてブラウザーの設定をします。「ブラウザキャッシュ」が「オン」になっているか確認してください。デフォルトでオンのはずですが、もしもオフだったらオンにしておきましょう。
| 設定項目 | 設定内容 |
|---|---|
| ブラウザキャッシュ | オン |
| ブラウザキャッシュTTL | デフォルトのまま |
画像の最適化
画像の最適化を設定すると自動で画像の最適化&WebP化をしてくれます。この機能を利用するにはQUIC.cloudと連携している必要があります。他のプラグインで画像の最適化を行う場合は、この機能をオフにしましょう。
メニューから「画像の最適化」をクリックし、「[2]画像最適化設定」タブをクリックします。なないろは画像のように設定しました。長いので2つに分けます。
| 設定項目 | 設定内容 |
|---|---|
| 自動要求 Cron | オン ⇒アップロードした画像の最適化を自動で行います |
| 自動戻し Cron | オン ⇒最適化された画像をQUIC.cloudサーバーから自動で取得します |
| オリジナル画像の最適化 | オン ⇒画像を最適化してオリジナルをバックアップ保存します |
| オリジナルバックアップを削除する | オフ ⇒オリジナル画像を残したいのでオフ |
| 可逆最適化 | オフ ⇒オンにすると画質が上がりますが画像サイズが大きくなるのでオフ |
| EXIF / XMPデータを保存する | オフ ⇒カメラの機種や撮影日時や位置情報などの画像情報は必要ないのでオフ |
| WebP画像への置換 | オン ⇒画像をWebP化してくれます |
続きの設定です。
| 設定項目 | 設定内容 |
|---|---|
| WebP属性を置換する | デフォルトのまま |
| WebPの特別な srcset | オフ ⇒WordPressを通じて生成された画像以外のsrcset要素のWebP化をしたい場合はオンにする |
| WordPress画像品質管理 | デフォルトのまま(82) |
設定したら「変更を保存」をクリックしてください。
ページの最適化
ページの最適化ではCSSやJavaScriptの圧縮ができます。
CSS設定
CSSの圧縮や結合が可能ですが、表示崩れが多いようなので基本的に全てオフに設定するのがおすすめです。もしオンにする場合は表示崩れがないかPC/スマホで確認しながら設定してください。また、テーマやプラグインで機能が重複しないようにしてください。なないろはCocoonの機能でCSS圧縮しています。
メニューから「ページの最適化」をクリックし、「[1]CSS設定」タブから設定していきます。設定は画像の通りです。長いので2つにわけます。
| 設定項目 | 設定内容 |
|---|---|
| CSS圧縮化 | オフ |
| CSS結合 | オフ |
| UCSSを生成する | オフ |
| UCSSインライン | オフ |
| CSSの外部とインラインを組み合わせる | オフ |
続きの設定です。
| 設定項目 | 設定内容 |
|---|---|
| CSSを非同期読み込み | オフ |
| URLごとのCCSS | オフ |
| インラインCSS非同期ライブラリ | オフ |
| フォント表示の最適化 | Swap ⇒Swapにしておくとフォントの読み込み完了するまで代替フォントが表示されます |
設定したら「変更を保存」をクリックしてください。
JS設定
JavaScriptの圧縮や結合・遅延読み込みが可能ですが、やはり表示崩れが多いようなので基本的にオフがおすすめです。オンにする場合はPC/スマホで確認しながら設定してください。また、テーマやプラグインで機能が重複しないようにしてください。なないろはCocoonの機能とFlying ScriptsでJavaScriptの圧縮と遅延読み込みをしています。
「[2]JS設定」タブから画像のように設定しました。
| 設定項目 | 設定内容 |
|---|---|
| JS圧縮化 | オフ |
| JS結合 | オフ |
| JSは外部とインラインを組み合わせる | オフ |
| JSを遅延読み込み | オフ |
設定後は「変更を保存」をクリックします。
HTMLの設定
HTMLの圧縮もオンにすると表示崩れが起きることがあるので、確認しながら設定してください。
「[3]HTMLの設定」タブから画像のように設定しました。長いので2つに分けます。
| 設定項目 | 設定内容 |
|---|---|
| HTML圧縮化 | オン ⇒他の機能と競合しておらず、表示崩れもなかったのでオンにしました |
| DNSプリフェッチ | 空欄 |
| DNSプリフェッチ制御 | オフ ⇒DNSプリフェッチはCocoonの事前読み込み設定と機能がかぶるのでオフ |
| DNSプリコネクト | 空欄 |
| HTML Lazy Load セレクタ | 空欄 |
続きの設定です。
| 設定項目 | 設定内容 |
|---|---|
| HTML Keep Comments | 空欄 |
| クエリ文字列を削除 | オフ |
| Googleフォントを非同期に読み込む | オフ ⇒Cocoonの高速化設定で非同期読み込みにしているのでオフ |
| Googleフォントを削除 | オフ |
| WordPress絵文字を削除 | オン ⇒絵文字は使わないのでオン |
| Noscriptタグの削除 | オフ |
設定後は「変更を保存」をクリックしてください。
その他の設定
キャッシュの設定には他に「メディア設定」「VPI」「除外するメディア」「ローカリゼーション」「チューニング」「チューニング-CSS」の設定ができますが、なないろはこれらは全てデフォルトのままにしています。
「メディア設定」では画像の遅延読み込みができますが、Cocoonで既に対応しているので使いません。
「ローカリゼーション」ではコメント欄のキャッシュを設定できるので、コメント欄を設置している場合はオンにしても良いと思います。
データベースの設定
データベースの設定をしていきます。ここで出てくる「リビジョン」とはデータベースに保存されている記事の編集履歴のことです。下書きを保存、記事を公開、記事を更新した時にリビジョンはバックアップのように自動的に保存されていきます。
復元したい時などには便利ですが、数がたまっていくとデータベースを圧迫していきます。データベースサイズが大きくなるとサイトの表示速度が遅くなってしまうので、リビジョンは定期的に削除することをおすすめします。
DB最適化設定
メニューから「データベース」をクリックして、「[2]DB最適化設定」タブをクリックしてください。「リビジョンの最大数」を「10」にします。リビジョンの最大数とは、リビジョンを消去する際に指定した数だけ最新のリビジョンを保持してくれます。必要ない場合は「0」で構いません。設定したら「変更を保存」をクリックします。
| 設定項目 | 設定内容 |
|---|---|
| リビジョンの最大数 | 10 ⇒必要なら10前後程度で、必要なければ0 |
| リビジョンの最大エイジ | 0 |
管理
「[1]管理」タブをクリックします。ここでリビジョンなどの削除を行います。自動では削除されませんので定期的にここから手動で削除してください。「すべてを消去」で問題ありませんが、個別に消去することもできます。「投稿のリビジョン」がたまるとエディターが重くなる原因になります。
クローラーの設定
LiteSpeed Cacheのクローラーはキャッシュを事前に作成・更新することで訪問者に高速でページを表示させてくれます。
メニューから「クローラー」をクリックし、「[4]一般設定」タブをクリックして「クローラー」を「オン」にしてください。
| 設定項目 | 設定内容 |
|---|---|
| クローラー | オン |
それ以外の設定はデフォルトのままでOKなので「変更を保存」をクリックします。
パージ(キャッシュクリア)のやり方
設定をカスタマイズした後や、不具合が出た時はLiteSpeed Cacheでパージ(キャッシュクリア)をしてみましょう。
管理画面の上部にあるアイコンにマウスオーバーして、「すべてをパージする」をクリックすればキャッシュクリアできます。
PageSpeed Insightsの結果
LiteSpeed Cacheの設定が完了したら一度パージして、不具合がないことなどを確認し、PageSpeed Insightsの分析にかけてみました。前回は77点でした。結果は…
大して変わってないにゃ！！！！
僅かにアップして「80点」でした。ゲストモードをオフにした場合でも「73点」で、PageSpeed Insightsのスコア的にはLiteSpeed Cacheの効果はさほど感じられない結果となりました。
まとめ
PageSpeed Insightsのスコア改善は前回までの対策で十分だったのかもしれません。が、リビジョンの削除など他で代替できるプラグインを入れてない部分もあるので、このまま使ってみます。不具合が出たりやっぱり不要かなと思ったら削除するかもしれません。
ネガティブなまとめになってそうですが、決して不要なプラグインと言いたいわけではありません。複数のプラグインの機能を備えているので、これ一つをインストールすれば事足りるのはとても魅力的だと思います。
