【高速化】ブラウザのキャッシュを活用する

GoogleDevelopers”PageSpeedInsights“の「ブラウザのキャッシュを活用する」を対応する。

pagespeed01

PageSpeedInsightsの分析結果「ブラウザのキャッシュを活用する」を見るとキャッシュが利用されてないファイルの一覧が表示される。

ここでは特に画像・CSSファイルが指摘され、HTMLファイルは含まれていないので、
画像(jpg/gif/png)・CSSファイルを対象とする。

Webサーバー”Apache”のモジュール”mod_expires”は、ブラウザキャッシュの有効期間を管理する事ができる。

このモジュール”mod_expires”を利用して、キャッシュを有効活用することによりサーバーへの通信を減少し、
転送量や負荷が軽減される事でWebサイトの高速化につなげる。

.htaccessに下記コードを記述し、対象ファイルの拡張子と有効期間を設定する。

【.htaccess】

ExpiresActive On
ExpiresDefault "access plus 1 weeks"
ExpiresByType image/jpg "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType text/css "access plus 1 weeks"

1週間以上先の有効期間を指定する。

ファイルを更新した場合はファイルのURLにパラメータを付けて、キャッシュにないファイルと認識させる。

例)
img/xxx.jpg
 ↓
img/xxx.jpg?130722

ファイルを更新した場合、古いキャッシュによってあたらしいファイルが反映されなくなるデメリットもある。
URLにパラメータを付けて、キャッシュにないファイルと認識させる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>