ピークパフォーマンスのためにウェブサイトをキャッシュする方法：Webキャッシングの初心者向けガイド

ウェブサイトのキャッシュ方法を学ぶことが不可欠です。キャッシュは、ウェブサイトのパフォーマンス、ユーザーエクスペリエンス、SEOにおいて重要です。それを実装する方法はいくつかありますが、この投稿でそれについてすべてを学びます。

以下では、キャッシュとは何か、どのように機能するか、その利点、存在するさまざまなタイプについて説明します。その後、ウェブサイトのキャッシュを有効にするために使用できる3つの異なる方法と、パフォーマンスへの影響を指摘するケーススタディを示します。最後に、Webサイトのキャッシュをクリアする方法と理由をすばやくカバーします。

キャッシュとは何ですか？

最も基本的なレベルでは、キャッシュとは、ファイルのコピーをキャッシュ（一時的なストレージの場所）に保存することを意味し、迅速なアクセスを可能にします。これは、ブラウザー、プログラム、オペレーティングシステムなど、ソフトウェアおよびテクノロジーの多くの分野で使用される方法です。

Webサイトはさまざまなタイプのファイルで構成されているため、キャッシュにも完全に適しています。サイトのHTML、CSS、JavaScript、およびImageファイルを保存して、ブラウザがより迅速にアクセスし、ウェブサイトをより速く表示できるようにすることができます。

一部のタイプのコンテンツは、他のコンテンツよりもキャッシュに適しています。たとえば、頻繁に変更されないサイト要素を意味する静的コンテンツは、それに最適です。あなたのウェブサイトのロゴは、それを頻繁に切り替える可能性が低いため、良い例です。

一方、頻繁に変更されるコンテンツは別のストーリーです。同様にキャッシュすることもできますが、訪問者が時代遅れのバージョンを見ないようにするためにルールを導入する必要があります。それについてはもうすぐ。

ウェブサイトのキャッシュの利点

ウェブサイトをキャッシュする主な理由は、パフォーマンスを改善することです。ブラウザがウェブサイトを表示するために必要なファイルをより迅速に使用できる場合、訪問者はサイトをより速く見ることができます。

これにより、ユーザーエクスペリエンスが向上するため、訪問者はサイトに長く留まる可能性が高くなり、製品を購入するなどの希望のアクションを実行したり、後で返したりする可能性が高くなります。あなたの変換率と最終結果のためのすべての朗報。

サイトの速度は、検索エンジンが気にするものでもあります。 Googleは、10年以上にわたってランキングファクターとして使用しています。さらに、そのコアWebバイタルメトリックは、ユーザーにページがどの速度に表示されるか、ユーザー入力にどの速度に応答するかを具体的に測定します。

さらに、キャッシュはサーバーからストレスを取り除きます。繰り返し訪問者があなたのサイトからダウンロードする必要があるファイルの数と、あなたのサーバーが同時に対処しなければならないリクエストの数を減らします。さらに、キャッシュすることで、一部の作業を外部サーバーに外注することさえできます。

これは、あなたのウェブサイトがより人気になるときに特に重要です。キャッシュは、サーバーが圧倒されないようにするのに役立ちます。さらに、限られたホスティングプランになっている場合、帯域幅とコストを節約します。

キャッシュの種類は何ですか？

ロードプロセスのさまざまなレベルでWebサイトをキャッシュすることができます。主なタイプは2つあります。サーバーとクライアント側のキャッシュです。

クライアント側のキャッシュは、訪問者のコンピューターまたはブラウザ（つまり「クライアント」）で発生するものに関連しています。一方、サーバーのキャッシュは、ウェブサイトファイルを含むマシンで発生します。

ブラウザ/クライアントキャッシュ

ブラウザがWebサイトを表示する場合、多くのデータをダウンロードする必要があります。繰り返しの訪問の読み込み時間を短縮するために、アクセスが速い訪問者のハードドライブに多くのコンテンツを保存します。

その一例はDNSキャッシングです。これは、ウェブサイトに関連付けられているIPアドレスをローカルで保存することを意味するため、次回サイトにアクセスするときにブラウザが調べる必要がないことを意味します。

さらに、ブラウザは常に最初にキャッシュをチェックして、必要な資産（画像やその他のファイルなど）がすでにそこにあるかどうかを確認します。そうすれば、サーバーにそれほど連絡する必要はありません。

サーバーキャッシング

サーバーキャッシュにはさまざまな形式があります。それらは主にサーバーに保存されたデータの種類と量が異なります。

• ページキャッシング：これは、既にコンパイルされたHTMLバージョンのページを保存することを意味するため、すべての訪問者のためにゼロから作成する必要はありません。

• オブジェクトキャッシング：ここでは、サーバーはオンラインストアでの製品検索など、データベースリクエストを再利用することを保存します。

• フラグメントキャッシング：特定のWebサイト要素、通常は画像のような静的リソースの保存について説明しています。

• CDNキャッシュ：この場合、ウェブサイトのデータのコピーは、さまざまな場所の追加サーバーにあります。訪問者は、最も近いサーバーからより迅速にダウンロードできます。

キャッシングの仕組み

次の画像を見てください。

上記から、キャッシングの仕組みを理解するのはすでに簡単です。

1. ユーザーはURLを入力し、Webブラウザは、要求されたページのデータがキャッシュにあるかどうかを確認します。

2. もしそうなら、それは保存したファイルバージョンを宣言するメッセージをサーバーに送信します。

3. サーバーは、新しいバージョンがあるかどうかを検証し、ある場合は更新されたリソースを送信します。以前に要求された場合、サーバーはゼロから処理することなく、独自のキャッシュからそれらを送信できます。

4. Webブラウザは、キャッシュから既存のデータとサーバーから送信されたデータを使用して、要求されたWebページを表示します。

今度は、ウェブサイトのキャッシュを可能にするテクノロジー、つまりキャッシュヘッダーについて話す時が来ました。

リクエストと応答のヘッダーを理解します

リクエストと応答のヘッダーは、ブラウザとサーバーによって交換される小さなテキストです。それらには、それらの間に送信されるデータの重要な情報と指示が含まれます。

彼らがすることの1つは、キャッシュ動作を構成することであり、この目的のためにいくつかのヘッダーが存在します。それらには、キャッシュコントロール、有効期限、ラスト変更、およびETAGが含まれます。キャッシュヘッダーは基本的に2つの方法で機能します。

1. Webサイトファイルをまったく、どのくらいの期間、誰がキャッシュするべきか（ブラウザーやサーバー）を宣言します。

2. ファイルの年齢と「バージョン」をマークして、ブラウザがサーバーに新しいエディションがある場合にのみ再ダウンロードします。

これらはすべて、ファイルの数と、送信する必要があるデータの量を減らして、ウェブサイトをロードするのに役立ち、プロセスの高速化に役立ちます。また、キャッシュヘッダーは少し技術的に思えるかもしれませんが、特にサーバーでキャッシュを手作業で構成することにした場合は、注意することが重要です。

Webサイトのキャッシュ方法：考慮すべき3つのオプション

この理論のすべての後、実際の用語でウェブサイトをキャッシュする方法について説明しましょう。

1.キャッシュを手動で有効にします

キャッシュを手で構成することは、サーバーにキャッシュヘッダーを手動でセットアップする必要があるため、最も複雑なアプローチです。

最初のステップは、ホスティングプロバイダーまたはウェブサイトソフトウェアがすでにあなたのためにいくつかの作業を行っている可能性があるため、現状を確認することです。そのために、ブラウザでサイトを開き、開発者ツール（ほとんどのブラウザでCTRL/CMD+Shift+I）にアクセスし、タンドhenタブに移動します（ページをリロードする必要がある場合があります）。

任意のリソースをクリックして、リクエストと応答のヘッダーを確認します。

その後、キャッシュ戦略を定義する必要があります。これは、ユースケースごとに異なって見えます。たとえば、ニュースWebサイトでは、パンフレットサイトよりも短いキャッシュ間隔が必要です。ニュースサイトの内容は瞬間に変化しますが、パンフレットはほぼ同じままです。

一般的に、キャッシュの期間とデータの鮮度のバランスを取ろうとする必要があります。

• 静的資産をより長くキャッシュし、メディアファイルやダウンロード可能なコンテンツなど。たとえば、最大1年間、ロゴとフォントファイルをキャッシュできます。

• キャッシュコントロール：キャッシュされるべきではないリソースの店なし。

• キャッシュの利点を犠牲にすることなくリソースの新鮮さを確保するために、ラスト修飾やETAGなどのバリデーターを含めます。一部のWebキャッシュには、年齢制御ヘッダーとバリデーターがまったく動作する必要があります。

次のステップは、選択した設定をサーバーに実装することです。それを行う方法は、サーバーが実行されているソフトウェアによって異なります。最も一般的なセットアップの指示は次のとおりです。

• nginx

• アパッチ

または、ホスティングプロバイダーは、キャッシュとホステ​​ィングパネルからアクティブ化する機能を提供する場合があります。

2。CDNを使用します

ウェブサイトをキャッシュする別の方法は、CDNにサインアップすることです。そのためには、最初にCDNプロバイダーを選択する必要があります。ここでは、CloudFlareを例として使用します。これは、最も人気のあるサービスの1つであるためです。

選択したCDNにサインアップすることから始めます。彼らのウェブサイトに移動してアカウントを作成します。

ニーズに合った計画を選択し、ウェブサイトの住所を提供します。

その後、DNS設定を更新する必要があります。 CDNプロバイダーは、現在のレコードをスキャンしてから、名前を表示します。

それを手にして、ドメインレジストラ（namecheap、godaddy、またはgoogleドメインなど）にログインし、DNS設定セクションを見つけて、既存の名前の名前をCDNで与えられた名前に置き換えます。

変更を保存してから、待ってください。 DNSの変更には、完全に伝播するのに数時間かかる場合があります。完了すると、ウェブサイトはCDNを介して正常にルーティングされます。最後のステップは、CDNがキャッシュを有効にしていることを確認することです。

3.キャッシュプラグインを使用します

最後に、WordPress Webサイトを使用している場合は、WP Rocketなどのパフォーマンスプラグインを使用できます。キャッシュに関連するすべてのものを自動的に処理するため、技術的な部分に対処する必要はありません。さらに、必要なのはプラグインをインストールしてアクティブ化することだけです。

これを行うと、モバイルデバイス用の専用キャッシュなど、キャッシュはサイトですぐにアクティブになります。高度なルールでは、キャッシュをさらに微調整できます。

他のオプションの中でも、キャッシュ寿命を決定し、キャッシュを使用したくないページ、Cookie、およびユーザーエージェントを定義できます。ドキュメントに詳細があります。

キャッシュに加えて、WP Rocketは、以下を含むWordPressサイトをスピードアップするためのさらに多くの機能を提供します。

• 画像やビデオの怠zyな読み込み

• レンダリングブロッキングリソースの延期

• キャッシュ、リンク、外部ファイル、フォントのプリロード

• 自己ホストのGoogleフォント

• データベースの最適化

• WP Rocket Own CDNを含むRocketCDNを含むCDNに簡単に接続する機能。

さらに、WPロケットは、バックグラウンドで多くの追加のパフォーマンスの改善を実装しています。その中には、GZIP圧縮、CSSおよびJavaScriptファイルの模倣、および折り畳みの上の画像を最適化して、最大のコンテンツ型塗料を改善しています。

ウェブサイトのキャッシュのパフォーマンスへの影響：ケーススタディ

実際の生活におけるウェブサイトの速度の向上に対するキャッシュの効果を調べるために、いくつかのダミーコンテンツを含むテストサイトを設定し、WPロケットをアクティブにする前後にPagesSpeed Insightsを介して実行しました。

キャッシュなしのモバイルデバイスの結果は次のとおりです。

ここで、キャッシュがアクティブになった後に何が起こるか見てみましょう。

効果はそれほど大きくありませんが、目立ちます。特に、速度インデックス値を3秒増加させることは、sc笑するものではありません。

記事全体で説明したように、キャッシュは繰り返し訪問者に最も影響を与えます。 PageSpeed Insightsは、キャッシュが提供するものの多くを意図的に利用していないため、効果が大きくないのも不思議ではありません。あなたのウェブサイトへの繰り返しの訪問者にとって、それはより顕著になるはずです。

不思議に思うなら、未使用のCSSの除去、JavaScriptの延期、画像の怠zyなロード、プリロードなど、WPロケットのさらにいくつかの速度改善をオンにすると、以下が何が起こるかを以下に示します。必要なのは、いくつかのボックスをチェックすることだけです。

ウェブサイトのキャッシュをクリアする方法

問題のトラブルシューティング、新機能の追加、最新のコンテンツが訪問者に表示されるようにするには、ウェブサイトのキャッシュをクリアする必要があります。当然のことながら、キャッシュは異なるレベルで発生するため、それを空にするさまざまな方法もあります。

ブラウザキャッシュを削除します

ブラウザキャッシュを空にする正確な方法は、使用しているブラウザによって異なりますが、すべてが設定にオプションがあります。 Chromeでは、プライバシーとセキュリティの下でそれを見つけます>ブラウジングデータを削除します。

サーバーキャッシュをクリアします

サーバーにキャッシュが実装されている場合、ホスティングプロバイダーにはおそらくそれをクリアするオプションがあります。

CDNのキャッシュを空にします

CDNキャッシュのパージは、CDNプロバイダーを介して自然に発生します。たとえば、CloudFlareでは、オプションはキャッシュ> Configuration> Purge Cacheで使用できます。

あなたのウェブサイトでキャッシュをパージします

プラグインを使用してウェブサイトをキャッシュする場合、通常、キャッシュをクリアできる場所にボタンがあります。 WP Rocketは、設定を変更したり、新しいコンテンツを公開したり、Webサイトを変更したり、キャッシュの寿命がなくなったりしたときなど、適切な時間にWebサイトキャッシュを自動的にパージします。

手動でやりたい場合は、WordPressのバックエンドの[設定]> [WPロケット]の下のダッシュボードでこのオプションを直接見つけることができます。

また、WordPressエディター内またはページまたは投稿メニューから個々のページのキャッシュをクリアすることができ、エントリをホバリングすることができます。

どのようにウェブサイトをキャッシュしますか？今、あなたは知っています

キャッシュは、あなたのウェブサイトをより速くする最も基本的な方法の1つです。これは、訪問者がウェブサイトを表示するために送信する必要があるデータの量を減らす簡単な方法です。

キャッシュは、ロードプロセスのさまざまなレベルで利用でき、さまざまなWebサイト要素をターゲットにすることができますが、原則は同じままです。

WPロケットを使用して、WordPressサイトにキャッシュを自動的に実装し、他の多数のパフォーマンス機能とベストプラクティスを利用して、すぐにウェブサイトを高速化します。プラグインには14日間の返金保証が付属しているため、完全にリスクのないテストできます。