htaccess を使ったキャッシュと gz エンコード(圧縮)の設定

ユーザが効率的にページを閲覧できるような環境を整備するためには、ページのキャッシュと gz エンコード(圧縮)の設定は必須です。 ここでは多くの Linux サーバに導入されている Apache の .htaccess ファイルを使って、キャッシュと gz エンコードを設定する方法を解説します。 ここで取り扱うのは標準的な WEBページのリソースで、html, css, javascript, 各種画像ファイル, 各種フォントファイルです。

キャッシュの設定

キャッシュの必要性

WEB ページの多くは同じファイルを持っています。何度も同じファイルをダウンロードするのは非効率です。 一度開いた(ダウンロードした)ページのファイルを記録しておき、新たな通信先のファイルがそれらと同じファイルなら、ダウンロード済みのファイルを参照する仕組みがあります。 キャッシュは、そのダウンロードしたファイルそのものや、仕組みのことを指します。

追加するコード

.htaccess ファイルの中に <IfModule mod_expires.c> から始まる似たような記述が見当たらなければ、 次のコードをファイルの末尾に追加して保存します。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/vnd.ms-fontobject "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 weeks"
ExpiresByType application/x-font-opentype "access plus 1 weeks"
ExpiresByType application/x-font-woff "access plus 1 weeks"
</IfModule>

基本的に、ExpiresByType 対象のファイルの種類(MIME-Type) "期間" の書式となっています。

指定した期間が経過するまでは、ユーザーエージェント(ブラウザ)はダウンロード済みのファイルを参照します。 サーバー側のファイルが更新されたとしてもダウンロード済みのファイルが参照される点に注意が必要です。 したがって、頻繁に更新されるファイルは短い期間を、あまり更新されないファイルは長い期間を設定するのが良いです。

圧縮の設定

圧縮設定の必要性

ほとんどの方が理解していることと思いますが、データサイズを圧縮して小さくすれば通信する時間が短くなり、 ユーザは素早くデータを入手して表示することができるようになります。

ではすべてのファイルを圧縮する方が良いように見えますが、そうではありません。 一般に、画像ファイルなどは、そのファイル形式そのものが圧縮する仕組みを持っています。 例えば JPEG や PNG は、それぞれのルールに従ってすでに圧縮されたファイルです。 したがって、それらを指定することは良くありません。

追加するコード

.htaccess ファイルの中に <IfModule mod_deflate.c> から始まる似たような記述が見当たらなければ、 次のコードをファイルの末尾に追加して保存します。

html, css, javascript ファイルは、それ自身が圧縮したファイルではないので、圧縮することが推奨されます。 woff は WEB で用いられるフォントファイルです。このファイルに関しても、圧縮することが推奨されます。

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-woff
</IfModule>