導入文
記事が増えるにつれて「なんかブログが重い…」と感じていませんか？ 私のブログもPageSpeedで「改善が必要」と出ており、読み込みに3秒以上かかっていました。
そこで導入したのが、Autoptimize と W3 Total Cache。どちらも無料で使える人気プラグインです。この2つを正しく設定したら、LCPが3.2秒 → 1.9秒に改善しました！
ここでは、私が実際に設定した手順を初心者向けに解説します。
1. Autoptimizeの設定
コード（HTML/CSS/JS）を圧縮して、ページの表示を軽くしてくれるプラグインです。
- 「プラグイン → 新規追加」で「Autoptimize」を検索 → インストール＆有効化
- 「設定 → Autoptimize」を開く
HTML/CSS/JSを最適化
- HTMLコードを最適化 → チェックON
- CSSコードを最適化 → チェックON
- JavaScriptコードを最適化 → チェックON
Googleフォントの設定
「Googleフォント」欄で「結合とヘッダーで遅延リンク（display:swap）」を選択。 フォント読み込み時のズレを防ぎ、CLS改善に効果的です。
2. W3 Total Cacheの設定
Autoptimizeと組み合わせてキャッシュ（保存データ）を効率化するプラグインです。
- 「プラグイン → 新規追加」で「W3 Total Cache」を検索 → インストール＆有効化
- 「Performance → General Settings」を開く
有効化すべき項目
- Page Cache：ON（Disk: Enhanced）
- Database Cache：ON
- Object Cache：ON
- Browser Cache：ON
- Minify：OFF（Autoptimizeと重複）
⚠️ 注意： キャッシュ系プラグインを複数入れると競合することがあります。 Autoptimize + W3TCの2つだけで十分です。
3. キャッシュ削除のタイミング
デザインやCSSを修正したあと、反映されない場合はキャッシュが原因です。
- Autoptimize → 「キャッシュを削除」ボタンをクリック
- W3 Total Cache → 「すべてのキャッシュを削除」をクリック
4. 実際の改善結果
| 指標 | 変更前 | 変更後 |
|---|---|---|
| CLS | 0.10 | 0.08 |
| LCP | 3.2秒 | 1.9秒 |
| INP | 150ms | 100ms |
体感でもページがサクサクになり、モバイルでの表示遅延がなくなりました。
まとめ
- Autoptimize：コード最適化（HTML/CSS/JS）
- W3 Total Cache：キャッシュ最適化
- この2つの組み合わせで、誰でも速度改善できる
「サイト速度＝読者体験の快適さ」。 少しの設定で大きく変わるので、ぜひ試してみてください。
コメント