≫LINEにてブログ無料相談OKです。

【解説】LiteSpeed Cacheの設定方法と使い方。誰でも簡単に高速化が可能!

はじめ

  • LiteSpeed Cacheの設定が全く意味不明!
  • LiteSpeed Cacheの設定方法と使い方が知りたい!

本記事では、上記の疑問にお答えしていきます。

「LiteSpeed Cache」の設定が複雑でプラグインの使用を躊躇している方も多いのでは?

実際に私はmixhostWordPressの高速化の施策は「LiteSpeed Cache」のみでPageSpeed Insightsの点数は以下の通りです。

当ブログ(ツヨシウェブ)がモバイル71点、PC96点です。

私の運営する別のブログはモバイル91点、PC96点です。

こんな感じで、LiteSpeed Cacheを使えば、私のようにプログラミングの知識がない方でも簡単に高速化することができます。

1. LiteSpeed Cacheの設定方法。誰でも簡単に高速化が可能!

さて、早速ですがLiteSpeed Cacheの設定方法について解説していきます。

LiteSpeed Cacheの設定方法
  1. LiteSpeed Cacheをインストール
  2. 「高度なオプションを表示」を選択
  3. LiteSpeed Cacheの各種設定
  4. 画像の最適化リクエストを行う

それでは、具体的に一つずつ解説していきますね。

注意

ちなみに、キャッシュプラグイン「LiteSpeed Cache」は、WEBサーバーに「LiteSpeed」を採用しているレンタルサーバーでないと利用することができません。

対応サーバーは、mixhost・ColorfulBox・FUTOKA・JETBOYです。

 

1-1. LiteSpeed Cacheをインストール

まずは、「LiteSpeed Cache」をインストールし、有効化しましょう。

 

1-2. 高度なオプションを表示を選択

有効化したら、Wordpress管理画面の左側のメニューから「LiteSpeed Cache→設定」を選択します。

 

画面右上に表示されている「高度なオプションを表示」を選択します。

すると、設定のタブが4個から12個に増えます。

 

1-3. LiteSpeed Cacheの各種設定

以下のLiteSpeed Cacheの設定項目を変更していきます。

LiteSpeed Cacheの設定項目
  1. 「全般」の設定
  2. 「キャッシュ」の設定
  3. 「最適化」の設定
  4. 「チューニング」の設定
  5. 「メディア」の設定
  6. 「高度」の設定

この他の項目は、デフォルト設定のままでOKです。

注意

ちなみに、今回紹介するLiteSpeed Cacheの設定項目は実際に私が行っている内容です。

場合によっては要らない機能もあるかと思いますので、あとはお好みでカスタマイズしてみてください。

参考:LiteSpeed Cache for WordPress Settings
参考:WordPressでLiteSpeed Cacheを使用して高速化する方法

 

「全般」の設定

まずは、全般の設定です。

以下のように設定しましょう。

 

LiteSpeed Cache を有効にする:有効

自動アップグレード:オフ(お好み)

他の箇所はデフォルトのままでOKです。

 

「キャッシュ」の設定

次に「キャッシュ」の設定です。

以下のように設定しましょう。

 

ログインページをキャッシュ:オフ

モバイルをキャッシュ:オフ(デフォルト)

その他の項目は全てデフォルト(オン)のままでOKです。

 

「最適化」の設定

次に最適化の設定です。

ここが一番重要な設定であり、Wordpressのテンプレートによってはデザイン・表示が崩れてしまう可能性もあります。

なので、各々でチューニングが必要な項目です。

また、コード(HTML/CSS/JS)の最適化プラグイン「Autoptimize」などをインストールしている場合、重複してしまう項目でもあります。

※ちなみに、私はAutoptimizeを使っておらず、コードの最適化も全てLiteSpeed Cacheのみです。

さて、「最適化」の設定は以下の通りです。

 

CSS 圧縮化:オン

「Autoptimize」重複部分です。また、テンプレートのデザインが崩れる・正常に表示されない場合があります。

CSS 結合:オン

同じく「Autoptimize」重複部分です。また、テンプレートのデザインが崩れる・正常に表示されない場合があります。

CSS HTTP/2 プッシュ:オン

JS 圧縮化:オン

同じく「Autoptimize」重複部分です。また、テンプレートのデザインが崩れる・正常に表示されない場合があります。

JS 結合:オン

同じく「Autoptimize」重複部分です。また、テンプレートのデザインが崩れる・正常に表示されない場合があります。

JS HTTP/2 プッシュ:オン

HTML 圧縮化:オン

同じく「Autoptimize」重複部分です。また、テンプレートのデザインが崩れる・正常に表示されない場合があります。

インライン CSS の圧縮:オン

同じく「Autoptimize」重複部分です。また、テンプレートのデザインが崩れる・正常に表示されない場合があります。

インライン JS の圧縮:オン

同じく「Autoptimize」重複部分です。また、テンプレートのデザインが崩れる・正常に表示されない場合があります。

CSSを非同期ロード:オン

OPEN CEGEのテンプレートの場合、CSSの非同期ロードを「オン」にすると読み込み時に表示が崩れ、その後正常に表示されるという現象が発生します。

そのため、オンにする場合は次の設定「チューニング」でテーマのCSSを除外する設定が必要です。

その作業が面倒な方は、CSSの非同期ロードを「オフ」にしましょう。

JS Deferredをロード:オン

JQueryを除外する:オン

コメントを削除します:オン

注意

表示が崩れる方でかつ次の設定でチューニングできない方は、LiteSpeed Cacheでコードの最適化の設定はおこなわあず「Autoptimize」を導入することをおすすめします。

Autoptimizeを導入する方は、以下の項目を「オフ」にしておきましょう。

  • CSS 圧縮化:オフ
  • CSS 結合:オフ
  • JS 圧縮化:オフ
  • HTML 圧縮化:オフ
  • インライン CSS の圧縮:オフ
  • インライン JS の圧縮:オフ
  • CSSを非同期ロード:オフ

 

「チューニング」の設定

次に「チューニング」の設定です。

ここでは、そういったhtml/CSS/JSの圧縮・結合等で崩れた表示をチューニングする項目です。

 

CSS 結合の優先度:オン

CSS除外:表示が崩れる原因のCSSのURLを記載

ちなみに、OPNECAGEの「スワロー」の場合は、以下のCSSのURLを記載しましょう。

コード
/wp-content/themes/yswallow/style.css
/wp-content/themes/yswallow/library/css/remodal.css
/wp-content/themes/yswallow/library/css/block-style.css

JS 結合の優先度:オン

JS 除外:表示が崩れる原因のJSのURLを記載

ちなみに、OPNECAGEの「スワロー」の場合は記載はしなくてOKです。

クエリ文字列を削除:オン

Google フォントを非同期に読み込む:オン

その他はデフォルトのままでOKです。

 

「メディア」の設定

次にメディア設定です。

 

画像 遅延読み込み:オン(お好み)

プラグイン「lazy load」をインストールしているのであれば、重複する項目です。

ただし、LiteSpeedの遅延読み込みはとても味気ない効果なので、アニメーションをCSSで改良するのがおすすめです。

以下のコードをCSSに入力することで、フェードイン効果を追加することができるのでおすすめです。

コード
/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{opacity: 0;}
/* PART 2 - Upon Lazy Load */
img.loaded{-webkit-transition: opacity .5s linear 0.2s;-moz-transition: opacity .5s linear 0.2s;transition: opacity .5s linear 0.2s;opacity: 1;}
ちなみに画像読み込み遅延は、PageSpeed Insightsにて点数を上げる要素ですが、私は使用していません。

Iframes 遅延読み込み:オン

インラインレイジーロードイメージライブラリ:オン

自動的に最適化する:オン

WebP のバージョンを最適化する:オン

プラグイン「EWWW Image Optimizer」でWebP変換を使用している方は、重複する項目です。

WebP 画像への置換:オン

プラグイン「EWWW Image Optimizer」でWebP変換を使用している方は、重複する項目です。

その他の項目はデフォルトのままでOKです。

 

「高度」の設定

最後に「高度」の設定です。

ここでの設定はブラウザキャッシュの設定のみです。

 

ブラウザキャッシュ:オン

その他はデフォルトのままでOKです。

以上で、私が推奨するLiteSpeed Cacheの設定は完了です。

 

1-4. 画像の最適化リクエストを行う

次にLiteSpeed Cacheの画像の最適化(圧縮・WebP変換)の設定を行います。

画像の最適化を行うことによって、ページ表示速度の改善につながりますよ。

画像の最適化の手順は以下の通りです。

画像の最適化の手順
  1. 「LiteSpeed Cache→画像の最適化」を選択
  2. 「最適化のリクエスト」を選択
  3. レベル3を越えると全ての画像が自動で最適化

 

「LiteSpeed Cache→画像の最適化」を選択

WordPress管理画面の左側のメニューから「LiteSpeed Cache→画像の最適化」を選択します。

 

「最適化のリクエスト」を選択

すると、以下の画像のように「最適化のリクエスト」というボタンリンクが表示されていますので、こちらをクリックします。

最適化のリクエストを選択するとWEBサーバーに画像が送られ最適化が始まります。

 

レベル3を越えると全ての画像が自動で最適化

少し時間を置くと、「レベル1」と言う表示になっており、再び「最適リクエストを送信」が選択できるようになっていますので、再度クリックします。

この作業を1~5回程度行いましょう。

すると、レベル1→レベル2→レベル3と上がっていきます。

そして、レベル3以上になると、自動的に画像が最適化されるようになります。

 

画像の最適化の確認

LiteSpeedの画像の最適化情報は、「メディア→ライブラリ」で確認することができます。

 

以下のようにLiteSpeedの画像最適化情報を確認することができます。

 

2. LiteSpeed Cacheの使い方(キャッシュの削除・データベース最適化)

続いて、LiteSpeed Cacheの使い方(キャッシュの削除・データベース最適化)について解説していきます。

 

2-1. キャッシュの削除方法

LiteSpeed Cache(キャッシュプラグイン)を導入している場合、ブログのデザインを変更した時や、正常にブログが表示されていない場合はキャッシュの削除する必要があります。

手順ですが、まず「LiteSpeed Cache→管理」を選択します。

 

すると、以下のようにキャッシュを削除する項目(パージ)が表示されます。

 

この中でよく使うのは以下の3つです。

フロントページをパージする

記事を新しく追加投稿した場合など

ページをパージする

特定の記事を追記・編集して更新した場合など

すべてをパージする

ブログのデザイン・CSSなどをカスタマイズした場合など

キャッシュ削除についてわからない方は、デザインをカスタマイズした・表示がおかしくなったなどの問題が発生した場合は「すべてをパージする」を選択してましょう。

 

2-2. データベースの最適化方法

WordPressブログの運営を続けていると、投稿のリビジョンデータが蓄積されていきます。

リビジョンなどがデータベースを肥大化させ、ページ速度低下の原因にもなりますので、データベースも定期的に最適化しましょう。

LiteSpeed Cache→管理→タブ「DBオプティマイザ」にデータベースを最適化する項目も備わっています。

 

その中の「全てを消去」を選択すれば、不要なリビジョンなどのデータを削除することができます。

ちなみに、これはデータベース最適化の定番プラグイン「WP-Optimize」と被る部分です。

LiteSpeed Cacheがあれば、WP-Optimizeは必要ありませんので、アンインストールしてもOKです。

 

まとめ

今回は、LiteSpeed Cacheの設定方法と使い方について解説してきました。

LiteSpeed Cacheの設定方法については、実際の私の設定内容をご紹介させていただきました。

人によっては、「CSS/JSの圧縮・結合」の部分でテンプレートの表示が崩れてしまうなどが問題が発生した場合の対処法がわからない方は、Autoptimizeとの併用がおすすめです。

LiteSpeed Cacheを一つ有効かにすれば、プログラミングの知識が無くても誰でも簡単にWordpressを高速化することが可能なので、ぜひ導入することをおすすめしますよ。