Chromeのデベロッパーツールでキャッシュの有効期限を調べる方法

Webサイトの高速化のために、キャッシュの有効期限を設定することが増えてきました。サーバーや.htaccessで設定を行いますが、設定できたかどうか、どのように確認していますか?

今回は、Chromeのデベロッパーツールを使った、キャッシュの有効期限の調べ方を紹介します。

ヘッダー情報はChromeの拡張機能「Live HTTP Headers」を使って調べることもできます。

スポンサーリンク

デベロッパーツールを開く

Chromeの右上にある三本線のアイコンから、その他のツール > デベロッパーツール で開きます。

01

デベロッパーツールを起動するショートカットも覚えておくと便利です。
Windows: F12 もしくは Ctrl + Shift + I
Mac: Command + Option + I

03

有効期限を確認する

デベロッパーツールを開いたら、メニューから「Network」を選択します。

07

Ctrl + RやF5などを押して、ページを再読込します。

読み込まれたファイルの一覧が表示されるので、キャッシュの有効期限を確認したいファイルを選択します。

キーワードでの検索や、JS/CSS/画像などファイルの種類での絞り込みができます。

08

ファイルを選択すると、色々な情報が表示されますが、「Response Headers」という項目にある「Cache-Control:max-age=31536000」という部分がキャッシュの有効期限です。「31536000」は秒数で表示されています。60秒 × 60分 × 24時間 × 365日で31536000秒なので、このファイルのキャッシュの有効期限は1年となります。

11

スポンサーリンク

みんなが見ている記事

コメントを投稿する

  • Posted on 2016.01.23
  • Views 979