「静的なアセットと効率的なキャッシュ ポリシーの配信」とは？改善方法も解説【PageSpeed Insights】

Googleが提供する無料のWebページ診断「PageSpeed Insights」。診断にかけるとWebページの読み込み時間の短縮につながるヒントが得られます。
その中のひとつである「静的なアセットと効率的なキャッシュ ポリシーの配信」とはどういう意味か、また診断結果を改善する方法についても解説します。

　

「静的なアセットと効率的なキャッシュ ポリシーの配信」とは？

サーバ上の問題として、「静的なアセットと効率的なキャッシュポリシーの配信」という表示が出ることがあります。これは、画像やスクリプトなどの静的なアセットについて、効率的なキャッシュコントロールが割り当てられていないときに発生する課題です。

キャッシュコントロールとは、キャッシュの仕組みの一つであり、ブラウザがサーバに対して画像やスクリプトなどのデータを要求する場合に、ある一定期間はダウンロードせずに既存のファイルを参照する仕組みをいいます。

「静的なアセットと効率的なキャッシュ ポリシーの配信」の改善方法

キャッシュの役割と効果を理解

静的アセットについて効率的なキャッシュコントロールを設定するためには、キャッシュの役割と効果について熟知しておく必要があります。本来、キャッシュはWebのパフォーマンスを向上させる機能を持つものです。長時間のキャッシュがリクエストされた場合、コンピュータは新たにデータをダウンロードせず、ローカルコンピュータに保存されているデータを参照します。このようなキャッシュの効率的な機能により、ページの読み込み速度を短縮することができるのです。

そして、「静的アセット」と呼ばれる画像やフォント、スクリプトなどのファイルは不変のリソースであることから長時間キャッシュが可能です。このとき、キャッシュが有効になっている時間内はブラウザを使用している側においてクリアの指示を出さない限り、静的アセットは更新されません。

つまり、たとえサーバのファイルを最新のものに入れ替えたとしても、古い静的アセットが表示され続けてしまうのです。これが、効率的なキャッシュコントロールが割り当てられていないことによる不具合の詳細です。

キャッシュコントロールの設定について

しかし、常に最新のファイルをダウンロードしようとすると読み込み速度の遅延につながります。そこで、パフォーマンスのスピードを向上させつつ、最新のデータを表示できるようにするために、静的なアセットに効率的なキャッシュを割り当てることが必要なのです。

ブラウザがデータをリクエストした場合、サーバはブラウザにデータを一時的に保存する期間を指定できます。たとえば、max-ageの場合は、数秒でどのくらいのリソースをキャッシュするかブラウザに指示することが可能です。どの静的アセットのファイルにどれくらいのキャッシュ時間を割り当てればよいかは、該当サイトやファイルの状態によって異なります。

可能であれば、1年以上などの長期間にわたり静的アセットをキャッシュしてみましょう。その際、静的アセットのファイル名にハッシュを埋め込むようビルドツールを設定すると分かりやすくなります。

PageSpeed Insightsであれば、Webに含まれるコンテンツを適切に解析し、アセットごとに適切なキャッシュの算出をすることが可能です。