【解説】スコア100点とれた！PageSpeed Insights 最適化の「LiteSpeed Cache 設定方法」

>>アクセストレードに無料登録するときクーポンコード【 kpapa 】の入力で、
今だけ200円の報酬がもらえる♪（動画）

 

「ブログの表示速度が遅くて悩んでいませんか」

 

「読者のページ離脱率をさげたいと思いませんか」

 

「ブログの表示速度を速くする方法を知りたいと思いませんか」

 

この記事はそんな方へ向けて書いております

 

 

実は私のブログもメチャクチャ表示速度が遅くて悩んでいました。なぜならグーグルが提供している

 

Webサイトの表示速度を分析できるPageSpeed（ページスピード）のパフォーマンススコアがなんと、34点（遅い）と問題があったからです。

 

グーグルの調査では「ページ読み込みに3秒以上かかると53％の読者は離脱する」といわれているのでかなり重大な問題です。

 

しかし、私はあらゆる方法を試し失敗し挫折しながらもついにスコア100点を達成することができました。

 

この記事ではスコア34点の初心者ブロガーがたった1日で100点をとることができた方法を知ることができます。

 

結論、Webサイトの表示速度が早くなれば読者のストレスを減らし、読者の離脱率をさげ、読者満足度の高いWebサイトになります。

PageSpeed Insightsで計測した結果

PageSpeed Insightsとは？

簡単にいえば、グーグルが提供しているWebサイトの表示速度分析ツールで、パフォーマンススコアが90以上であれば速い、50～90であれば平均的、50未満は遅いと見なされます。

 

 

改善前のパフォーマンススコア 34点（モバイル）

ブログ環境

ブログ種類	ワードプレス
ワードプレステーマ	有料テーマ「JIN」
レンタルサーバー	ロリポップ！レンタルサーバー（ライトプラン）

 

改善前のパフォーマンススコア 81点（パソコン）

ブログ環境

ブログ種類	ワードプレス
ワードプレステーマ	有料テーマ「JIN」
レンタルサーバー	ロリポップ！レンタルサーバー（ライトプラン）

 

 

パソコンスコア81点はギリギリ平均レベルですが、モバイルスコア34点はかなり重症です。読者が離脱しないように改善が必要ですね。

 

パフォーマンスの問題を診断する6項目

 

 

First Contentful Paint（FCP）とは？

ページの読み込みが開始されてからページ内のコンテンツのいずれかの部分が画面上にレンダリングされるまでの時間を測定します。

Speed Index（SI）とは？

ページの読み込み中にコンテンツが視覚的に表示される速度を測定します。

SI（秒単位）	色分け	SIスコア
0〜3.4	緑（速い）	90〜100
3.4〜5.8	オレンジ（普通）	50〜89
5.8以上	赤（遅い）	0〜49

 

Largest Contentful Paint (LCP)とは？

表示される最も大きい画像またはテキストの表示時間を、ページの読み込み開始タイミングと比較します。

LCP（秒単位）	色分け	LCPスコア
0〜2.5	緑（速い）	90〜100
2.5〜4.0	オレンジ（普通）	50〜89
4.0以上	赤（遅い）	0〜49

 

Time to Interactive(TTI)とは？

ページの読み込みが開始されてから主なサブリソース（画像、フォントなど）の読み込みが完了するまでの時間を測定するもので、改善することでユーザーの入力に対してすばやく応答できるようになります。

TTI（秒単位）	色分け	TTIスコア
0〜3.8	緑（速い）	90〜100
3.9〜7.3	オレンジ（普通）	50〜89
7.3以上	赤（遅い）	0〜49

 

Total Blocking Time（TBT）とは？

長時間に渡りメインスレッド（実行命令）がブロックされ、入力の応答が妨げられることで発生する視覚コンテンツの初期表示時間と操作可能になるまでの時間の間の時間の合計を測定します。

TBT（ミリ秒単位）	色分け	TBTスコア
0〜200	緑（速い）	90〜100
200〜600	オレンジ（普通）	50〜89
600以上	赤（遅い）	0〜49

 

Cumulative Layout Shift（CLS）とは？

ページの表示中に発生した予期しないレイアウトシフト(レイアウトがずれる)ごとにレイアウトシフトスコアの最大値を測定します。

CLS	色分け	CLSスコア
0〜0.1	緑（速い）	90〜100
0.1〜0.25	オレンジ（普通）	50〜89
0.25以上	赤（遅い）	0〜49

 

パフォーマンススコア100点を出した改善方法とは？

やってみたのは、ロリポップ！レンタルサーバーをハイスピードプランに変更しました。理由は、ハイスピードプランは「LiteSpeed」第4世代のWebサーバーを使用しているので速くなるからです。

 

LiteSpeedは高速化・高負荷時の安定性に優れ、ワードプレスの速度はApache（通常のサーバー）のWebサーバーと比較すると84倍の性能になります。

 

ただ、ハイスピードプランに変更しただけでは、ほとんど効果がありません。大事なのはワードプレスのLiteSpeed Cacheプラグインを設定することです。

 

LiteSpeed Cacheプラグイン設定後のスコアは？

パフォーマンススコア 98点で速い（モバイル）

ブログ環境

ブログ種類	ワードプレス
ワードプレステーマ	有料テーマ「JIN」
レンタルサーバー	ロリポップ！レンタルサーバー（ハイスピードプラン）

 

パフォーマンススコア34点→98点に大幅アップしました。

 

 

パフォーマンスの問題を診断する6項目	改善後	改善前
First Contentful Paint（FCP）	2.0秒	2.3秒
Speed Index（SI）	2.0秒	5.5秒
Largest Contentful Paint (LCP)	2.0秒	8.0秒
Time to Interactive(TTI)	2.0秒	11.5秒
Total Blocking Time（TBT）	0ミリ秒	970ミリ秒
Cumulative Layout Shift（CLS）	0	0.17

 

パフォーマンススコア 100点で速い（パソコン）

ブログ環境

ブログ種類	ワードプレス
ワードプレステーマ	有料テーマ「JIN」
レンタルサーバー	ロリポップ！レンタルサーバー（ハイスピードプラン）

 

パフォーマンススコア81点→100点（満点）パーフェクト達成。

 

 

パフォーマンスの問題を診断する6項目	改善後	改善前
First Contentful Paint（FCP）	0.6秒	0.6秒
Speed Index（SI）	0.6秒	1.4秒
Largest Contentful Paint (LCP)	0.6秒	1.9秒
Time to Interactive(TTI)	0.6秒	2.3秒
Total Blocking Time（TBT）	0ミリ秒	30ミリ秒
Cumulative Layout Shift（CLS）	0	0.264

 

【スコア100点】LiteSpeed Cacheプラグイン設定方法

LiteSpeed Cache設定（変更ヵ所）

 

 

 

LiteSpeed Cache設定（全項目）

 

 

 

LiteSpeed Cache のダッシュボード

 

LiteSpeed Cashe ダッシュボードを使用すると、すべてのLSCacheおよびQUIC.cloudサービスのステータスを一目で確認することができます。

 

QUIC.cloud サービスの使用統計

 

QUIC.cloudダッシュボードの簡易版です。今月のQUIC.cloudサービスの使用割合を確認することができます。

 

なお、QUIC.cloudサービスは無料と有料版がありますが、別に登録しなくてもよいとおもいます。

 

 

LiteSpeed Cache の一般設定

一般設定画面

 

 

一般設定項目	設定（オン/オフ/空白）
自動アップグレード	オフ
ドメインキー	空白
ゲストモード	オフ
ゲストの最適化	オフ
サーバーIP	空白
通知	オフ

＊変更ヵ所赤字

 

チューニング設定画面

 

 

チューニング設定項目	設定（オン/オフ/空白/デフォルト）
ゲストモードのユーザーエージェント	デフォルト
ゲストモード IP	デフォルト

 

LiteSpeed Cache のキャッシュ設定

キャッシュ制御の設定画面

 

 

キャッシュ制御の設定項目	設定（オン/オフ/空白/デフォルト）
キャッシュを有効にする	オン
ログインしたユーザーをキャッシュ	オフ
コメントをキャッシュ	オン
REST API をキャッシュ	オフ
ログインページをキャッシュ	オフ
favicon.ico をキャッシュ	オフ
PHP リソースをキャッシュ	オン
モバイルをキャッシュ	オン
モバイルユーザエージェントのリスト	デフォルト
プライベートキャッシュ URIs	空白
URIs を強制キャッシュする	空白
パブリックキャッシュ URI を強制する	空白
クエリ文字列を落とす	デフォルト

＊変更ヵ所赤字・青字

 

TTL設定画面

 

TTL設定項目	設定（オン/オフ/空白/デフォルト）
デフォルトのパブリックキャッシュ TTL	デフォルト
デフォルトのプライベートキャッシュ TTL	デフォルト
デフォルトのフロントページ TTL	デフォルト
デフォルトのフィード TTL	デフォルト
デフォルトの REST TTL	デフォルト
既定の HTTP ステータスコードページ TTL	デフォルト

 

パージ設定画面

 

パージ設定項目	設定（オン/オフ/空白/デフォルト）
デフォルトのパブリックキャッシュ TTL	デフォルト
デフォルトのプライベートキャッシュ TTL	デフォルト
デフォルトのフロントページ TTL	デフォルト
デフォルトのフィード TTL	デフォルト
デフォルトの REST TTL	デフォルト
既定の HTTP ステータスコードページ TTL	デフォルト

 

除外設定画面

 

除外設定項目	設定（オン/オフ/空白/デフォルト）
URIs をキャッシュしない	空白
クエリ文字列をキャッシュしない	空白
カテゴリをキャッシュしない	空白
タグをキャッシュしない	空白
クッキー をキャッシュしない	空白
ユーザーエージェントをキャッシュしない	空白
ロールをキャッシュしない	空白

 

ESI設定画面

 

ESI設定項目	設定（オン/オフ/空白/デフォルト）
ESIを有効にする	オフ
管理バーをキャッシュ	オン
コメントフォームをキャッシュ	オン
ESI ノンス	デフォルト
グループを変更	デフォルト

 

オブジェクトキャッシュ設定画面

 

オブジェクトキャッシュ設定項目	設定（オン/オフ/空白/デフォルト）
オブジェクトキャッシュ	オン
方法	Memcached
ホスト	デフォルト
ポート	デフォルト
デフォルトのオブジェクトの有効期間	デフォルト
ユーザー名	空白
パスワード	空白
Redis データベース ID	デフォルト
グローバルグループ	デフォルト
グループをキャッシュしない	デフォルト
永続的な接続	オン
WP-Admin のキャッシュ	オン
Transients を格納	オン

＊変更ヵ所赤字

 

ブラウザのキャッシュ設定画面

 

ブラウザのキャッシュ設定項目	設定（オン/オフ/空白/デフォルト）
ブラウザキャッシュ	オン
ブラウザキャッシュ TTL	デフォルト

＊変更ヵ所赤字

 

高度な設定画面

 

高度な設定項目	設定（オン/オフ/空白/デフォルト）
ログインクッキー	空白
HTTP / HTTPS の互換性を向上させる	オフ
インスタントクリック	オフ

 

LiteSpeed Cache のCDN

CDN設定画面

 

CDN設定項目	設定（オン/オフ/空白/デフォルト）
QUIC.cloud CDN	オフ
CDN マッピングを使用	オフ
置換する HTML 属性	デフォルト
元の URL	デフォルト
含まれるディレクトリ	デフォルト
除外パス	空白
Cloudflare API	オフ

 

管理画面

 

管理設定項目	設定（オン/オフ/空白/デフォルト）
QUIC.cloud	デフォルト
Cloudflare	デフォルト

 

LiteSpeed Cache の画像の最適化

画像最適化の概要画面

 

画像最適化の概要設定項目	設定（オン/オフ/空白/デフォルト）
QUIC.cloud サーバーで画像を最適化する	デフォルト
最適化ステータス	デフォルト
ストレージの最適化	デフォルト

 

画像最適化設定画面

 

画像最適化設定項目	設定（オン/オフ/空白/デフォルト）
自動要求 Cron	オフ
自動戻し Cron	オン
オリジナル画像の最適化	オン
オリジナルバックアップを削除する	オフ
可逆最適化	オフ
EXIF / XMPデータを保存する	オン
WebPバージョンの作成	オン
WebP 画像への置換	オフ
WebP 属性を置換する	デフォルト
WebP の 特別な srcset	オフ
WordPress 画像品質管理	デフォルト

 

LiteSpeed Cache のページの最適化

CSS設定画面

 

CSS設定項目	設定（オン/オフ/空白/デフォルト）
CSS 圧縮化	オン
CSS 結合	オン
UCSS を生成する	オフ
UCSS インライン	オン
CSS の外部とインラインを組み合わせる	オン
CSSを非同期読み込み	オフ
URL ごとの CCSS	オン
インライン CSS 非同期ライブラリ	オン
フォント表示の最適化	Swap

＊変更ヵ所赤字

 

JS設定画面

 

JS設定項目	設定（オン/オフ/空白/デフォルト）
JS 圧縮化	オン
JS 結合	オン
JS は外部とインラインを組み合わせる	オフ
JS を遅延読み込み	遅延

＊変更ヵ所赤字

 

HTMLの設定画面

 

HTML設定項目	設定（オン/オフ/空白/デフォルト）
HTML 圧縮化	オン
DNS プリフェッチ	空白
DNS プリフェッチ制御	オン
HTML Lazy Load セレクタ	空白
クエリ文字列を削除	オフ
Google フォントを非同期に読み込む	オン
Google フォントを削除	オン
WordPress 絵文字を削除	オン
Noscript タグの削除	オフ

＊変更ヵ所赤字

 

メディア設定画面

 

メディア設定項目	設定（オン/オフ/空白/デフォルト）
画像 遅延読み込み	オフ
基本的な画像プレースホルダー	空白
レスポンシブプレースホルダー	オフ
レスポンシブプレースホルダー SVG	デフォルト
レスポンシブプレースホルダーの色	デフォルト
LQIP クラウドジェネレーター	オフ
LQIP 品質	デフォルト
LQIP 最小寸法	デフォルト
バックグラウンドでの LQIP の生成	オン
遅延読み込み iframe	オフ
不足しているサイズを追加する	オフ

 

除外するメディア設定画面

 

除外するメディア設定項目	設定（オン/オフ/空白/デフォルト）
遅延読み込み Imageを除外	空白
遅延読み込み Image クラス名を除外する	デフォルト
遅延読み込み Image 親クラス名を除外する	空白
遅延読み込み iframe クラス名を除外する	空白
遅延読み込み iframe 親クラス名を除外する	空白
遅延読み込み URI の除外	空白
LQIP を除外	空白

 

ローカリゼーション設定画面

 

ローカリゼーション設定項目	設定（オン/オフ/空白/デフォルト）
Gravator キャッシュ	オフ
Gravator キャッシュ Cron	オフ
Gravator キャッシュ TTL	デフォルト
リソースのローカライズ	オフ
ローカライズファイル	デフォルト

 

チューニング設定画面

 

チューニングの設定項目	設定（オン/オフ/空白/デフォルト）
CSS 除外	空白
JS 除外	デフォルト
UCSS 許可リスト	空白
UCSS URI を除く	空白
別々のCCSSキャッシュポストタイプ	空白
個別のCCSSキャッシュURI	空白
クリティカル CSS ルール	空白
JS 繰延を除外	空白
ゲストモードのJSは除外	オン
ロール除外	デフォルト

 

LiteSpeed Cache のデータベースの最適化

管理設定画面

 

管理設定項目	設定（オン/オフ/空白/デフォルト）
データベースの最適化	デフォルト
データベーステーブルエンジンコンバーター	デフォルト
データベースの概要	デフォルト

 

DB最適化設定画面

 

DB最適化設定項目	設定（オン/オフ/空白/デフォルト）
リビジョンの最大数	デフォルト
リビジョンの最大エイジ	デフォルト

 

LiteSpeed Cache のクローラー

概要画面

 

概要項目	設定（オン/オフ/空白/デフォルト）
クローラー Cron	デフォルト
クローラーステータスを見る	デフォルト

 

マップ画面

 

マップ項目	設定（オン/オフ/空白/デフォルト）
サイトマップリスト	デフォルト

 

ブロックリスト画面

 

ブロックリスト項目	設定（オン/オフ/空白/デフォルト）
ブロックリスト	デフォルト

 

一般設定画面

 

クローラーの一般設定項目	設定（オン/オフ/空白/デフォルト）
クローラー	オフ
遅延	デフォルト
実行時間	デフォルト
実行間隔	デフォルト
クローラー間隔	デフォルト
スレッド	デフォルト
タイムアウト	デフォルト
サーバー負荷制限	デフォルト

 

シミュレーション設定画面

 

クローラーシュミレーション設定項目	設定（オン/オフ/空白/デフォルト）
ロールシミュレーション	デフォルト
Cookie シミュレーション	デフォルト

 

サイトマップ設定画面

 

クローラーサイトマップ設定項目	設定（オン/オフ/空白/デフォルト）
カスタムサイトマップ	空白
サイトマップからドメインを削除	オン
サイトマップのタイムアウト	デフォルト

 

LiteSpeed Cache のツールボックス

パージ設定画面

 

パージ設定項目	設定（オン/オフ/空白/デフォルト）
パージ	デフォルト
パージ対象	空白

 

インポート/エクスポート設定画面

 

インポート/エクスポート設定項目	設定（オン/オフ/空白/デフォルト）
設定のエクスポート	デフォルト
設定のインポート	デフォルト
すべての設定をリセットする	デフォルト

 

.htaccess の表示設定画面

 

.htaccessの表示設定項目	設定（オン/オフ/空白/デフォルト）
.htaccess のパス	デフォルト
現在の .htaccess コンテンツ	デフォルト

 

ハートビート設定画面

 

ハートビート制御設定項目	設定（オン/オフ/空白/デフォルト）
フロントエンドハートビート制御	オフ
フロントエンド ハートビート TTL	デフォルト
バックエンドハートビートコントロール	オフ
フロントエンド ハートビート TTL	デフォルト
エディターハートビート	オフ
エディターハートビート TTL	デフォルト

 

レポート画面

 

LiteSpeedレポート設定項目	設定（オン/オフ/空白/デフォルト）
システム情報	デフォルト
パスワードなしのリンク	空白
メモ	空白

 

デバッグ設定画面

 

デバック設定項目	設定（オン/オフ/空白/デフォルト）
すべての機能を無効にする	オフ
デバッグログ	オフ
管理者 IP	デフォルト
デバッグレベル	基本
ログファイルのサイズ制限	デフォルト
クッキーをログに記録	オフ
クエリ文字列を折畳む	オフ
包含するデバッグ URI	空白
除外するデバッグ URI	空白

 

ログ表示画面

 

デバックログ設定項目	設定（オン/オフ/空白/デフォルト）
デバックログ	デフォルト

 

ベータテスト画面

 

ベータテスト設定項目	設定（オン/オフ/空白/デフォルト）
GitHubのバージョンを試す	デフォルト

 

変更ヵ所 まとめ

PageSpeed Insightsで検証してみる

 

 

＼　スコア100点は本当なのか？　／

 

【裏技】1分でスコア100点のLiteSpeed設定をする方法

裏技というのは、LiteSpeedのインポート機能を利用して、「スコア100点の設定ファイルを読み込む方法」です。

 

設定ファイルを読み込むことで簡単に一瞬で設定を変更することができます。

 

なお、「スコア100点の設定ファイル」はサイト下部からダウンロードできるようにしておいたのでご利用ください。

 

LiteSpeed設定のインポート方法

 

ダウンロードファイルはウイルス検査済みなので安心してダウンロードください。

 

もし、設定ファイルを読み込んでも環境が改善されない場合は設定をリセットできますので、お気軽にお試しください。

 

＼　スコア100点の設定ファイル！　／

 

LiteSpeed設定のエクスポート方法

 

なお、現在のLiteSpeed Cache設定を保存しておきたい場合は、「設定のエクスポート」ボタンを押すと簡単に設定ファイルをダウンロード保存することができます。

 

＼　スコア100点の設定ファイル！　／

 

LiteSpeed設定をすべてリセット方法

 

また、現在のLiteSpeed Cache設定をリセット（初期設定に戻したい）したい場合は、「すべての設定をリセットする」ボタンを押すと簡単にリセットすることができます。

 

＼　スコア100点の設定ファイル！　／

 

【体験談】楽天モバイルの申し込みエラー番号【0003】の対処方法！！楽天モバイルの総合的な審査に落ちると、エラー番号【0003】が表示されます。これは楽天モバイルの本人確認手続きが失敗したことで、不正検知システムが働いたのが原因です。つまり、入力したクレジットカード情報に不備があり正しくないことで不正検知システムが働き、審査に落ちた場合に表示されるのがエラー番号【0003】です。...