HOME　>>　Tips　>>　その他

Web サイトのコンテンツを gzip 圧縮して転送量を減らす方法（.htaccessで設定）

2015/03/17
文書番号：20304




Web サイトのコンテンツを gzip 圧縮して軽量化して通信量を減らします。
ネットワーク環境によってはブラウザに表示されるまでの時間を速くすることが期待できます。

サーバーが対応していれば「mod_deflate」を使用して動的に gzip 圧縮する方法もありますが動的な圧縮処理は少なからずサーバーへの負荷になりますし、 当サイトでは静的なコンテンツが中心なので動的に圧縮してくれる必要はないので .htaccess を使った方法で設定してみることにしました。

今回の方法ではスタイルシート（.css）ファイルやjavascript（.js）ファイルを圧縮します。
※画像ファイルは 「PNGGauntlet で PNGOUT や OptiPNG をGUIで実行する」 に記載した方法で圧縮できます。

【gzip圧縮ファイルを準備する】

    Windows OS は標準では gzip 圧縮には対応していません。
    ツールなどを使って gzip 圧縮ファイルを作成する必要があります。

    Lhaplus や Lhaz（ちとらSoft） などの圧縮・解凍ソフトを使用すると作成できます。

  1. 拡張子が「.js」や「.css」のファイルを gzip 圧縮します。
    gzipファイルは以下のように元のファイル名＋.gzというファイル名で保存されている必要があります。

    クリックで拡大
  2. サーバーへアップロードします。
    圧縮したファイルを元のファイルと同じディレクトリに保存します。

【.htaccess ファイルを作成・編集する】

    Webサーバーのルートディレクトリ内に「.htaccess」というファイルがある場合、これをダウンロードして編集します。
    存在しない場合はローカルフォルダーに新しくファイルを作成します。

  1. ファイルが存在する場合はそのファイルを開き、以下のように追記します。
    
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.js$ [OR]
RewriteCond %{REQUEST_FILENAME} \.css$
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz

<FilesMatch "\.js\.gz$">
    ForceType application/x-javascript
    AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.css\.gz$">
    ForceType text/css
    AddEncoding x-gzip .gz
</FilesMatch>
  2. ファイルが存在していなかった場合はメモ帳を新規で開き同じように上記の内容を記載し、ファイルを保存します。
    保存する際にファイル名を「.htaccess」とし、ファイルの種類を「すべてのファイル」にして保存します。


    クリックで拡大

    Windows では一度作成したファイルのファイル名を「.htaccess」に変更しようとすると拡張子のみのファイル名と判断されるため保存できません。
    ファイル作成時に保存するか、Webサーバーへアップロードしてからファイル名を変更する必要があります。
  3. 作成したファイルをサーバーへアップロードします。



    4. 設定はこれだけです。
    個々のhtmlファイルでスタイルシートやjavascriptを指定している部分は「～.js」や「～.css」のままでOKです。

    gzip 圧縮に対応したブラウザでアクセスした場合には「.js.gz」や「.css.gz」が読み込まれ、 gzip 圧縮に対応していないブラウザで閲覧した場合には非圧縮の（通常の）「.js」や「.css」ファイルが自動的に判断されて読み込まれます。