JavaScriptファイルをgzip圧縮して設置してみる。

自分で作ったWebページの読み込み / 表示速度を向上させるために、htmlから呼び出す外部JavaScriptやCSSファイルのサイズをできるだけ小さくしてみます。
まずは自分のページの表示速度を診断。

　　→ GTmetrix | Websie Speed and Performance Optimization｜英語

ページURLを入力して「Go!!」をクリックすれば、かなり詳細に診断して助言を与えてくれます。例えば「複数の .cssファイルをまとめなさいよ」とか「JavaScriptファイルを最小化したらいいよ」とか。

自分が何をすべきか把握したところで、JavaScriptファイルを最小化。
無駄なタブスペースや改行を取り去れば、.jsファイルのサイズはかなり小さくなります。手作業で行うのは面倒なので、例えばこんなWebサービスを使ってみる。

　　→ YUI Compressor Online｜英語

ローカルに保存されている .jsファイルを指定してやれば、あっという間に Minifyしてくれます。

うちの STF : Song Title Fetcher で使用しているJavaScriptファイルは、21.1KB→15.4KBへ、約27％のダイエットに成功。

これだけでも効果は大きいのですが、更なる読み込み高速化を図るなら、こいつを gzip圧縮してやる、という手があるのですな。

gzip圧縮は、手元の圧縮ツールを使うなり、Linuxコマンドラインで gzip コマンドを使うなりすればよろし。$ gzip -c 元のファイル名 > 圧縮後のファイル名 。ここで「圧縮後のファイル名」は「元のファイル名.gz」としておきましょう。たとえば、

  • オリジナルのJavaScriptファイル → stf.js
  • タブや改行を取り除いて最小化したやつ → stf-min.js
  • さらにgzipで圧縮したやつ → stf-min.js.gz


圧縮すると、ファイルサイズが 15.4KB→4.9KBに。オリジナルと比較すると、4分の1以下になりました。

次にファイルをWebサーバにアップロード。アップロードするのは、上の例でいけば stf-min.js と stf-min.js.gz のふたつ。世の中には gzip圧縮した jsファイルを読み込めないブラウザも残ってるので、それに対応するための設定を続けます。

この JavaScriptファイルを呼び出すhtml内の記述。

<script src="stf-min.js" type="text/javascript" charset="UTF-8"></script>

.gzが付いていない、圧縮前のファイル名を記述しておきます。

で、JavaScriptを呼び出すhtmlが置いてあるディレクトリに、以下の内容の .htaccess を設置。

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} "\.(js)$"
RewriteCond %{REQUEST_FILENAME} !"\.gz$"
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz [L]
</IfModule>

Apacheに mod_rewriteがインストールされていれば、gzipを受け入れてくれるブラウザには圧縮した xxx.js.gz を、そうでないブラウザに対しては元の xxx.js を返します。

.js だけでなく .css も gzip圧縮して設置したいのならば、5行めの後ろのほう (js) を (js|css) にしておけばOK。

ブラウザからページにアクセスしてみて「キャラクターが変だから読めないよ」みたいなエラーが出るときは、.htaccess に以下の記述を追加します。

AddType "text/javascript;charset=UTF-8" .gz
AddType "text/css;charset=UTF-8" .gz
AddEncoding gzip .gz

これで大丈夫な筈。

例えばSafariでページにアクセスして、メニューの ウインドウ→構成ファイル一覧 から読み込まれたファイルを確認してみて、ファイルサイズが gzip圧縮した奴のサイズと一致していたら成功です。

カテゴリ:

タグ: