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

  • URLをコピーしました!
はじめ

ここにテLiteSpeed Cacheの設定が全く意味不明!
LiteSpeed Cacheの設定方法と使い方が知りたい!キストを入力

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

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

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

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

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

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

お洒落なサイトが誰でも作れる!

ブログを書くのが楽になるテーマ「SWELL」

  • 誰でも簡単にオシャレなブログが作れます!
  • WordPressの使いやすさがアップします!
  • キャッシュ機能とページ高速遷移機能で初心者も簡単にWordPressの高速化が可能です!
  • アフィリンクの一元管理機能が標準装備されてます!

\一度使うと他のテーマには戻れません!/

※実際に私の当ブログは「SWELL」を使って運営しており、大満足のテーマです!

この記事を書いてる人

溝口 剛
Tsuyoshi Mizoguchi

   

1986年生まれ 33歳 札幌在住
8年間会社員として働くも会社員としての生き方が嫌になり、フリーランスへ。現在はブログより年間1,000万円の収益を得ています。

この記事の内容

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を高速化することが可能なので、ぜひ導入することをおすすめしますよ。

【PR】現役ブロガーの実践ノウハウをこっそり教えちゃいます。

当サイトでは、私が月7桁稼ぐまでに至ったノウハウ・現在実践しているノウハウを「ツヨシウェブSHOP」で有料コンテンツとして販売しております。実際にブログで月7桁稼いだ実績を持っており、また現在もブログ収益で生活をしていますので情報の信頼性は高いと感じています。

しかし、有料コンテンツで提供している情報は「楽して稼ぐ!」というものにはなっておらず、これから私と同じようにブログ・発信者として生活していきたい方に向けて書いておりますので「継続的に作業できる方のみ」ご購入いただければ幸いです。

また、コンテンツには自信を持って提供させて頂いておりますので、もし購入後ご不満がございましたら「返金対応」させて頂きます。

月7桁をを達成したサイト設計方法です!

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。

  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 見込み客→キーワード選定→サイト導線が重要。
  • 「成約から近い見込み客」の考え方について解説。
  • 狙うべきキーワードについて解説。
  • サイト導線の考え方について解説。

\月7桁を達成したサイト設計方法が学べます!/

初心者のための「サイト設計方法」月7桁を実現するブログの作り方を解説。
  • 案件を選ぶ際の7つのポイントが学べます。
  • 購入されやすい商品の特徴。
  • 案件選びで重要な見るべきポイント。
  • 案件を取り組む際に確認すべき事項。

\アフィリ案件を選ぶ秘訣が学べます!/

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
この記事の内容
閉じる