はじめに
前回の記事ではWordfence・WPS Hide Login・UpdraftPlusを設定してWordPressサイトのセキュリティ対策の土台を整えました。今回はWordPressサイトの表示速度の改善を解説します。表示速度はユーザー体験に直結するだけでなく、Googleの検索順位にも影響する重要なSEO要素です。EWWW Image Optimizerによる画像最適化・WP Super CacheやLiteSpeed Cacheを使ったキャッシュ設定・CloudflareによるCDN導入まで、一通り手順を解説します。
1. 表示速度が重要な理由
1.1 Core Web Vitalsとは
Googleは2021年6月から「Core Web Vitals(コアウェブバイタル)」を正式なランキング要因として採用しています。表示が遅いサイトは検索順位が下がる可能性があります。主な指標を把握しておきましょう。
| 指標 | 意味 | 目標値 |
|---|---|---|
| LCP(Largest Contentful Paint) | 最大コンテンツの表示にかかる時間 | 2.5秒以内 |
| INP(Interaction to Next Paint) | 操作への応答速度 | 200ミリ秒以内 |
| CLS(Cumulative Layout Shift) | ページ読み込み中のレイアウトのずれ | 0.1以下 |
⚠️ 速度改善は公開後すぐに着手しましょう: Googleの調査によるとページの読み込みが3秒を超えると約53%のモバイルユーザーが離脱すると言われています。せっかく書いた記事も読まれる前に離脱されては意味がありません。本記事の対策を公開後すぐに実施してください。
2. 現在の速度を計測する
改善の前に、まず現状を数値で把握することが大切です。
2.1 PageSpeed Insights
Googleが提供する無料の速度計測ツールです。モバイル・PCそれぞれのスコアと具体的な改善提案を確認できます。
- PageSpeed Insights(https://pagespeed.web.dev/)にアクセスします。
- 計測したいURLを入力して「分析」をクリックします。
- スコアと改善提案の一覧を確認します。
| スコア | 評価 |
|---|---|
| 90〜100 | 🟢 優秀 |
| 50〜89 | 🟡 改善が必要 |
| 0〜49 | 🔴 早急に対応が必要 |
2.2 GTmetrix
より詳細な分析ができる無料ツールです。ウォーターフォールチャートで読み込みに時間がかかっているリソースを視覚的に確認できます。PageSpeed Insightsと合わせて使うと問題の原因を特定しやすくなります。(URL:https://gtmetrix.com/)
💡 計測前に確認: キャッシュプラグインを有効化している場合、計測前に一度キャッシュをクリアしてから計測すると正確な結果が得られます。
3. 画像最適化
WordPressサイトの表示速度低下の原因の多くは画像ファイルが大きすぎることです。画像を最適化するだけでPageSpeed Insightsのスコアが大幅に改善するケースも珍しくありません。
3.1 画像を適切なサイズで用意する
WordPressの本文エリアの表示幅はテーマにもよりますが最大1200px程度です。それ以上のサイズの画像をそのままアップロードしても表示品質は変わらず、ファイルサイズが無駄に大きくなるだけです。アップロード前に適切なサイズにリサイズしておきましょう。
| ツール | 特徴 | URL |
|---|---|---|
| Squoosh | ブラウザ上で圧縮・WebP変換ができる高機能ツール | https://squoosh.app/ |
| TinyPNG | PNG・JPEGをかんたんに圧縮できる定番ツール | https://tinypng.com/ |
3.2 EWWW Image OptimizerでWebP変換・遅延読み込みを設定する
EWWW Image Optimizerは、アップロードした画像を自動で圧縮・WebP変換してくれる定番プラグインです。WebPはJPEGと比較して同等の画質でファイルサイズが約25〜35%小さくなる次世代フォーマットです。
- 管理画面の**「プラグイン」→「新しいプラグインを追加」**から「EWWW Image Optimizer」を検索し「今すぐインストール」→「有効化」をクリックします。
- 「設定」→「EWWW Image Optimizer」→「基本」タブを開きます。
- 以下の項目にチェックを入れて保存します。
| 設定項目 | 推奨設定 | 効果 |
|---|---|---|
| メタデータを削除 | ✅ 有効 | 撮影情報などの不要データを削除してサイズ削減 |
| WebP変換 | ✅ 有効 | 対応ブラウザに自動でWebP画像を配信 |
| 遅延読み込み | ✅ 有効 | 画面外の画像をスクロール時にのみ読み込む |
- 既存画像を最適化するには**「メディア」→「一括最適化」**から「最適化されていない画像をスキャン」→「最適化を開始」をクリックします。
💡 遅延読み込みについて: 遅延読み込み(Lazy Load)を有効化すると、最初の画面に表示されていない画像の読み込みをスクロール時まで遅らせます。初期表示が大幅に高速化するため必ず有効化しておきましょう。
4. キャッシュ設定
4.1 キャッシュとは
WordPressは動的なシステムです。ページを表示するたびにPHPがデータベースに問い合わせてHTMLを生成するため、この処理が表示速度を遅くする一因になります。キャッシュとは生成したHTMLをあらかじめ保存しておき、次のアクセス時にそれをそのまま返す仕組みです。データベースへの問い合わせが不要になるため表示速度が大幅に向上します。
| 方式 | 処理の流れ |
|---|---|
| キャッシュなし | ユーザー → PHP処理 → DB問い合わせ → HTML生成 → 表示 |
| キャッシュあり | ユーザー → 保存済みHTMLをそのまま返す → 即座に表示 |
4.2 WP Super Cacheの設定
WP Super CacheはAutomattic(WordPressの親会社)が開発した信頼性の高いキャッシュプラグインです。設定がシンプルで初心者にも扱いやすいのが特徴です。
- 管理画面の**「プラグイン」→「新しいプラグインを追加」**から「WP Super Cache」を検索し「今すぐインストール」→「有効化」をクリックします。
- 「設定」→「WP Super Cache」→「簡単」タブを開きます。
- **「キャッシュを使用する(推奨)」**を選択して「ステータスを更新」をクリックします。これだけで基本的なキャッシュが有効になります。
- さらに効果を上げたい場合は**「詳細」タブ**で以下を有効化します。
| 設定 | 説明 |
|---|---|
| mod_rewrite キャッシュ | 最も高速なキャッシュ方式 |
| 圧縮されたページをキャッシュ | gzip圧縮でファイルサイズをさらに削減 |
⚠️ テーマやプラグインの更新後はキャッシュをクリアしましょう: キャッシュが残っていると古い表示のままになることがあります。「WP Super Cache」→「コンテンツを削除」から手動でクリアするか、更新後に自動クリアされる設定を確認してください。
4.3 LiteSpeed Cache(エックスサーバー・ConoHa WING推奨)
エックスサーバーやConoHa WINGを使っている場合はLiteSpeed Cacheが利用できます。サーバーレベルで動作するため処理が非常に高速で、WP Super Cacheよりも高いパフォーマンスが期待できます。
- 管理画面の**「プラグイン」→「新しいプラグインを追加」**から「LiteSpeed Cache」を検索し「今すぐインストール」→「有効化」をクリックします。
- 「LiteSpeed Cache」→**「キャッシュ」**を開きます。
- 「キャッシュを有効にする」をオンにして保存します。
💡 WP Super CacheとLiteSpeed Cacheは同時に有効化しないでください: キャッシュプラグインを複数同時に使うと競合が起きる場合があります。レンタルサーバーを使っている場合はLiteSpeed Cache、それ以外の環境ではWP Super Cacheを使いましょう。
5. CDNの導入(Cloudflare)
5.1 CDNとは
**CDN(Content Delivery Network)**は世界中に分散したサーバーにサイトのコンテンツをキャッシュし、ユーザーに最も近いサーバーからコンテンツを配信する仕組みです。日本のサーバーにホスティングしているサイトでも、CDNを使うことで海外ユーザーへの配信が高速化されます。また、DDoS攻撃の軽減やSSL証明書の自動発行といったセキュリティ面のメリットもあります。
| 機能 | 内容 |
|---|---|
| コンテンツキャッシュ | 静的ファイルをエッジサーバーにキャッシュして高速配信 |
| DDoS軽減 | 大量アクセスによる攻撃をCloudflare側で吸収 |
| SSL証明書 | 無料でHTTPS化に対応(自動更新) |
| ファイアウォール | 悪意のあるボットやIPをブロック |
5.2 Cloudflareの導入手順
Cloudflareは世界最大規模のCDNサービスです。無料プランでも個人ブログには十分な機能が揃っています。
ステップ1:Cloudflareにサインアップする
- cloudflare.com にアクセスして「サインアップ」をクリックします。
- メールアドレスとパスワードを登録します。
ステップ2:サイトを追加してネームサーバーを変更する
- ダッシュボードで「サイトを追加する」をクリックします。
- 自分のドメイン(例:example.com)を入力してプランは「Free」を選択します。
- Cloudflareが現在のDNSレコードを自動でインポートします。内容を確認して「続行」をクリックします。
- Cloudflareから2つのネームサーバー(例:
alice.ns.cloudflare.com/bob.ns.cloudflare.com)が提示されます。 - ドメインを購入したレジストラ(お名前.com・ムームードメインなど)の管理画面でネームサーバーをCloudflareのものに変更します。
- 反映には最大24〜48時間かかります(通常は数時間以内)。Cloudflareのダッシュボードで「有効」と表示されたら完了です。
ステップ3:SSLの設定を確認する
- Cloudflareダッシュボードの「SSL/TLS」→「概要」を開きます。
- **「フル(厳密)」**を選択します(レンタルサーバー側でもSSL設定済みであることが前提です。第十弾でエックスサーバーやConoHa WINGのSSLを設定済みであれば問題ありません)。
⚠️ SSL設定を「フレキシブル」にしないでください: 「フレキシブル」はサーバーとCloudflare間の通信が暗号化されないため、セキュリティ上のリスクがあります。必ず「フル(厳密)」を選択してください。
5.3 WordPressとCloudflareの連携設定
Cloudflare導入後はWordPress管理画面のキャッシュがCloudflareにキャッシュされないよう除外設定を行います。
- Cloudflareダッシュボードの**「ルール」→「ページルール」**を開きます。
- 「ページルールを作成する」をクリックします。
- URL欄に
yourdomain.com/wp-admin/*と入力します。 - 設定で「キャッシュレベル」→**「バイパス」**を選択して保存します。
💡 Cloudflare公式プラグインも活用しましょう: 管理画面の**「プラグイン」→「新しいプラグインを追加」**から「Cloudflare」を検索してインストールすると、WordPressとCloudflareをかんたんに連携できます。プラグインからキャッシュのクリアや設定変更が管理画面内で行えるようになります。
6. 速度改善チェックリスト
✓ PageSpeed InsightsでスコアがGreen(90点以上)になっているか
✓ EWWW Image OptimizerのWebP変換・遅延読み込みが有効化されているか
✓ 既存の画像を一括最適化済みか
✓ WP Super Cache または LiteSpeed Cache が有効化されているか
✓ Cloudflareのネームサーバー変更が完了してダッシュボードが「有効」になっているか
✓ CloudflareのSSL設定が「フル(厳密)」になっているか
✓ /wp-admin/ のキャッシュをバイパスするページルールを設定済みか*
✓ WordPressのPHPバージョンが最新版(8.2以上)になっているか
✓ 使っていないプラグインを無効化・削除済みか
まとめ
今回はWordPressの表示速度改善として画像最適化・キャッシュ設定・CDN導入を解説しました。ポイントをまとめると:
- 画像はアップロード前にリサイズしてEWWW Image OptimizerでWebP変換・遅延読み込みを有効化する
- WP Super CacheまたはLiteSpeed Cacheでサーバーの負荷を下げてページの初期表示を高速化する
- CloudflareのCDNを導入してコンテンツを世界中のエッジサーバーから高速配信する
- 改善後はPageSpeed Insightsで再計測してスコアの変化を確認する
- PHP・テーマ・プラグインを常に最新版に保つことがパフォーマンスと安全性の両方に効く
次の記事では、WordPressのカスタムテーマ開発の入門として functions.php の基礎・テンプレート階層・子テーマの作成方法について解説します。お楽しみに!
コメント