LiteSpeed Cacheおすすめ設定
目次
画像の最適化
[2] 画像最適化設定
自動要求Cron 【オン】
オンにすることで画像をWordPressに登録するたびに画像を自動で最適化してくれます。
自動戻しCron 【オン】
画像の最適化はQUIC.cloudサーバ側で実施されますので、オンにすることでサーバ側で最適化された画像を自動的に戻す（取得する）ことができます。
オリジナル画像の最適化 【オン】
オンにすることで、画像を最適化するときに元の画像をバックアップします。
オリジナルバックアップを削除する 【オフ】
オンにすると、画像の最適化が完了するとオリジナルのバックアップを削除します。私はオフにしています。
可逆最適化 【オフ】
オンにすることで画質が向上しますが、画像サイズは大きくなります。私はオフにしています。
EXIF / XMPデータを保存する 【オフ】
画像のEXIF / XMP データには、撮影に使用されたカメラ機器、撮影日時や位置情報などが含まれている場合がありますので、そういった情報を公開する必要がない限りオフにします。
WebP画像への置換 【オン】
オンにするとJPGやPNG形式の画像を、より効率の良いWebP形式の画像に変換します。オフにした場合はJPGやPNG形式のまま画像を最適化します。
WebP属性を置換する 【デフォルト値】
WebP形式の画像に変換するタグおよび属性を指定します。指定した属性の画像ファイルをWebPに変換します。デフォルト値と同じ値が入力されていれば問題ありません。
WebPの特別なsrcset 【オン】
サイトにWordPressロジックの外部で生成されたコードがあり、srcset要素のWebP変換を行う場合はオンにする必要があります。
WordPress 画像品質管理 【82】
画像ファイルのデフォルトの圧縮率を変更します。デフォルト値は82です。
ページの最適化
[1] CSS設定
CSS圧縮化 【オン】
オンにするとCSSファイルから余分な空白文字や改行文字、コメントを削除します。
CSS結合 【オン】
オンにするとCSSファイルを1つのCSSファイルにまとめます。
UCSSを生成する 【オフ】
オンにすると、QUIC.cloudサービスにより各ページごとにユニークなCSSファイルを作成します。それぞれのページごとに必要なCSSだけで構成されるので各ページで読み込むCSSファイルが小さくなります。私の場合オンにするとページのレイアウトが乱れたページがあったので、オフにしています。
UCSSインライン 【オフ】
「UCSSを生成する」が「オン」のときにこの設定をオンにすると、ユニークなCSSがファイルではなくHTMLにインラインで記述されるようになります。
CSSの外部とインラインを組み合わせる 【オフ】
「CSS結合」が「オン」のときにこの設定をオンにすると、外部のCSSとHTML上のインラインCSSコードを含めて1つのCSSファイルにまとめます。
CSSを非同期読み込み 【オフ】
オンにするとQUIC.cloudサービスによりCSSを非同期であとから読み込むようになり、ページの最初の読み込みが速くなります。このとき、サイトの初期表示に必要となる重要なCSS（CCSS）が別に生成されます。私の場合オンにするとページのレイアウトが乱れたページがあったので、オフにしています。
URLごとのCCSS 【オフ】
オンにすると、CSSを非同期読み込みの際に個々のページごとではなく、投稿タイプごとに重要な CSS が生成されるようになります。
インラインCSS非同期ライブラリ 【オフ】
オンにすると、非同期ＣＳＳライブラリがHTMLにインラインで記述されるようになります。
フォント表示の最適化 【Swap】
CSSに記述されたフォントをキャッシュする前にどのようにフォントを表示するかを設定します。Swapを選択します。
[2] JS設定
JS圧縮化 【オン】
オンにするとJSファイルから余分な空白文字や改行文字、コメントを削除します。
JS結合 【オフ】
オンにするとすべての個別のJSファイルを1つのJSファイルに結合します。私の場合オンにすると正しく動作しないJavaScriptがあったため、オフにしています。
JSは外部とインラインを組み合わせる 【オフ】
JS結合がオンになっているときにこの設定をオンにすると、外部のJSとHTML上のインラインJSコードを含めて1つのJSファイルにまとめます。
JSを遅延読み込み 【遅延】
ページが解析されるまで延期したり、インタラクションが発生するまで遅らせたりすることでサイトの初期表示を速くします。「Deferred」にするとHTMLが読み込まれたタイミングでJavaScriptが実行されます。「遅延」にするとHTMLが読み込まれた後、ユーザが画面のクリックやスクロールなどのアクションを起こすまでJavaScriptの実行が遅延します。
[3] HTMLの設定
HTML圧縮化 【オン】
オンにするとHTMLから余分な空白文字や改行文字、コメントを削除します。
DNSプリフェッチ 【空白】
リストに入力されているドメインのDNS解決を要求される前に実行できるため、外部リンク先に接続するときの待ち時間を大幅に短縮できます。
Google Adsenseを導入している場合にそのドメインを指定すると高速化されるといった声も聞かれますが、私の場合はGoogle Adsenseそのものを遅延読み込みしているのでDNSプリフェッチには何も指定していません。（遅延読み込みしているのに先読みさせるのは矛盾してると感じたので）
DNSプリフェッチ制御 【オン】
画像、CSS、JavaScript など、ドキュメント内のすべてのURLに対してDNSプリフェッチを自動的に有効にします。
DNSプリコネクト 【空白】
DNSプリコネクトはDNSプリフェッチよりもさらに踏み込んで事前接続まで行います。
HTML Lazy Loadセレクタ 【空白】
リストに入力したセレクタ内のレンダリングを、実際にスクロールされるまで遅延させます。
クエリ文字列を削除 【オン】
この設定をオンにすることで、静的リソースからクエリ文字列を削除し、ブラウザやプロキシサーバーにキャッシュされやすくします。
Googleフォントを非同期に読み込む 【オン】
この設定をオンにすることで、CSSを非同期読み込みしていない場合でもGoogleフォントを非同期読み込みにできます。また、Googleフォント読み込みに必要なプリコネクトも行われます。
Googleフォントを削除 【オン】
この設定をオンにすると、サイトからすべてのGoogleフォントを削除します。Googleフォントを読み込まなくなる分、サイトが軽くなる可能性がありますが、導入しているプラグインがGoogleフォントを使用している可能性があるので、十分な影響確認が必要です。
WordPress絵文字を削除 【オン】
この設定をオンにすると、古いブラウザで絵文字のサポートを追加するために使用される追加のJavaScriptファイルが削除されます。最近のブラウザでは効果はないかもしれません。
Noscriptタグの削除 【オン】
<noscript>タグを削除してページサイズを削減します。<noscript>はJavaScriptをサポートしていない古いブラウザや、JavaScriptを無効にしているブラウザとの互換性を保つために使用されるものです。<noscript>タグを削除することにより、JavaScriptが実行できないブラウザでの挙動が変わる可能性があるため、影響確認が必要です。
[4] メディア設定
画像遅延読み込み 【オン】
画像がビューポートに入ったときにのみ画像を読み込みます。 ページ初期表示時のリクエストを減らすことでページの読み込み時間が改善できます。
基本的な画像プレースホルダー 【空白】
デフォルトの画像プレースホルダー以外のbase64画像を使用する場合は指定します。
レスポンシブプレースホルダー 【オン】
レスポンシブな画像プレースホルダーを使用する場合オンにします。
レスポンシブプレースホルダーSVG 【デフォルト値】
プレースホルダーをローカルで生成する場合に、使用するSVGを指定すると、base64画像に変換されます。
レスポンシブプレースホルダーの色 【デフォルト値】
レスポンシブプレースホルダーの色を指定します。
LQIPクラウドジェネレーター 【オン】
この設定をオンにすると、QUIC.cloudのサービスを利用して、読み込む元の高品質画像をぼかして縮小したプレースホルダーを生成することができます。
LQIP品質 【4】
生成される LQIP の品質を指定します。1から20の間で指定します。大きくするとプレースホルダーの画質は向上しますが、ファイルサイズも大きくなります。
LQIP最小寸法 【150×150ピクセル】
LQIP を生成する最小ファイルのサイズを指定します。例えば150×150ピクセルと指定すると、縦横のサイズがどちらも150px未満の場合は、LQIPを生成しません。
バックグラウンドでのLQIPの生成 【オン】
この設定をオンにすると、LQIPはページが初めて訪問されたときにバックグラウンドで生成され、生成が完了するまではレスポンシブプレースホルダーの画像が表示されます。オフにした場合はフォアグラウンドでLQIPが生成されるため、初めてページが表示されるときに読み込みが遅くなることがあります。
遅延読み込みiframe 【オン】
iframe内のコンテンツに対し、画像と同様の遅延読み込みを行います。
不足しているサイズを追加する 【オン】
HTML上で画像に対する幅と高さが指定されていない場合、自動的に補足します。画像の幅と高さを指定することで、ページ読み込み時のレイアウトのズレが軽減され、PageSpeed Insightsなどのスコア向上に寄与します。
[5] VPI
ビューポートイメージ 【オン】
スクロールしないと見えない部分にある画像はスクロールした時に読み込むように遅延読み込みさせますが、スクロールせずに見える部分の画像遅延読み込みから除外するようにできます。QUIC.cloudのサービスを利用します。
[4]メディア設定 で 「画像遅延読み込み」がオンの場合のみ有効です。
ビューポートイメージCron 【オン】
この設定をオンにすると、ビューポートイメージの生成をバックグラウンドで自動実行できます。オフにした場合は手動で処理を実行する必要があります。
[6] 除外するメディア
各入力欄に除外対象の画像、クラス名などを入力すると、それらを遅延読み込みの対象から除外します。私は特に何も指定していません。
[7] ローカリゼーション
Gravatorキャッシュ 【オン】
この設定をオンにすると、Gravator（Wordpressのユーザに表示されるアバター画像）をローカルにキャッシュできます。コメント欄などでアバターアイコンを表示している場合は読み込み時間の短縮が期待できます。
GravatorキャッシュCron 【オン】
バックグラウンドで自動的にGravatorキャッシュを更新します。
GravatorキャッシュTTL 【604800】
Gravatorキャッシュの更新間隔を秒数で指定します。
リソースのローカライズ 【オフ】
外部サイトにあるJavaScriptは自分のサイト上で最適化できませんが、リソースのローカライズに設定することで、外部のJavaScriptなどを自分のサイト内にコピーして実行できるようになります。
私は外部のJavaScriptの実行を遅延読み込みさせており、ローカライズまでは必要なかったのでオフにしています。
ローカライズファイル 【指定なし】
リソースのローカライズがオンの場合、ローカライズ対象のURLを指定します。
[8] チューニング
JS遅延が含まれるもの 【空白】
ここに入力されたJSファイルやJavaScriptのコードは常に遅延対象になります。
JS除外 【空白】
ここに入力されたJSファイルやJavaScriptのコードは圧縮や結合の対象外になります。
JS Deferred / Delayed除く
ここに入力されたJSファイルやJavaScriptのコードは遅延の対象外になります。私は使用しているJQueryとDatatablesのJavaScriptを遅延させるとサイトの表示がおかしくなったため、以下のキーワードを指定して対象から除外しています。
- jquery
- datatables
ゲストモードのJSは除外 【空白】
ゲストモードがオンの場合、ゲストモードで最適化から除外したいJSファイルやJavaScriptのコードを指定します。
除外URI 【空白】
ページ丸ごと最適化から除外したい場合に、ページのURLを指定します。
ゲストのみに最適化 【オン】
この設定をオンにすると、ログインしていない訪問者に対してのみCSSとJavaScriptの最適化が行われます。オフにすると、ログインユーザごとに最適化が行われるのでサーバの保存容量を消費します。
ロール除外 【指定なし】
選択したロールは最適化から除外します。
[9] チューニング – CSS
CSS除外 【空白】
[1]CSS設定でCSSの圧縮や結合をオンにしていても、ここに入力されたCSSファイルやCSSのコードは圧縮や結合の対象から除外されます。
UCSSファイルの除外とインライン化 【空白】
[1]CSS設定でUCSSをオンにしているとき、ここに入力されたCSSファイルはUCSSから除外され、インラインの保存されます。
UCSSセレクターの許可リスト 【空白】
[1]CSS設定でUCSSをオンにしているとき、ここに入力したCSSのセレクターはUCSSに含まれるようになります。
UCSSURIを除く 【空白】
[1]CSS設定でUCSSをオンにしているとき、ここに入力したページではUCSSは生成されません。
別々のCCSSキャッシュポストタイプ 【空白】
[1]CSS設定でCSSを非同期読み込みオンにし、かつURLごとのCCSSをオンにしているときは投稿タイプごとにCCSSを作成しますが、ここに入力した投稿タイプはページ単位にCCSSを作成します。
個別のCCSSキャッシュURI 【空白】
[1]CSS設定でCSSを非同期読み込みオンにしているとき、ここに入力したURIは個別にCCSSを作成します。
クリティカルCSSルール 【空白】
[1]CSS設定でCSSを非同期読み込みオンにしているとき、ここに入力したCSSのコードをCCSSに追加します。