WordPressでCloudflareを使用してブラウザキャッシュを有効にする方法は？

ブラウザのキャッシュは、静的ファイルを一定期間保存または「キャッシュ」するようにブラウザに要求することでWebサイトを高速化する手法であり、次回のアクセス時に再度ダウンロードする必要はありません。 一言で言えば、これですべてです。

このチュートリアルでは、Cloudflareにexpiresヘッダーを追加する方法を学習します。これは、基本的に、静的リソースをキャッシュする期間をブラウザーに指示します。

ブラウザのキャッシュを使用する場合は、Webブラウザに、クライアントブラウザでローカルに画像、CSS、およびJavascriptファイルを保持する期間を指定する必要があります。 特定の標準と設定が使用されている場合、ユーザーのブラウザーはWebサイトページを閲覧するときに使用するデータが少なくなります（ダウンロードする必要のあるファイルが少なくなるため）。 WordPressでブラウザのキャッシュを使用すると、Webサイトの読み込み時間が短縮されます。

ブラウザキャッシングとは何ですか？

キャッシングは、データをキャッシュに保存するプロセスです。 キャッシュは、データの一時的な保存スペースにすぎません。

Webブラウザーでのコンテンツの一時的な保存は、ブラウザーのキャッシュと呼ばれます。 訪問者のWebブラウザは、さまざまなWebサイトリソースをダウンロードしてローカルドライブに保存します。 その中には、画像、HTMLファイル、JavaScriptファイルがあります。 Webページはすぐに読み込まれ、ユーザーが次にWebサイトにアクセスしたときに帯域幅の消費量が減少します。

キャッシングの利点

Webページは、クライアント、プロキシ、およびサーバーでプリフェッチしてキャッシュできます。 オンラインキャッシュには、Webパフォーマンスの向上など、多くの利点があります。

• キャッシングは、帯域幅の消費を減らし、ネットワークトラフィックを減らし、ネットワークの輻輳を減らします。
• 2つの理由から、キャッシュによってアクセス遅延が減少します。
  • a）頻繁にアクセスされるドキュメントは、遠くのデータサーバーからではなく、ローカルプロキシキャッシュから取得されるため、送信遅延が減少します。
  • b）キャッシュによりネットワークトラフィックが減少するため、パスに沿った輻輳が減少し、サーバーのワークロードが減少するため、キャッシュされていないドキュメントは、キャッシュされていないドキュメントよりもはるかに高速に取得できます。
• キャッシングは、WAN全体のプロキシキャッシュ間でデータを分散することにより、離れたWebサーバーのワークロードを最小限に抑えます。
• クラッシュまたはネットワークパーティショニングが原因でリモートサーバーが使用できない場合、クライアントはプロキシでキャッシュされたコピーを取得できます。 その結果、Webサービスの堅牢性が向上します。

ブラウザキャッシングはどのように機能しますか？

ブラウザのキャッシュがどのように機能するかについての説明は、次の図に示されています。

Webサーバーは、Webサイトからデータを収集し、それをブラウザウィンドウに送信します。 訪問者が初めての訪問者であるか、すでにサイトにアクセスしたことがあるかに応じて、キャッシュが実行されます。

これらの2つの例を見て、キャッシングがどのように機能するかを見てみましょう。

ケース1：初めてのユーザー

下の図は、人が初めてWebサイトにアクセスする状況を示しています。

Webブラウザーは、Webサイトに初めてアクセスしたときに、Webサーバーからデータを収集します。 これは、オンラインリソースがまだキャッシュされていないためです。 インターネットブラウザはオンラインリソースをキャッシュに保存するので、次にWebサイトにアクセスしたときにより良いエクスペリエンスを得ることができます。

ケース2：ユーザーはすでにWebサイトにアクセスしていました。

ユーザーが同じコンピューティングデバイスで2回目にWebサイトにアクセスした場合、2回目のアクセスは最初のアクセスよりも速く読み込まれます。 これは、Webブラウザーがキャッシュを使用して、画像、CSS、JavaScriptなどの静的Webリソースを取得するためです。 HTMLページはWebブラウザを介して配信されます。

このケースシナリオは、次の図に示されています。

上記の視覚化は、情報が最新であることを意味します。 「フレッシュコンテンツ」という用語は、まだ有効期限が切れておらず、キャッシュから取得できるものを指します。 古い素材とは、キャッシュの有効期限を過ぎたコンテンツであり、Webサーバーからのみ取得できます。

GTMetrixを使用してサイトを分析します

GTmetrixを使用してサイトを評価した場合、「Expiresヘッダーの追加」というエラーに気付いたかもしれません。

ブラウザのキャッシュヘッダーを確認するにはどうすればよいですか？

応答ヘッダーは、ブラウザーのキャッシュによって使用されます。 ブラウザはHTTPリクエストごとに「リクエストヘッダー」を送信し、サーバーは「レスポンスヘッダー」とデータで応答します。

サーバーは、ファイルをキャッシュする量（秒単位）をブラウザーに指示する「cache-control」と呼ばれる応答ヘッダーを指定します。

Chromeブラウザの右上にある3つのドット（ケバブメニュー）をクリックします

[その他のツール]->[開発者ツール]をクリックします

[ネットワーク]->[js]に、必要なフォルダーがあります。

jqueryファイルを開き、[ヘッダー]をクリックしてキャッシュコントロールを確認します。

ご覧のとおり、キャッシュファイルはドライブまたはメモリ（RAM）から瞬時にロードされます。

ブラウザのキャッシュにより、次のことが可能になります。

• サーバーの負荷を減らす必要があります。
• ページの読み込みにかかる時間を短縮する
• 帯域幅のコストを削減します。

Cloudflareを使用してブラウザキャッシュを有効にする方法（ExpiresヘッダーCloudflareを追加）？

Cloudflareを使用している場合は、プラグインを使用せずに2回クリックするだけで、各リクエストに有効期限ヘッダーを簡単に追加できます。

Cloudflareダッシュボードに移動します

ドメインを入力してください

左側のメニューから[キャッシュ]->[構成]をクリックします

[ブラウザキャッシュTTL]まで下にスクロールし、それに応じて期間を変更します

デフォルトでは4時間に設定されます。 2か月以上続くものに変更すれば完了です。

結論

ブラウザのキャッシュは、複数回のアクセスでファイルを再度取得する必要がないように、設定された期間ファイルを保存または「キャッシュ」するようにブラウザに指示することにより、Webサイトを改善するための戦略です。 一言で言えば、それがすべてです。

ブラウザのキャッシュを使用する場合は、クライアントブラウザに画像、CSS、およびJavascriptファイルを保持する期間をWebブラウザに通知する必要があります。 特定の標準と設定が適用されている場合、ユーザーのブラウザはWebサイトページを閲覧するときに消費するデータが少なくなります。 WordPressでブラウザのキャッシュを使用すると、Webサイトの読み込みにかかる時間が短縮されます。