効率的なキャッシュ ポリシーで静的アセットを提供する方法

公開: 2023-03-27

GTMetrixGoogle PageSpeed Insightsなどの Web サイトは Web サイトのパフォーマンスを改善する方法についての提案を提供します。 これを読んでいる場合は、少なくとも、すべての Web サイトには、手動による最適化または 10Web Booster などのプラグインの使用によって、パフォーマンスを改善する機会があることを認識しています.

どちらのツールでも、効率的なキャッシュ ポリシーを使用して静的アセットを提供するための提案が表示される場合があります この提案は、ファイルをローカルに保存して、サイトへの繰り返しのアクセスを高速化することです。 この推奨事項を改善するための手順を実行しても、最初のサイト アクセスは改善されません (そのための改善点は他にもあります)。 それでも、その後のすべての訪問は、ブラウザーのキャッシュを活用することで恩恵を受けます.

効率的なキャッシュ ポリシーを使用して静的アセットを提供するという提案は、WordPress でのブラウザー キャッシングまたはブラウザー キャッシングの活用とも呼ばれていることに注意してください。

この記事では、効率的なキャッシュ ポリシーを使用して静的アセットを提供する方法と、効率的なキャッシュ ポリシーによって Web サイトのパフォーマンスを向上させる方法について説明します。


GTMetrix を使用する場合、提案は結果ページで以下の例のようになります。 ブラウザ キャッシュの実装による節約の可能性を強調します。

GTMetrix で効率的なキャッシュ ポリシーの問題を使用して静的アセットを提供する

Google PageSpeed Insights では、提案は類似しているように見え、類似した情報を提供します。

GooglePage Insights で効率的なキャッシュ ポリシーの問題を使用して静的アセットを提供する

GTMetrix と PageSpeed Insights は Web ページ分析フレームワークにLighthouseツールを使用しているため、提案は類似しています Lighthouse は、サイトのパフォーマンスを向上させることを目的としたオープンソースのツールであり、さまざまな形式で実行できます。

ウェブサイトのパフォーマンスが指標のコレクションによってどのように測定されるかを簡単に復習してみましょう。指標の中で最も重要なのはコア ウェブバイタルです。

要約は次のとおりです。

  • Largest Contentful Paint ( LCP ) – 最大のオブジェクトがページのビューポートに読み込まれるのにかかる時間の測定値。
  • First Input Delay ( FID ) – これは Web サイトの応答性を測定します。 ユーザーがサイトをクリックまたは操作してから、サイトが応答するまでの時間を測定します。
  • Cumulative Layout Shift ( CLS ) – これは、ページのレイアウトが予想外にどれだけシフトするかを測定します。

コア Web バイタル

LCP と FID の両方にプラスの影響を与える 1 つの方法は、効率的なキャッシュ ポリシーを使用して静的アセットを提供することです。これは、一定時間リソースをローカルに保存できることをブラウザーに知らせることを意味します。

効率的なキャッシュ ポリシーは読み込み時間の短縮を意味します。インターネットの速度がどんなに速くても、ローカル キャッシュからの読み込みはより速く、時間を節約できるからです。

いくつかのコンポーネントがあるので、それらについて詳しく説明しましょう。

効率的なキャッシュ ポリシーで静的アセットを提供する方法

効率的なキャッシュ ポリシーを使用して静的アセットを提供する方法を理解するには、まず静的アセット、キャッシング、キャッシング ポリシーなどのさまざまな側面を理解する必要があります。 ここでそれらを分解しましょう。

静的アセットとは?

静的アセットはファイルです。 この記事で静的アセットについて言及するときは、すぐに、または頻繁に変更されることが予想されない個々のファイルを指します。

画像、JavaScript、CSS ファイル、フォントなどのファイルは、静的アセットと見なすことができるファイルです。 WordPress に関しては、これらの CSS、javascript、および画像とフォント ファイルは通常、テーマ、プラグイン、またはユーザー コンテンツの一部です。

動的に生成されるファイルとページは、静的資産とは見なされません。 WordPress 内でのこの例は、キャッシュ プラグインによって生成された静的ページです。 これについては、次のセクションで詳しく説明します。

キャッシングとは

キャッシュとは、回答をキャッシュに保存するプロセスであり、次回同じ質問が行われたときに回答をより迅速に返すことができます。

ノート

関連記事

WordPressのキャッシュを安全かつ効率的にクリアする方法は?

トップ5のおすすめで最高のWordPressキャッシングプラグインを見つけてください

以前に WordPress キャッシュ プラグインを使用したことがある場合は、フルページ キャッシュに精通しているかもしれません。 ページのキャッシュは、静的アセットのキャッシュとは異なります。

ページ キャッシングと静的アセット キャッシング

この記事では、特に静的アセット (ファイル) のキャッシュについて説明します。 これを、後で使用するために生成されたページを保存するフルページ キャッシュと混同しないでください。

ページ キャッシュとファイル キャッシュの両方が、サイトのパフォーマンスの向上に役立ちます。 静的アセット キャッシュについて説明するときは、javascript、CSS、画像ファイルなどの特定のアセットについて言及します。

ページ キャッシングは、 WordPress の動的に生成されたページの結果を保存し、そのバージョンを一定期間再提供します。 ページ キャッシュは通常、サーバーまたは CDN などのエッジ ネットワークに保存され、静的アセットはユーザーのマシンにローカルに保存されます。

効率的なキャッシュ ポリシーを使用して静的アセットを提供する方法に関するキャッシングとは、再ダウンロードする前にリソースをブラウザーにローカルに保存できる期間をブラウザーに伝えることを意味します。

静的アセットをキャッシュ可能にする理由

GTMetrix によると、アセットは次の要件を満たしている場合にキャッシュ可能です。

  • フォント、CSS、JavaScript、またはメディア ファイルです。
  • 200、203、または 206 の HTTP ステータス コードを返す
  • 明示的なキャッシュなしポリシーはありません

キャッシング ポリシーとは

静的アセットとは何か、およびアセットをキャッシュすることの意味を見てきました。

キャッシュ ポリシーは、ファイルをキャッシュする期間を決定する単純なルールです。

ここでは、新鮮さと古いという用語を使用して、キャッシュされたファイルのステータスを説明できます。 ファイルがキャッシュからプルされても問題ない場合、そのファイルはfreshと呼ばれます。 有効期限が切れると、 staleと呼ばれます。

ポリシーは、ファイルが新しいと見なされる期間や、ファイルが新しいことを確認する方法などの質問に答えます。 ポリシーには、特定の時間が経過した後にのみサーバーに確認する必要があるか、リクエストごとにサーバーに確認するよう通知する必要があるが、ファイルが変更された場合にのみ再ダウンロードする必要があると記載されています。

さらに先に進む前に、理解しておくとよい用語をいくつか説明します。

オリジンサーバーこれは、Web サイトがホストされているサーバーです。 元のファイルがあり、信頼できるソースと見なされます。
共有キャッシュ共有キャッシュは、オリジン サーバーとクライアントの間のどこかにあり、ファイルも保存される可能性があります。 この例は、プロキシ サーバーまたは CDN プロバイダーです。
プライベート キャッシュプライベート キャッシュは、ブラウザのキャッシュです。

UX と SEO はキャッシュ ポリシーによってどのように影響を受けますか?

ユーザー エクスペリエンス (UX) と検索エンジン最適化 (SEO) は密接に結びついています。 Google によると、調査によると、ユーザーはサイトの応答性を重視しているため、Google は応答性の高いページを上位にランク付けしています。

静的アセットが効果的にキャッシュされている場合、これらのアセットの読み込みにかかる時間が短縮されるため、ページのレンダリングが速くなります。 時間の短縮は、LCP や FID などのコア Web バイタルの改善につながり、最終的には検索エンジンのランキングが高くなります。

コア ウェブ バイタルがページ ランキングに与える影響について詳しくは、こちらをご覧ください。

効率的なキャッシュ ポリシーの問題で静的アセットの提供を修正する方法

手動で修正

効率的なキャッシュ ポリシーを使用して静的アセットを提供することは、WordPress 固有の設定ではありません。Web サーバーの構成ファイルを変更して手動で設定するか、10Web Booster ホスティングなどのプラグインを使用して、サイトが最適化されたキャッシュ設定で構成されていることを確認してください。

このセクションでは、Web サーバーの構成ファイルを直接編集して、キャッシュ制御を有効にし、サーバーの HTTP ヘッダーを期限切れにする方法について説明します。これにより、静的アセットを提供するときに、応答に HTTP ヘッダーが適用されます。

リソースが要求されると、Web サーバーはリソースと、HTTP ヘッダーと呼ばれる追加情報で応答します。 HTTP ヘッダーは、接続に関するメタデータと考えてください。 キャッシングの場合、HTTP ヘッダーのCache-ControlExpires は、アセットをキャッシュする方法を制御します。

cache -controlヘッダーには、静的アセットをキャッシュするかどうか、および/またはキャッシュする方法に関する指示が含まれています。 キャッシュ制御には多くのディレクティブがあるため、最も一般的なディレクティブをいくつか理解しましょう。

指令説明
max-age=N これは、リクエストが行われてからアセットが「フレッシュと見なされるまでの時間です
元のサーバーの応答が N 秒以下の場合、静的アセットは新しいと見なされます。
キャッシュなしno-cache という名前はだまされる可能性があります。
キャッシュなしとは、ファイルをキャッシュしないことを意味するのではなく、リクエストごとにファイルの鮮度を再検証することを意味します。
ファイルが変更されていない場合は、キャッシュされたバージョンが使用されます。 サーバーは、ファイルが変更されていないことを示すために、304 Not Modified http 応答コードで応答します。
無店舗アセットを保存したくない場合は、no-store ディレクティブが必要です。
プライベートファイルがプライベート (ブラウザー) キャッシュにのみ保存できることを示します。
公共CDN、プロキシ キャッシュなどのパブリックにファイルを保存できることを示します。

以下は、キャッシュ制御ヘッダーがどのように見えるかの例です。

例: アセットを 7 日間キャッシュする
Cache-Control: max-age=604800

例: 最大 7 日間、共有キャッシュに保存できます
Cache-Control: public, max-age=604800

例: 保存できますが、リクエストごとに再検証する必要があります
Cache-Control: no-cache

例: キャッシュできません
Cache-Control: no-store

cache-control ヘッダーは新しく、より多くのオプションがありますが、cache-control がサポートされていない場合は、expires HTTPヘッダーが同じヘッダー タスクを実行し、再検証が必要になるまでのアセットの有効期間を指示します。 (Cache-Control ヘッダーの max-age ディレクティブは Expires よりも優先されることに注意してください)
Expires: Wed Feb 13 21:01:38 CST 2023

サーバー構成を直接変更する

まず、「困難な方法」を見てみましょう。それにより、それを容易にする他のツールやサービスを使用するとどうなるかを理解できます。

アパッチ

Apache HTTP サーバーでは、次のスニペットをサイト定義または .htaccess ファイルに追加できます。

このスニペットを説明すると、拡張子が .ico や .pdf などに一致するアセットには、そのアセットに設定された Cache-Control ヘッダーがあることがわかります。

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

Apache では、多くのホスティング プロバイダーがディレクティブを .htaccess ファイルに追加するオプションを提供します。 これはサーバーの構成に追加する簡単な方法ですが、.htaccess ファイルを使用すると、サーバー レベルでパフォーマンスが低下することが知られていることに注意してください。

ニンクス

Nginx では、このスニペットをサーバー ブロックに追加できます。

このスニペットを説明すると、拡張子が .ico や .pdf などに一致するアセットには、expires ヘッダーと cache-control ヘッダーの両方が設定されることが示されています。

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Apache と Nginx の両方について、ヘッダーを変更/追加する方法を示しています。 キャッシングに使用する特定のヘッダーを示していますが、このメソッドは他の形式のキャッシングにも使用できます。

WordPressプラグインで修正

上記が多いように感じる場合は、それが原因です。 サーバー構成を変更し、手動での変更を最新の状態に保つことは、時間がかかり、エラーが発生しやすくなります。

10Web Booster の無料プランでは、静的アセットのヘッダーを追加するように Apache を構成できます。また、キャッシュされた Web ページのヘッダーも追加します。 まだ 10Web ホスティングを使用しておらず、ホストで Apache を使用している場合、これは効率的なキャッシュ ポリシーの実装を開始するための優れた方法です。

より多くのオプションや HTTP ヘッダーの制御が必要な場合は、10Web Booster Pro を使用できます。 10Web Booster Pro は Cloudflare を活用しています。 Cloudflare を使用すると、静的アセットとキャッシュされたページにキャッシュ制御ヘッダーが追加されます。 これにより、訪問者は Cloudflare からファイルを直接提供されるため、サーバーの構成や制限がバイパスされます。

ここで 10Web Booster プラグインが最良の選択である理由は、これがすべて自動的に行われることです。 サーバー構成や .htaccess ファイルを管理する必要はありません。

10WEBブースターを無料でゲット
10WEBブースターを無料でゲット

または、10Web Hosting を使用すると、自動的にキャッシュが実装されるため、静的アセットのヘッダーの追加について心配する必要はありません。

それでも問題を解決できませんか? これらの2つのヒントを試してください

上記の手順を実装しても、効率的なキャッシュ ポリシーを備えたサービスの静的アセットが引き続きレポートに表示される場合は、さらにいくつかの方法を試すことができます。

ファイルがキャッシュされていることの確認

GTMetrix と PageSpeed が、キャッシュ ポリシーを使用して静的アセットを提供する必要があるとまだ報告している場合は、実装が実際に期待どおりの変更を行っていることを確認することをお勧めします。

ほとんどのブラウザには、ファイルがキャッシュからのものかどうかを確認する簡単な方法があります。

Chrome の [ビュー] と [開発者] で、[開発者ツール] を選択します。

ファイルがキャッシュされていることを確認する

[ネットワーク] タブで、(ディスク キャッシュ) または (メモリ キャッシュ) からのファイルを識別できます。 ディスク キャッシュとメモリ キャッシュの違いは、ブラウザを閉じるとメモリがなくなり、ブラウザを閉じるとディスクが保持されることです。

ファイルがキャッシュされていることを確認する

キャッシュ時間を増やす

Lighthouse の統計によると、効率的なキャッシュ ポリシーとは、キャッシュ ヒットとミスの比率が高いポリシーです。つまり、静的アセットの大部分に max-age または expires が設定されています。 運用中のサイトや頻繁に変更されないサイトの場合は、最長で 3 か月から 1 年の期間をお勧めします。

約 3 か月 (約 7890000 秒) のポリシーを開始することをお勧めします。これを既に設定している場合は、サイトが稼働している場合は最大有効期間を 1 年以上に増やす価値があるかもしれません。

結論

効率的なキャッシュ ポリシーを使用して静的アセットを提供できると、Web サイトのパフォーマンスが向上します。

この記事では、静的アセットとは何か、HTTP ヘッダーとは何かについて説明し、キャッシング ヘッダーを有効にして適切な場所にあることを確認する方法について説明しました。

サーバー構成を変更してヘッダーを手動で有効にする基本事項と、10Web Booster などの WordPress プラグインを使用して簡単にする方法、および 10Web と Cloudflare の統合を利用してキャッシュ制御 HTTP ヘッダーを設定するためのアクセス権を取得する方法を調べました。

10Web Booster は単なるキャッシング プラグインではありません。 この10Web Booster の記事で、多くのキャッシングおよび速度最適化機能について詳しく読むことができます

10WEBブースターを無料でゲット
10WEBブースターを無料でゲット

よくある質問

キャッシュされたアセットが Web サイトに問題を引き起こす可能性はありますか?

ローカル キャッシュの有効期限が切れる前に、静的アセットが変更される可能性があります。 これにより、アセットの最新バージョンがキャッシュからロードされたものとは異なり、問題が発生する可能性があります。

これを回避する 1 つの方法は、Cache-Control ヘッダーを no-cache に設定することです。 no-cache ディレクティブは、ブラウザが最新バージョンであることを確認するためにサーバーをチェックする必要があることをブラウザに知らせます。

キャッシュなしの意味合いに惑わされないでください。それでもデータはキャッシュされます。 キャッシュがないということは、新しいバージョンがないと想定するのではなく、毎回サーバーをチェックすることを意味します。

キャッシュされた静的アセットを強制的に更新できますか?

現在、キャッシュに既に保存されているアセットを強制的にクリアする方法はありません。 アセットを頻繁に更新することがわかっている場合、1 つのオプションは max-age を cache-control ヘッダーに追加するか、expires ヘッダーを明示的に宣言することです。

ユーザーがキャッシュをクリアするとどうなりますか?

ユーザーがキャッシュをクリアすると、静的アセットがサーバーから再度ダウンロードされます。

ユーザーはどのようにしてキャッシュをクリアできますか?

ユーザーは、ブラウザのプライバシー設定からキャッシュをクリアできます。

ブラウザにキャッシュ内のファイルを強制的に更新させるにはどうすればよいですか?

shift+Refresh を実行すると、ファイルの鮮度に関係なくファイルが再ダウンロードされます。