[Front-End General] Grunt: Webページの表示高速化について考える（JavaScript・CSS編）
なぜ JavaScript や CSS を、concat, minify, compress するのか。
Grunt プラグインを通して考える。
Grunt が用意しているプラグインを利用することで、HTTPリクエストや転送量を減らす処理を意識せずに自動化し、結果、Webページの表示高速化を実現できる。
Contents
minify(最適化)する
空白やインデント、改行などの不要な部分を取り除いたり、変数名を短い名前に置き換えてファイルサイズを減らす手法。
ソースコードの挙動を全く変えずにファイルサイズを減らす。
concat(結合)する
高速化のためすべてのソースファイルを1つに結合する手法。
ソースファイルを1つずつ<script>で読み込むとファイルの数だけクライアントからサーバにリクエストが行われるが、1つのファイルにまとめておけば1回の通信で済む。
- classA.jsとclassB.jsという2つのソースファイルがあるとき、すべてのページで同時に使用する場合は、これらを1つのファイルにまとめた方が通信回数を減らせるため効率的。
- アクセスの多いトップページでは軽量なclassC.jsしか使用せず、アクセスの少ない別のページではclassC.jsとサイズの大きいclassD.jsを併用するといった場合、classC.jsとclassD.jsは分割して読み込むようにした方がアクセスの多いトップページを軽く保つことができる。
なお、Rails 3.1ではアセットパイプラインによって自動的に結合が行われるため自前で結合する必要はない。
compress(圧縮)する
送信データの圧縮により、転送するコンテンツの総量を減らす手法。
スマホやタブレットなどの mobile 端末の普及に伴い、ユーザー側の回線速度というボトルネックを解消する必要性が高まっているように思う。
導入にあたっては、コンテンツの圧縮処理に伴うCPU負荷と回線負荷をてんびんにかけ判断する。
Apache 2.0では、mod_deflate モジュールを利用する。
mod_deflate が利用できない環境では、mod_rewrite を利用して同様の振る舞いを設定するが、その際には JavaScript や CSS を事前にgzipしておくことになる。
画像を最適化する
コンテンツ総量に占める画像の割合は大きく、適切に圧縮する効果は大きい。
いろいろな選択肢が考えられるので、フォーマットや手法の比較をしてみた。
レンダリングを最適化する
Sass のような CSSプリプロセッサを利用することにより、効率的なCSSが生成され、ページのレンダリングが速くなる。