LiteSpeed Cacheの設定項目を設定解説【MixHost】

2020年4月17日
2020年4月20日
wordpress

LiteSpeed Cacheってどう設定すればいいの？
キャッシュってよくわからないし怖い！

サーバーの高速化が求められている現代で最も注目されているのが、第4世代のサーバーである「LiteSpeed」です。Mixhostやカラフルボックス、FUTOKA等が使用しているサーバーとなっており、初期設定でも十分なパフォーマンスに期待できるのですが「LiteSpeed Cache」プラグインを導入する事により更に高速表示を目指せます。

「LiteSpeed Cache」はLiteSpeedサーバーが公式に出しているプラグインです。キャッシュ機能やファイルの圧縮をする事によりサイトの高速化を実現します。

とはいえ、キャッシュや圧縮等って不具合の原因になりそう・・・怖い！専門用語ワカリマセン！っと抵抗感を持たれる人も多く、MixHostを使っているのに「LiteSpeed Cache」を使わないのは勿体ない！

この記事では「LiteSpeed Cache」の導入方法やおすすめの設定、各項目の役割を解説いたします。

1 LiteSpeed Cacheでサイトの速度は速くなるのか
- 1.1 キャッシュとは
2 LiteSpeed Cacheをインストールしよう
3 LiteSpeed Cacheのおすすめ設定と項目の開設
4 まとめ

LiteSpeed Cacheでサイトの速度は速くなるのか

キャッシュとは

とはいえキャッシュについて理解が０だと少し不安ですよね。キャッシュ機能を使って何故サイトが軽くなるかを解説します。

キャッシュとは一時的に保存しておくデータの事です。再度同じページを閲覧した際等にスムーズにページの表示が出来るようになります。これは1つのページに対してだけ行われるものではありません。

例えば、ファビコンは全てのページで表示されますよね、ファビコンをキャッシュする事により、初見のページを閲覧する際にもファビコンを読み込む必要がないので表示速度が速くなります。

LiteSpeed Cacheをインストールしよう

LiteSpeed Cacheはプラグイン画面よりインストールを行えます。

そのまま有効化まで行います。

LiteSpeed Cacheのおすすめ設定と項目の開設

おすすめ設定を解説していきます。デフォルトのままで特に変更する必要のない要素に関しても項目の解説はしていきます。

特に解説が必要のない人は画像に表示している設定がおすすめの設定です。

最初に「高度なオプションを表示」タブをクリックして全ての項目を開けましょう。

全般タブの設定

全般タブではデフォルトのままでOKです。念の為上記画像の設定通りの設定と数値になっているかを確認します。

TTLとはTime To Liveの略称でキャッシュする時間の秒数を設定します。（3600=1時間）

自動アップグレードは突然のアップデートによりサイトの表示が崩れる可能性も０ではありませんので、バージョンの信頼が取れてから手動で行うようにしましょう。

キャッシュタブの設定

キャッシュの制御を設定できます。デフォルトから設定を変更している箇所が「ログインしたユーザーをキャッシュ」と「ログインページのキャッシュ」です。コチラの項目はオフに設定しておくことをおすすめします。

パージの設定

パージとは抹消するという意味です。ワードプレスのバージョンアップやテーマのアップデートが行われた際にキャッシュを抹消する為に「アップグレード時にすべてをパージする」の項目はオンにしておきましょう。

「公開 / 更新の自動パージルール」では新規記事投稿を行った際に更新されるウィジェット等を使用している際にパージするページのタイプを指定します。サイドバーに新着記事等を表示している場合記事投稿の際にパージして行いと古いキャッシュが残ってしまいます。

当サイトでは日付のアーカイブページへのリンクは取り付けておりませんのでチェックを外している次第です。ここで注意点なのは「固定ページ」となっている箇所は翻訳ミスです。原文では「ALL pages(全てのページ)」となっており、コチラにチェックすると全ての項目にチェックしている事と同じとなります。

除外の設定

これまでの設定を適用させないURLを指定できます。

最適化の設定

※注意 最適化の設定は必ず項目を理解してから設定を変更してください。お使いのテーマやプラグインによってはレイアウトが崩れたり、画像が表示されなくなる可能性があります。

各項目を解説します。

→CSS 圧縮化：CSSファイルの空白や改行を取り除くことでファイルの軽量化をしてくれます。

→CSS 結合：CSSファイルをまとめてくれます。後から結合されたファイルのスタイルが優先されます。テストがしていませんが「!important」で優先度を決定していた場合レイアウトが崩れる事もあるかもしれません。不安ならオフ推奨です。

→CSS HTTP/2 プッシュ：ブラウザからファイルを呼び出す前にCSSを送り付けます。分かりやすく説明すると、本来ならブラウザがHTMLファイルを読み込み、記載されているCSSファイルを読み込みます。本項目をオンにする事によりHTMLからCSSを読み取る前にCSSファイルを読み込ませます。

→JS 圧縮化：CSS 圧縮化と同様です。

→JS 結合：CSS 結合と同様ですが、不具合発生の可能性が高い為オフ推奨。

→JS HTTP/2 プッシュ：CSS HTTP/2 プッシュと同様です。

→CSS/JS キャッシュ TTL：キャッシュの保持時間です。デフォルトで（604800=7日）です。

→HTML 圧縮化：CSS 圧縮化と同様に空白や改行を取り除いてくれます。

→インライン CSS/インライン JSの圧縮：インラインとはHTMLないに直接記載されたCSSやJSを指します。

→CSSを非同期ロード：オンにする事でCSSの読み込み具合に関係なくサイトを表示させます。それによりレイアウトが少し崩れた状態で一瞬表示されますが、トータルの表示速度は速くなります。

→クリティカル CSS を生成：上記の項目がオンの場合のみ機能します。オンにする事により非同期ロード時に画面の乱れを解消するためのCSSが作成されます。

→バックグラウンドでクリティカル CSS を生成する：オン推奨です。上記項目をオンの状態で本項目のみオフの場合はクリティカルを作成してからサイトの表示が開始されます。結果遅くなります。

→別々のCCSSキャッシュポストタイプ：CCSSとはクリティカルCSSの略です。基本的に記事には記事のCSS、カテゴリーにはカテゴリーのCSSが使われています。一つのCCSSが作成されると同様なものが使いまわされますが、記事毎に別々のフォントで作成している場合等はpageと入力する事で記事毎にCCSSが作成されるようになります。

→個別のCCSSキャッシュURI：上記のキャッシュポストに対してコチラでは指定した文字列を含むパスに対して同様の処理が行われます。

→インライン CSS 非同期ライブラリ：レンタリングのブロックを避けるために非同期CSSライブラリをHTMLに挿入します。

→JS Deferredをロード：JSにDeferred属性を付けることでJSが非同期で呼び込まれます。JSは決められた順番で処理しないと不具合が発生する可能性大です！オフ推奨！

→jQueryを除外する：最初見たとき戸惑ってしまいました！これはjQueryを取り除く設定ではなく、JSの設定に対しjQueryは含めないようにする設定です。オン推奨

→DNS プリフェッチ：外部サイトに遷移する際に指定したサイトに素早く遷移できるようになります。例えば、amazonの商品を多数扱っているアフィリエイトサイトならamazonのドメインを指定する事で素早く商品ページに移動できるといった具合です。

→コメントを削除します：CSSとJSのコメントアウトを削除します。

チューニングの設定

チューニングの設定は先ほどの最適化の項目を更に深堀して設定する項目になります。最適化と同様要注意項目多しです。

→CSS 結合の優先度/CSS 除外：この項目をオンにすると最適化で統合されたCSSから先に読み込まれるようになります。デフォルトの状態でオフとなっておりますが、この状態でサイトのレイアウトを確認して崩れていないならオフのままでOKです。崩れているならオンにしてサイトを確認して、なお崩れているようならCSS除外でコントロールします。

※何故このような現象が発生してしまうのかを説明します。元のCSSがA,B,Cの３つ存在しすとして、Ａ→B→Cの順番でスタイルが決められ同じ内容の項目があればCのスタイルが適用されます。しかし、AとCが合体するとB→ACの順番でCSSが適用され、これによりスタイルが崩れる可能性が発生します。ACのファイルを先に読み込むことによりレイアウトが元に戻る可能性もありますが、逆もしかりです。

→JS 結合の優先度/JS 除外：上記同様崩れていないならオフのままでOK！

→結合されたファイルの最大サイズ：統合されるファイルの上限を指定します。数字が大きければ１つのファイルが大きくなり、ファイル数は少なくなります。ファイルの数は少ないほど、ページスコアは優れますが、使用メモリは大きくなります。デフォルトの数値を推奨します。

→クエリ文字列を削除：CSSとJSのファイルにクエリ文字列がある場合に削除されます。クエリ文字列とはパラメータ付のURLの事です。当サイトのTOPページで記事の表示順を人気順にすると「?sort=popular」というパラメータが末尾に付いています。

→Google フォントを非同期に読み込む：Googleフォントは重いので、非同期に読み込むことで表示の高速化につながります。オン推奨

→Googleフォントを削除：重いならばと消してしまうと表示されない文字が出てくる可能性も！オフ推奨

→クリティカル CSS ルール：クリティカルCSSに追加するスタイルを記入できます。

→JS 繰延を除外：JS Deferredをロードをオンにしている場合本項目で対象外にするファイルを指定できます。

→WordPress 文字を削除：ワードプレスの絵文字の読み込みを停止し、代わりにブラウザ毎の絵文字が表示されます。最新のブラウザでは絵文字は揃っていますが、古いブラウザでの閲覧では絵文字が表示されなくなる可能性があります。オン推奨

→除外 URI：指定したURLは最適化で設定したすべての項目が適用されなくなります。

→役割除外：指定したロールは最適化が適用されません。※ロールとは管理者や記事を編集できる人等の権限を付与された人を指します。

メディアの設定

メディアの読み込みに関する設定が行えます。テーマに干渉すると画像が表示されなくなる場合もございます。

→画像遅延読み込み：本項目にチェックするとビューポイントのみ画像の読み込みが行われます。ビューポイントとは現在ブラウザで表示されている画面の事です。つまり、記事をスクロールするまで画像は読み込まれないという具合です。下記のCSSを登録するとふわっと浮き上がるように画像が読み込まれます。

/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
	opacity: 0;
}

/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
	-webkit-transition: opacity .5s linear 0.2s;
	-moz-transition: opacity .5s linear 0.2s;
	transition: opacity .5s linear 0.2s;
	opacity: 1;
}

引用：litespeed_wiki

→画像遅延読み込みを除外：画像のURL（一部でも可）を指定することで遅延読み込みから除外されます。

→画像遅延読み込みクラス名を除きます：クラスを指定する事で遅延読み込みから対象のクラスを持つ画像が除外されます。

→画像遅延読み込みプレースフォルダ：画像を読み込む前の画像をbase64形式で指定できます。base64とは簡単に説明すると画像を64種類の英数字に置き換えたデータです。無駄に処理が遅くなるだけですので、オフ推奨です。

→応答プレースホルダ：画像の幅と高さが指定されている場合、遅延読み込みをする前に予めスペースが確保されます。これにより、遅延読み込みの際のレイアウトの崩れが発生しません、

→応答プレースホルダ背景色：プレースホルダの背景色を指定できます。

→バックグラウンドで応答プレースホルダを生成する：プレースホルダはページ読み込み開始時に作成されます。本項目をオンにするとプレースホルダの確保終了後にページデータの読み込みを開始しますので、表示が遅くなります。オフ推奨

→Iframes 遅延読み込み：動画埋め込み等のIframes属性の要素をビューポイント外では読み込まなくします。アドセンス広告を使用しているならオフ推奨

→インラインレイジーロードイメージライブラリ：遅延読み込みに関するJSファイルをHTMLにインライン展開します。これにより誤作動の発生確率を低下させます。

→自動的に最適化する：回収クレジットが 1200 以上の場合にのみリクエストを送信できますコチラの記載が不明であるため未検証です。同様にこれ以降の項目は全て未検証でデフォルト設定としております。