「ブログの表示速度が遅くて悩んでいませんか」
「読者のページ離脱率をさげたいと思いませんか」
「ブログの表示速度を速くする方法を知りたいと思いませんか」
この記事はそんな方へ向けて書いております
底辺社員(20年)→2020年11月に経験ゼロからスタートし、投資利益200万円/ブログ収益月5万円達成したパパです、宜しくお願いします。
実は私のブログもメチャクチャ表示速度が遅くて悩んでいました。なぜならグーグルが提供している
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)とは?
ページの読み込みが開始されてからページ内のコンテンツのいずれかの部分が画面上にレンダリングされるまでの時間を測定します。
FCP(秒単位) | 色分け | FCPスコア |
0~1 | 緑(速い) | 90〜100 |
1~2.5 | オレンジ(普通) | 50〜89 |
2.5以上 | 赤(遅い) | 0〜49 |
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設定(変更ヵ所)

画像最適化にはワードプレスプラグインの、EWWW Image Optimizer(イーダブルダブルダブル イメージ オプティマイザー)の方が効果が大きいのでインストールしておいてください。
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 ノンス | デフォルト |
グループを変更 | デフォルト |
オブジェクトキャッシュ設定画面

オブジェクトキャッシュ設定項目 | 設定(オン/オフ/空白/デフォルト) |
オブジェクトキャッシュ | オン |
方法 | |
ホスト | デフォルト |
ポート | デフォルト |
デフォルトのオブジェクトの有効期間 | デフォルト |
ユーザー名 | 空白 |
パスワード | 空白 |
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 サーバーで画像を最適化する | デフォルト |
最適化ステータス | デフォルト |
ストレージの最適化 | デフォルト |
画像最適化にはワードプレスプラグインの、EWWW Image Optimizer(イーダブルダブルダブル イメージ オプティマイザー)の方が効果が大きいのでインストールしておいてください。
画像最適化設定画面

画像最適化設定項目 | 設定(オン/オフ/空白/デフォルト) |
自動要求 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のバージョンを試す | デフォルト |
変更ヵ所 まとめ
- LiteSpeed Cache の一般設定→ 一般タブ
- LiteSpeed Cache のキャッシュ設定→ キャッシュタブ
- LiteSpeed Cache のキャッシュ設定→ オブジェクトタブ
- LiteSpeed Cache のキャッシュ設定→ ブラウザタブ
- LiteSpeed Cache ページの最適化→ CSS設定タブ
- LiteSpeed Cache ページの最適化→ JS設定タブ
- LiteSpeed Cache ページの最適化→ HTMLの設定タブ
PageSpeed Insightsで検証してみる

\ スコア100点は本当なのか? /
【裏技】1分でスコア100点のLiteSpeed設定をする方法

裏技というのは、LiteSpeedのインポート機能を利用して、「スコア100点の設定ファイルを読み込む方法」です。
設定ファイルを読み込むことで簡単に一瞬で設定を変更することができます。
なお、「スコア100点の設定ファイル」はサイト下部からダウンロードできるようにしておいたのでご利用ください。
LiteSpeed設定のインポート方法

- LiteSpeedCacheツールボックスを選択
- インポート/エクスポートを選択
- 設定のインポートの「ファイルを選択」でLiteSpeed設定ファイルを選択
- 選択したらインポートボタンを押して設定完了
ダウンロードファイルはウイルス検査済みなので安心してダウンロードください。
もし、設定ファイルを読み込んでも環境が改善されない場合は設定をリセットできますので、お気軽にお試しください。
\ スコア100点の設定ファイル! /
LiteSpeed設定のエクスポート方法

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

また、現在のLiteSpeed Cache設定をリセット(初期設定に戻したい)したい場合は、「すべての設定をリセットする」ボタンを押すと簡単にリセットすることができます。
\ スコア100点の設定ファイル! /
