はじめに
最近「Web配信の技術」という本を読みました。
そういえば、このサイトもなんだか表示が遅いな……と思い立ちました。
ロリポップには「ハイスピードプラン」もありますが、月額料金が上がるのでできればあまりやりたくないのが本音です（現在このサイトはライトプランで運営していて、サーバー代は月300円程度。現状でも若干赤字です笑）。
そこで、無料で使えるCDNを導入して表示速度を改善してみることにしました。
結論
先に結論から言うと、GTmetrixの評価が「D」から「B」へ大幅改善しました！
特に2回目以降の訪問やページ遷移での体感速度が劇的に向上しました。ロリポップのライトプランでも設定次第でまだまだ舞えます。
CDNとは
めちゃめちゃ簡単に雑に説明します。
Webページはテキストや画像で構成されていますが、これらはサーバーという「遠くの場所」に置いてあります。
ユーザーがWebページを表示するには、毎回その遠くにあるデータを取りに行って帰ってくる必要があります。
道のりが長いため、ページの表示に時間がかかってしまうわけです。
そこで、ユーザーの近くの場所に予めテキストや画像をキャッシュ（保存）しておきます。
そうすると行って帰ってくる道のりが短くて済むので、ページの表示も早くなります。
このように、ユーザーの近くにデータを置いて高速化する仕組みのことをCDNと言います。
（※めちゃくちゃ雑な説明なので雰囲気だけ受け取ってください！）
導入・設定したこと
「ロリポップ ライトプラン 高速化」「ロリポップ cdn」などで検索し、先人たちの知恵を大いに参考にさせてもらいました。
CDNはCloudflareのフリープランで十分使えそうだったため、プラグインの「Super Page Cache for Cloudflare」と連携して導入しました。
Cloudflareの導入は以下のサイトを参考にしました。
各種ツールの機能が競合しないよう注意しつつ、最終的に以下のような設定に落ち着きました。
Cloudflare & Super Page Cache for Cloudflare
Cloudflare APIキーで連携し、プラグイン側では以下の4つのみを有効化しました。
- Cloudflare CDN & Caching
- Minify HTML
- Optimize Google Fonts
- Automatically purge the cache when WP-Optimize flushes page cache
それ以外は無効にしています。特に「Disk Page cache」はCloudflareのキャッシュと競合する可能性があるとGeminiが言っていたので無効化しました。
Cocoon側の設定
テーマ（Cocoon）側の「高速化」設定を見直しました。
- CSS縮小
- JS縮小
- 遅延読み込み
- 事前読み込み
上記のみを有効にし、他の機能はすべて無効化しました。
WP-Optimize側の設定
データベースの最適化と画像圧縮機能のみを有効にし、キャッシュや軽量化機能はプラグイン同士の競合を防ぐため無効にしました。
ビフォーアフターの計測結果
GTmetrix
GTmetrixでの計測結果です。Overall GradeがDからBへアップしました！
| 項目 | 導入前 (Before) | 導入後 (After) | 変化 |
| GTmetrix Grade | D (68%) | B (83%) | 改善 |
| Performance Score | 53% | 77% | +24% |
| Structure Score | 90% | 92% | +2% |
| Largest Contentful Paint (LCP) | 2.9s | 1.7s | -1.2s |
| Total Blocking Time (TBT) | 285ms | 244ms | -41ms |
| Cumulative Layout Shift (CLS) | 0.13 | 0.13 | 0 |
| Total Page Size | 1.03MB | 1.00MB | -28.8KB |
| Total # of Requests | 62 | 58 | -4 |
その他の指標は以下のようになっています。
各グラフ上段(薄い色)がbefore、下段(濃い色)がafterです。
PageSpeed Insights
PageSpeed Insightsでも計測してみました。モバイルでは大幅改善と大幅悪化が両方ある結果になりました。
| 項目 | 導入前 (Before) | 導入後 (After) | 変化 |
| First Contentful Paint (FCP) | 3.0秒 | 7.6秒 | +4.6秒（悪化） |
| Largest Contentful Paint (LCP) | 4.6秒 | 9.5秒 | +4.9秒（悪化） |
| Total Blocking Time (TBT) | 170ミリ秒 | 0ミリ秒 | -170ミリ秒（改善） |
| Cumulative Layout Shift (CLS) | 0.804 | 0 | -0.804（改善） |
| Speed Index | 6.3秒 | 7.6秒 | +1.3秒（悪化） |
デスクトップはほとんど変化ありませんでした。
| 項目 | 導入前 (Before) | 導入後 (After) | 変化 |
| First Contentful Paint (FCP) | 0.8秒 | 0.8秒 | なし |
| Largest Contentful Paint (LCP) | 1.3秒 | 1.4秒 | ほぼなし |
| Total Blocking Time (TBT) | 10ミリ秒 | 10ミリ秒 | なし |
| Cumulative Layout Shift (CLS) | 0.14 | 0.14 | なし |
| Speed Index | 2.0秒 | 2.2秒 | ほぼなし |
やっでみて分かったこと・感想
PageSpeed Insightsの測定値にはバラつきが出たものの、実際の体感速度は一気に向上しました！
そもそも導入前はブラウザやサーバー側のクライアントキャッシュ設定が適切に有効化されていなかったようで、2回目以降のアクセスや別ページへの遷移スピードが劇的に改善されたと感じます。
月額300円程度のロリポップ ライトプランでも、Cloudflareなどの無料CDNと設定の整理を組み合わせればある程度快適に動かせそうです。「ライトプランだけど重くて困っている」という方は試してみる価値アリです！
