WordPressサイトにCloudflareフルページキャッシュを設定する方法

2019年3月25日

Cloudflareは、DNS、CDN、セキュリティサービスなどを提供する一般的なサービスです。 それは頻繁に彼らのウェブサイトをスピードアップし、安全にするためにWordPressサイト所有者によって使用されます。 デフォルトでは、CloudflareはCSS、JS、画像などの静的アセットを自動的にキャッシュします。 もう少し手間をかけて、Cloudflareは「すべてをキャッシュする」ように設定することもできます。つまり、Webサイトの静的なHTMLコピーは、世界中のCloudflareの広範なデータセンターのネットワークからキャッシュされ、配信されます。 この記事では、Cloudflareの「フルページキャッシュ」機能について、そしてそれがあなたのWordPressサイトにとって良い選択肢であるかどうかについてさらに学ぶことができます。

全ページキャッシュを使用する必要のある人

Cloudflareのフルページキャッシュ機能はすべての人のためではありません。一般に、大部分が動的なWebサイトを使用しているWordPressユーザーは全ページキャッシュを有効にしないでください。動的なWordPressサイトの一例はWooCommerceストアです。これには「カートに入れる」機能と請求機能が必要です。 Cloudflareのフルページキャッシュがオンになっていると、ある顧客のカートがキャッシュされて他の顧客に配信されます。同様に、チェックアウトページの名前や住所などの個人的な請求の詳細もキャッシュされる可能性があります。

標準のブログまたは簡単なビジネスWebサイトを運営している場合は、Cloudflareフルページキャッシュを有効にすると、パフォーマンスが大幅に向上する可能性があります。留意すべき唯一のことは、WordPressのデフォルトのコメントシステムはフルページキャッシュではうまくいかないかもしれないということです — 新しいコメントはCloudflareキャッシュがクリアされるまで現れないでしょう。上記の情報に基づいて、このWebサイトはCloudflareフルページキャッシュの最適な候補です。ストア機能、コメント、連絡先フォームがまったくないためです。

Cloudflareフルページキャッシュを設定する方法

WordPressサイトにCloudflareのフルページキャッシュを設定するには、下の画像のようなページルールを作成する必要があります。必ず decrypto.net を自分のドメイン名に置き換えてください。

Cloudflareフルページキャッシュスピードテスト

以下は、Cloudflareフルページキャッシュを無効または有効にした場合の速度テストの2つの例です。 参考までに、私のオリジンサーバーはロサンゼルスにあり、スピードテストはサンフランシスコと東京のKeyCDNのスピードテストツールを使って行われました。

サンフランシスコ — 全ページキャッシュ無効

私のオリジンサーバーはロサンゼルスにあるので、Cloudflareのフルページキャッシュを無効にしてもパフォーマンスはすでに素晴らしいです。

サンフランシスコ — フルページキャッシュが有効

Cloudflareのフルページキャッシュを有効にすると、ページロード時間は40%短縮され、わずか98.913ミリ秒になりました。

東京 — 全ページキャッシュ無効

オリジンサーバーとクライアントの間に地理的な距離がある場合は、Cloudflareフルページキャッシュの効果がはるかに明らかになります。 Decryptoには Kinstaの高性能Webホスティングを使用しているので、Cloudflareのフルページキャッシュを無効にして東京からKeyCDNのスピードテストツールを実行する 587.867ミリ秒の非常に速いページロード時間が発生しました。

東京 — 全ページキャッシュが有効

Cloudflareフルページキャッシュを有効にすると、ページロード時間は89%減の64.395ミリ秒に短縮されました。つまり、Cloudflareのフルページキャッシュを使用すると、東京からの訪問者はこのWebサイトを9倍速く閲覧することができます — Decryptoには日本語、韓国語、および中国語のコンテンツもあるため、これは非常に重要です。

Cloudflareフルページキャッシュの回避

サイト全体でフルページキャッシュを有効にすることはお勧めできません。このような比較的静的なサイトでも、Cloudflareのフルページキャッシュ機能によってキャッシュされるべきではないページがいくつかあります — ホームページとアーカイブページは2つの例です。幸い、WordPressサイトでCloudflareのフルページキャッシュを選択的に回避する方法はいくつかあります。

Cloudflare WordPressプラグイン

Cloudflareの公式のWordPressプラグインには、Webサイトの外観を変更したときに自動的にキャッシュを消去する “自動キャッシュ消去”機能があります。 「おそらく、これは、新しい投稿が公開された場合、または既存の投稿が更新された場合でも、プラグインが自動的にキャッシュを消去することを意味します。私は個人的に私のWordPressサイトでこのプラグインを使用しません。私はできるだけ少ないプラグインをインストールしたいからです。このプラグインが宣伝どおりに機能する場合は、必要に応じてCloudflareのキャッシュを自動的にクリアすることで、本質的に種類のバイパスとして機能します。

選択的クラウドフレアページルール

選択的ページルールの設定は、DecryptoでCloudflareフルページキャッシュに現在使用している方法です。この方法の利点は、設定が簡単で簡単だということです。この方法の欠点は、通常3つ以上のページルールが必要なため無料ではないことです。私にとって、これは問題ではありません。CloudflareのPro Planに20ドルを支払うので、20のページルールとその他の便利な機能がたくさん付いています。

これが私のCloudflareページのルールがどのように見えるかです。

ページルールは「最初の一致、最初の配信」という原則で機能するため、「包括的な」URL * decrypto.net / * は優先度リストの末尾にあります。 キャッチオールURLの上には、フルページキャッシュを有効にしないでください。 Cloudflareのフルページキャッシュを非常にきめ細かいレベルで制御できるので、この方法が好きです。 無料のCloudflareプランを使用していてこの方法を使用したい場合は、5つの追加ページルールに月5ドルを支払うことをお勧めします。

オリジンサーバーのキャッシュ制御

Cloudflareの “cache-control”設定は “既存のヘッダを尊重する”ように設定することができます — これはCloudflareがオリジンサーバのcache-control設定を上書きしないことを意味します。 したがって、以下のPHPコードを対応するページテンプレートに追加することで、Cloudflareが特定のページをキャッシュしないようにすることができます。

<?php

header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");

?>

技術的なスキルとサーバー構成のレベルによっては、カスタムキャッシュ制御ヘッダーを追加することは、特定のページでフルページキャッシュをバイパスするのに適した方法です。 たとえば、上記のコードを index.php テンプレートに追加すると、Cloudflareにホームページがキャッシュされないようになります。

まとめ

CloudflareフルページキャッシュはWordPressサイトを高速化するための強力なツールです — 特に海外からの訪問者にとって。 通常のブログまたは静的ビジネスWebサイトを運営している場合は、Cloudflareフルページキャッシュの設定を検討することを強くお勧めします。 WooCommerceストアやbbPressフォーラムのような動的なサイトを運営している場合でも、特定のURL構造に実装することでCloudflareフルページキャッシュの利点を享受することができます。


質問は?

ツイッターまたはメールで問い合わせ。