WordPressサイトヘルス「致命的な問題:ページキャッシュ検出」

Blog-Thumbnail_WordPress-01

はじめに

こんにちは、KUDs です。

今回の記事では、WordPress サイトヘルスにおける「致命的な問題: ページキャッシュ」について、具体的な実装手順を含め解説します。

WordPress サイトヘルスとは？

WordPress サイトヘルスは、あなたのウェブサイトの改善提案をしてくれる機能です。
この機能は、WordPressダッシュボードの「ツール」から確認できます。

サイトヘルスでは、パフォーマンスやセキュリティに影響を与える問題を指摘してくれます。
特に「致命的な問題」と指定されている問題は、ウェブサイトのパフォーマンスやセキュリティに大きな影響を及ぼす可能性があるため、迅速に対応すべきです。

本記事の目的

この記事では、「ページキャッシュが検出されず、サーバのレスポンスが遅くなっています」や「ページキャッシュが検出されましたが、サーバーのレスポンスはまだ遅いです」という特定の「致命的な問題」を取り上げ、原因と解決策について詳細に解説します。

WordPress サイトヘルスの致命的な問題「ページキャッシュが検出されましたが、サーバーのレスポンスはまだ遅いです」
WordPress サイトヘルスの致命的な問題「ページキャッシュが検出されましたが、サーバーのレスポンスはまだ遅いです」

また、その解決方法として、WP Fastest Cache という WordPress プラグインを用います。
さらに、CDN として Clouflare を利用している方向けに、連携手順を解説します。

WordPress サイトヘルスの「致命的な問題」と「おすすめの改善」

致命的な問題とは

WordPress サイトヘルスでは、特定の問題が「致命的な問題」と指定されます。
この問題を放置すると、様々な悪影響を及ぼす可能性があるため、迅速に改善しましょう。

  • ユーザエクスペリエンスの大幅な低下
  • SEO の悪化
  • 重大なセキュリティホール等

「おすすめの改善」とは

「おすすめの改善」では、サイトにとって重要な必須項目ではないものの、セキュリティやパフォーマンスの向上のために修正すべき項目をリストします。

致命的な問題「 ページキャッシュが検出されず、サーバのレスポンスが遅くなっています」

こちらの問題では、以下のことを示唆しています。

  • ページキャッシュは未導入
  • そして、レスポンス時間が長い

解決策としては「ページキャッシュの導入」を検討しましょう。

ページキャッシュとは

なお、ページキャッシュはウェブサイトの速度を大幅に向上させます。
これが検出されない場合、ウェブページの読み込み時間が長くなる可能性が高いです。
ページキャッシュは、WordPress プラグインを導入することで簡単に実装可能です。

レスポンス時間とは

サーバーのレスポンス時間とは、ユーザーがウェブページにアクセスするとき、そのリクエストがサーバーに到達してから、サーバーがレスポンスを返すまでの時間を指します。
この時間が長いほど、ユーザーがウェブページの読み込みを待つ時間も長くなります。

致命的な問題「 ページキャッシュが検出されましたが、サーバーのレスポンスはまだ遅いです」

こちらの問題では、以下のことを示唆しています。

  • ページキャッシュは導入済み
  • しかし、依然としてレスポンス時間が長い

解決策としては「ページキャッシュの設定の見直し」を検討しましょう。
それでも改善しない場合、リソースの負荷状況など、詳細な調査が必要になります。

おすすめの改善「ページキャッシュは検出されませんでしたが、サーバーのレスポンスは良好です」

こちらの改善では、以下のことを示唆しています。

  • ページキャッシュは未導入
  • しかし、レスポンス時間は短い

レスポンスは比較的速く、致命的な問題はありません。
しかし、「ページキャッシュの導入」を行うことで、更なるレスポンス時間の短縮やサーバの負荷軽減を期待できます。

WP Fastest Cache のインストール・設定手順

WP Fastest Cache とは

WordPress プラグイン「WP Fastest Cache」パフォーマンス比較
WordPress プラグイン「WP Fastest Cache」パフォーマンス比較

WordPressのキャッシュプラグインの一つです。
ウェブサイトのパフォーマンスを向上させることが可能です。

このプラグインは、ページを静的 HTML ファイルとしてキャッシングします。
サーバは訪問者に対してキャッシュからその HTML ファイルを高速に提供します。
これによって、ページの読み込み速度を向上させることができます。
加えて、サーバーはリソースの消費を大幅に抑制することが可能です。

WP Fastest Cache のインストール

まず、以下の手順で WordPress プラグイン「WP Fastest Cache」インストールします。

  • WordPress 管理画面にログイン
  • 左側メニューから、「プラグイン」→「新規追加」を選択
  • 「WP Fastest Cache」で検索
  • 「今すぐインストール」→「有効化をクリック」

これによって、キャッシュプラグイン「WP Fastest Cache」が有効化されます。

WP Fastest Cache の設定

次に、WP Fastest Cacheの設定画面に移動します。
左の管理メニューから「WP Fastest Cache」を選択します。
以下は、有効化するオプションの例です。

  • システム: キャッシュ有効化
  • モバイル: デスクトップ用のキャッシュをモバイルデバイスに表示しない
  • 新規投稿: 投稿や固定ページを公開時、キャッシュファイルを消去
  • 投稿更新: 投稿や固定ページを更新した時、キャッシュファイルを消去
  • HTML を縮小: 固定ページのサイズを減らせます
  • CSS を縮小: CSS ファイルのサイズを減らせます
  • CSS を統合: CSSファイルを統合してHTTPリクエストを減らす
  • JS を統合: js ファイルを統合して HTTP リクエストを減らす (header)
  • Gzip: サーバーから送信されたファイルのサイズを減らす
  • ブラウザ: キャッシュリピート訪問者にページ読み込み時間を減らす

最後に「Submit」ボタンをクリックすると設定が保存されます。

なお、有料版でのみ指定可能なオプションも存在します。
要件に応じて、アップグレードをご検討ください。

WP Fastest Cache の確認

設定を完了したら、キャッシュが正しく機能していることを確認しましょう。
これには、再度サイトヘルスのチェック機能を使用します。
致命的な問題「 ページキャッシュが検出されましたが、サーバーのレスポンスはまだ遅いです」が解消されていることを確認しましょう。

また、サイトの速度を計測するツールを使用して、ページロード速度が改善されたかどうかを確認することも重要です。

Cloudflare と WP Fastest Cache の連携

ここでは、CDN ※ として Cloudflare を利用している方向けに、WP Fastest Cache との連携手順について解説します。
Cloudflare を利用していない方は、読み飛ばしていただいて問題ありません。
※ CDN: Content Delivery Network

Cloudflare とは

こちらは、ウェブサイトのパフォーマンス向上とセキュリティ強化を提供するサービスです。Cloudflare の CDN 機能は、ウェブサイトのコンテンツを世界中のデータセンターにキャッシュし、訪問者が最も近いデータセンターからコンテンツを取得できるようにすることで、ウェブサイトのパフォーマンスを大幅に向上させます。

Cloudflare と WP Fastest Cache はどちらもキャッシュ機能を提供しています。
また、これらは完全な互換性があります。
これらの競合を最小限にするため、両者を連携する必要があります。

WP Fastest Cache と Cloudflare の連携方法

この連携には、2つの重要な目的があります。

  1. Cloudflare の設定変更によって、両者の間に発生する非互換性を予防
  2. WP Fastest Cache でキャッシュクリア時に、Cloudflare もパージ

両者の連携手順は、WP Fastest Cache 公式にて案内されています。

WP Fastest Cache Cloudflare
WP Fastest Cache is totally compatible with Cloudflare. In order to minimize potential conflicts, you need to Cloudflare...
www.wpfastestcache.com

一部、KUDs にて内容の補足をしつつ、以下に手順を記載します。

Cloudflare API トークンの作成

まずは、Cloudflare にて API トークンを作成します。

  1. https://dash.cloudflare.com/profile/api-tokens にアクセス
  2. 「トークンを作成する」 ボタンをクリック
  3. テンプレートとして「WordPress」を選択
  4. 「概要に進む」 ボタンをクリック
  5. 「トークンを作成する」 ボタンをクリック
  6. API トークンをコピー

Cloudflare API トークンの検証

念のため、以下のコマンドを実行し、API トークンの有効性を検証しておきましょう。

$ curl -X GET "https://api.cloudflare.com/client/v4/user/tokens/verify" \
     -H "Authorization: Bearer <your-api-token>" \
     -H "Content-Type:application/json"
{"result":{"id":"<your-id>","status":"active"},"success":true,"errors":[],"messages":[{"code":10000,"message":"This API Token is valid and active","type":null}]}

WP Fastest Cache CDN 設定

次に、WP Fastest Cache の CDN 設定画面から Cloudflareと

  1. WordPress 管理画面にログイン
  2. 「WP Fastest Cache」→「CDN」を選択
  3. 「CDN by Cloudflare」を選択
  4. 「Enter API Keys」セクションでは、API トークンをペーストして Next
  5. 「Disable Auto Minify」セクションでは、そのまま Next
    • Cloudflare Auto Minifiy は、HTML、CSS、JavaScript ファイルから不要な文字をすべて動的に削除することで、Web サイトのパフォーマンスを向上させます。
    • もちろん、Cloudflare にて有効化することも可能です。
      詳細は、以下公式サイトをご確認ください。
      https://developers.cloudflare.com/speed/optimization/content/auto-minify/
  6. 「Disable Rocket Loader」セクションでは、そのまま Next
    • Rocket Loader は、レンダリング後まですべての JavaScript の読み込みを延期することで、Web サイトのコンテンツ (テキスト、画像、フォントなど) を優先します。
    • もちろん、Cloudflare にて有効化することも可能です。
      詳細は、以下公式サイトをご確認ください。
      https://developers.cloudflare.com/speed/optimization/content/rocket-loader/
  7. 「Browser Cache Expiration」 セクションでは、そのまま Next
  8. Finish

これによって、Cloudflare と WP Fastest Cache の連携が完了します。

さいごに

この記事では、WordPress のサイトヘルス「致命的な問題」について、原因と対策を確認しました。
特に、「ページキャッシュ」問題に焦点を当て、WP Fastest Cache を使用した解決策を詳しく解説しました。
加えて、Cloudflare との連携手順についても解説しました。

その他、キャッシュ関連のよくある改善として、「おすすめの改善: 永続オブジェクトキャッシュを使用してください」があります。
こちらは、通常、キャッシュサーバ (Redis / Memcached) を用いて実現します。
以下の記事では、WordPress プラグイン Redis Object Cache と ElastiCache for Redis を連携させることで、永続オブジェクトキャッシュを実装しておりますので、興味があればご参照ください。

https://blog.kuds.win/wordpress/wordpress-persistent-object-cache-elasticache-redis/
【WordPress + ElastiCache】永続オブジェクトキャッシュ実装

以上です。
これからも WordPress の UX 向上のため、パフォーマンス改善に取り組んでいきましょう。

コメント