ウェブサイトの高速化を支援してくれる「ブラウザのキャッシュを活用する」について

ウェブサイトの高速化を支援する、
ブラウザのキャッシュを活用する方法をメモする。

静的なリソースをブラウザでキャッシュすると、
ユーザーがサイトに複数回アクセスした場合に時間を節約できるので、
結果的にウェブサイトのロードが早いと感じられるようになる。

以下のサイトでは、
ブラウザのキャッシュを活用する – PageSpeed Insights
.htaccessの編集 – Apache
での設定を記載しているが、
google app engineを使う場合には、
筆者の使う環境には.htaccessが存在しないので、
app.yamlファイルで設定した。

Googleのガイド
Static cache expiration
にある通り、
default_expiration
で設定可能だ。
※何も設定しないと、(というか通常元々記載されていないのだが)
デフォルトのキャッシュの有効期間は10分
なので、ここに手を加える。

application: hogehoge
version: 1
runtime: phpXX
api_version: 1

default_expiration: “30d”

※”30d”は30日を意味する。

キャッシュの有効期間は1週間以上が望ましいとのことで、
とりあえず30日とした。
ブラウザのキャッシュを活用するbyGoogle

ウェブサイトのレスポンスを評価する、googleのサービス
PageSpeed Insights
を使って、この設定をする前と後を比較する。

設定前(キャッシュの有効期間は10分):2016-01-09_before

設定後(キャッシュの有効期間は30日):
2016-01-09_after

結果は65点 -> 69点に上がったのが見て取れるだろう。
体感的にも早くなったような気がする。

今回はブラウザのキャッシュのみの対策であるが、
他に、リソースの圧縮など改善提案が出ているところも
随時対応していきたい。

最後に
キャッシュの種類にも色々あり、キャッシュの仕組みが
わかりやすく図解とともに紹介されていたので参考にされたい。
キャッシュの種類について