【WordPress】ページキャッシュプラグイン「LiteSpeed Cache」の設定備忘録

WordPressのページキャッシュプラグイン「LiteSpeed Cache」の設定に関する備忘録記事です。

以前、設定ミスでキャッシュが上手くパージ（クリア/開放）されなくて古いページが表示され続けるような事もあったので、設定を忘れないように再確認＆調整してみました。

【WordPress】ページキャッシュプラグイン『LiteSpeed Cache（Version3）』の設定方法

WordPressのページキャッシュプラグイン『LiteSpeed Cache（ライトスピード キャッシュ）』のメジャーバージョン3以降の設定・使い方をまとめた備忘録＆紹介記事です。 2020年4月にメジャーバージョンが「2」から「3」に更新され、機能の追加やUIの変更があったので、設定をもう一度見直してみました。

tonahazana.com

2020.06.29

LiteSpeed Cacheについて

「LiteSpeed Cache（ライトスピードキャッシュ）」は、「LiteSpeed」を採用しているWebサーバーで使用できるWoredPressのページキャッシュプラグイン。

ページキャッシュの仕組みをざっくり解釈すると、「ページを構成する要素や処理の一部を予めキャッシュ（作り置き）しておくことで、リクエスト（ページへのアクセス）が来た際に素早く表示できる機能」といった感じ（合ってるかな？）。

リクエストがあるたびに発生するページ表示の処理をキャッシュで省くことにより、ページ表示の高速化、サーバ負担の軽減ができる。

LiteSpeed Cache

オールインワンの無敵の高速化 PageSpeed を改善：キャッシング、画像/ CSS / JS を最適化...

ja.wordpress.org

設定環境について

全般の設定

LiteSpeed Cacheを有効にする

デフォルトのパプリックキャッシュ TTL

公開ページ（個別の投稿記事ページなど一般的なページ全般）をキャッシュする期間を秒単位で指定。

wikiによるとデフォルト値は8時間。その他、1時間（3600秒）、1日（86400秒）、1週間（604800秒）などが目安になるとのこと。

記事の更新頻度に合わせて1日～1週間くらいに設定。

デフォルトのプライベートキャッシュ TTL

プライベートページ（管理ページなど）をキャッシュする時間を秒単位で指定。60～3600秒の範囲で設定可能。

デフォルトのフロントページ TTL

フロントページ（トップページ）をキャッシュする期間を秒単位で指定

設定画面に表示される推奨値とwikiの説明の値がかなり違っていて、wikiのデフォルト値は1800秒。

トップページに新着・更新記事の一覧などを表示していて、週に1回以上の更新があるなら1日くらいにしておいて良さげ。

デフォルトのフィード TTL

フィードをキャッシュする期間を秒単位で指定。「0」だとキャッシュしない（無効）、30秒未満は30秒に設定される。

フィードのキャッシュは更新時・コメント時にパージされて最新に保たれるとのことで、有効化するのも良さそうだけど、初期値で0だったのでそのまま使用。

デフォルトの404ページ TTL

404ページ（存在しないエラーページ）をキャッシュする期間を秒単位で指定。30未満の数値でキャッシュ無効。

意図した404ページを表示する際は長めのキャッシュ期間も有用らしいが、ランダムなURLで際限なくキャッシュが生成されることもあるらしい。長めに設定する場合はディスク容量圧迫に注意。

デフォルトの403ページ TTL

403（アクセス制限）ページをキャッシュする期間を秒単位で指定。30未満の数値でキャッシュ無効。

デフォルトの500ページ TTL

「500 Internal Server Error（内部サーバーエラー）」ページをキャッシュする期間を秒単位で指定。

キャッシュ制御の設定

ログインしたユーザーをキャッシュ

ログイン中ユーザーのフロントエンドページをプライベートキャッシュする設定。

デザインのカスタマイズ時にキャッシュが表示されて邪魔になることもあるため無効。

コメントをキャッシュ

保留中のコメントを持つコメント投稿者をプライベートキャッシュする設定。

REST API をキャッシュ

WordPress の REST API 呼び出しによるリクエストをキャッシュ。

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

管理画面の説明には、「このオプションを有効にすると、パフォーマンスに悪影響を与える可能性があります。」とある。

wikiによると推奨はONで、「通常このチェックを外す必要はない。ログインユーザーを識別する必要があるならオフ」とのこと（？）。

必要性は特に強くないと思われるので、無難にオフを選択。

favicon.ico をキャッシュ

favicon.icoが応答しない場合にキャッシュする設定。

ファイルが存在しない場合にWordpressが毎回ロードされるのを防げる。

PHP リソースをキャッシュ

キャッシュとPHPの不必要な呼び出しを避けることによってサーバーのパフォーマンスが向上します。

モバイルをキャッシュ

スマホなどのモバイルビューを個別でキャッシュする設定。レスポンシブデザインのサイトなら基本不要。

これがオンの場合は「モバイルユーザエージェントのリスト」設定が必要。

mixhostのヘルプによると、PC/スマホ向けの表示が逆になるなどの不具合がある場合は、この設定を有効にすることで解消する場合もあるとのこと。

パージの設定

アップグレード時にすべてをパージする

アップグレード時の仕様変更などに備えるため、基本的にON推奨とのこと。

公開 / 更新の自動パージルール

投稿時に自動でパージしたいタイプのページをチェック。

設定画面の一番左上は日本語だと「固定ページ一覧」となっているが、原文だと「All pages（全てのページ）」となっている点に注意。

除外の設定

URIsをキャッシュしない

SiteGuardのひらがなでの画像認証に使う「/wp-content/plugins/siteguard/really-simple-captcha/tmp」のみ除外。

プラグインSiteguardと標準Lazy loadとの干渉？

サブサイトの設定を弄っていて気づいたのですが セキュリティプラグインであるSiteGuardの画像認証をオンで使っている状態で 標準で追加されたLazyLoad機能をオンにするとログイン画面の認証画像が一度目は必ず表示されない状態です 一度更新をかければ画像が表示される感じです Cocoonの不具合...

wp-cocoon.com

最適化の設定

CSS圧縮化

CSSファイルから余分な空白文字/改行/コメントを除外して圧縮する設定。オンにすると表示が崩れる場合がある。

テーマ側の機能を使っているのでオフ。

CSS結合

複数のCSSファイルを一つにまとめる設定。オンにすると表示が崩れる場合がある。

CSS HTTP/2 プッシュ

内部CSSファイルを要求される前にあらかじめブラウザに送信する設定。https化しているサイトのみ利用可能。

JS圧縮化

JavaScriptファイルを圧縮する設定。テーマの機能を使うのでオフ。

JS結合

JavaScriptファイルを一つのファイルにまとめる設定。

オンにすると表示が崩れることがあるためオフ。

JS HTTP/2 プッシュ

JavaScriptファイルを要求される前にあらかじめブラウザに送信する設定。https化しているサイトのみ利用可能。

CSS/JSキャッシュTTL

CSS/JS ファイルがキャッシュされる時間を秒単位で指定。初期値は3600、推奨値は604800。

HTML圧縮化

HTMLコンテンツから余分な空白文字、改行文字、コメントを削除して圧縮する設定。テーマの機能と重複するのでオフ。

「インラインCSSの圧縮」「インラインJSの圧縮」も大体同じ理由でオフ。

CSSを非同期ロード

CSSの読み込みを非同期化する設定。サイトの表示が崩れることがあるのでオフ。

クリティカルCSSを生成

「CSSを非同期ロード」が有効の場合のみ機能する設定。デフォルトのオンのままにしている。

インライン CSS 非同期ライブラリ

非同期CSSがインライン化されてレンダリングのブロックが回避される。

「CSSを非同期ロード」をオフにしていると機能しない？

JS Deferredをロード

JavaScriptの読み込みを非同期化してPageSpeedなどのサービスでスピードスコアを向上させることができる？

Adsenseなどへの影響がどう出るのかよく分からないので保留、とりあえずオフ。

JQueryを除外する

最適化の設定からJQueryを除外。インラインJavaScriptを使用している場合は特にオン推奨とのこと。

DNSプリフェッチ

リストされたドメインのDNS解決を要求される前に実行、待ち時間を短縮する設定。

「DNS Prefetch Generator」のブックマークレットを利用して、自サイトで読み込む外部ドメインを確認してリストに入力。

DNS Prefetch Generator

This is JavaScript Bookmarklet can generate DNS Prefetch Tags with 1-Click.

igari.github.io

コメントを削除します

縮小時に JS / CSS ファイル内のコメントを削除する設定。

チューニングの設定

CSS結合の優先度

結合したCSSファイルを他のCSSファイルの前に読み込む。

JS 結合の優先度

結合されたJSファイルを他のJSファイルの前にロード。

クエリ文字列を削除

静的リソースからクエリ文字列を取り除く設定。

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

他のCSSをそのまま残してGoogleフォントを非同期に読み込むことで表示を高速化。

Googleフォントを削除

サイトからすべてのGoogleフォントを削除する設定。

WordPress 文字を削除

wordpress.org の絵文字の読み込みを停止する設定。

メディアの設定

画像遅延読み込み

 ビューポート（画面に表示されている部分）のみの画像を読み込む「遅延読み込み（Lazy Load）」設定。

ページ内の画像を一度に読み込まなくなるので表示速度は上がるけど、回線速度が遅い場合などは画像を配置した場所にビューポートが移動してから画像が表示されるまでに待ち時間が発生する可能性がある。

遅延させたくない画像は「完全なURL/部分文字列/クラス名」などを設定しておくことで除外することもできる。ブログ上部のヘッダー画像など。

テーマ「Cocoon」のLazyLoadによる遅延読み込みは、投稿記事内の画像に限定されるらしく(？)、カテゴリ/新着記事/関連記事などのリスト画像は遅延読み込みになっていなかったようなのでオンに変更。

遅延読み込み画像のスタイル追加

遅延読み込みする画像を表示する際に演出効果（エフェクト/アニメーション）を付ける設定。

遅延読み込みした画像は、ページを素早くスクロールしたり、目次のページ内リンクで見出し冒頭にジャンプした際などに、一瞬遅れて突然「パッ」と画面に表示されて、少し見栄えが悪いことがある。

ただ、表示速度が速い場合はほとんど気にならないことも多いので、必要性は微妙なところ（回線やマシンの処理速度、画像ファイルの容量・サイズなどに依る）。

公式wikiに掲載されているサンプルコードを「style.css」に貼り付ければ、簡単に演出効果を付けることができる。

/* LiteSpeed Cache 画像遅延読み込み前 */
img[data-lazyloaded] {
    opacity: 0;
}

/* LiteSpeed Cache 画像遅延読み込み時 */
/* 初期値 opacity .5s linear 0.2s　*/
/* 初期値だと0.2秒待ってから0.5秒で表示完了 */
img.litespeed-loaded {
    -webkit-transition: opacity .25s linear 0.1s;
    -moz-transition: opacity .25s linear 0.1s;
    transition: opacity .25s linear 0.1s;
    opacity: 1;
}

litespeed_wiki:cache:lscwp:configuration:media:lazy-load-style [LiteSpeed Wiki]

www.litespeedtech.com

CSS3のtransition-timing-functionの動きをサンプルで理解しよう

このブログでも多用しているtransitionですが、変化の仕方を表すtransition-timing-functionについては、違いが分からないという人もいるのではないでしょうか？...

weboook.blog22.fc2.com

transition - CSS: カスケーディングスタイルシート | MDN

transition は CSS のプロパティで、 transition-property、 transition-duration、 transition-timing-function、 transition-delay の一括指定プロパティです。

developer.mozilla.org

transition-timing-function－CSS3リファレンス

CSS3のプロパティ解説

www.htmq.com

応答プレースホルダ

レイアウトの再配置を減らすのに役立つ画像のプレースホルダを有効化する設定。

画像が読み込まれる場所を予め確保しておくことで、表示されたときに画像の上下にあるテキストなどの位置がずれる（押し出すような感じ）のを防げる。

Iframes遅延読み込み

iframe がビューポートに入るときだけロードする設定。

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

LazyLoadで使用するJavascriptライブラリの読み込み方に関する設定。

オンにするとHTMLに埋め込んで読み込む（インライン）。オフの場合は外部ファイルとして読み込むことになる。

表示速度はインラインの方が速いらしいのでオン。HTMLに埋め込む関係で、PageSpeedなどのスコアは向上するが、ページのサイズは大きくなるとのこと。

自動的に最適化する

画像の最適化を自動で行う設定。その他の最適化関連設定は以下。

ブログで使用する画像の容量(サイズ)を画質変更・圧縮などして削減していない場合は、最適化設定しておくのも有りだと思う。

CDNの設定

CDNを有効にする

CDNは使っていないので無効、関連する設定も無効。

ESIの設定

ESIを有効にする

ログイン中ユーザーの公開ページをキャッシュできるようにし、ESI ブロックを介して管理バーとコメントフォームを利用可能に。

↑などをキャッシュできるようになるらしい。

Edge Side Includes for WordPress ⋆ LiteSpeed Blog

LiteSpeed Cache support Edge Side Includes for WordPress. Punch holes in your public content with ESI and cache small bits of private content.

blog.litespeedtech.com

高度な設定

オブジェクトキャッシュ

データベース関連のキャッシュ設定。

ブラウザキャッシュ

テーマの設定と重複するのでオフ。

その他の項目も全てオフ。

デバッグ/開発者テストの設定

全て初期状態で使用。「ハートビート」のみオン。

クローラーの設定

クローラー設定は全て初期状態（無効）のままで使用。

事前にサイトをクロールさせてキャッシュを作成しておくこともできる模様。

参考サイト

Overview | LSCache for WordPress | LiteSpeed Documentation

LiteSpeed Cache for WordPress - how to install, use, and troubleshoot the LSCache plugin

www.litespeedtech.com

Just a moment...

help.mixhost.jp

WordPressキャッシュプラグイン “LiteSpeed Cache” の設定項目の解説

Litespeed サーバ専用 Wordpress キャッシュプラグイン ”LiteSpeed Cache” の機能を詳しく解説。レンタルホスト MixhostとJETBOYユーザ向け。

yaruzou.net

【解説】LiteSpeed Cacheの設定方法と使い方。誰でも簡単に高速化が可能！ | ツヨシウェブ Affiliate

LiteSpeed Cacheの設定方法と使い方がわからずに困っていましたか？本記事では、私の設定内容を公開しながら図解を用いて解説しています。LiteSpeed Cacheの設定方法と使い方を知りたい方は、是非ご覧ください。

affiliate.24shi-web.com

まとめ

WordPressのキャッシュ系プラグインは、設定を誤ったりすると色々と不具合が出たりもするので使い方が難しいですが、ブログの高速化に役立つため重宝しています。

LiteSpeed Cacheの設定は比較的簡単な部類らしいですけど、未だによく理解せずに設定している部分があるので、改善部分があったら是非教えてください(ﾉ∀`)ｱﾁｬｰ

【追記】Version3以降の設定記事は↓になります。

【WordPress】ページキャッシュプラグイン『LiteSpeed Cache（Version3）』の設定方法

WordPressのページキャッシュプラグイン『LiteSpeed Cache（ライトスピード キャッシュ）』のメジャーバージョン3以降の設定・使い方をまとめた備忘録＆紹介記事です。 2020年4月にメジャーバージョンが「2」から「3」に更新され、機能の追加やUIの変更があったので、設定をもう一度見直してみました。

tonahazana.com

2020.06.29