自分で作った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内の記述。
.gzが付いていない、圧縮前のファイル名を記述しておきます。
で、JavaScriptを呼び出すhtmlが置いてあるディレクトリに、以下の内容の .htaccess を設置。
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/css;charset=UTF-8" .gz
AddEncoding gzip .gz
これで大丈夫な筈。
例えばSafariでページにアクセスして、メニューの ウインドウ→構成ファイル一覧 から読み込まれたファイルを確認してみて、ファイルサイズが gzip圧縮した奴のサイズと一致していたら成功です。
コメント