[Front-End General] Grunt: Webページの表示高速化について考える(JavaScript・CSS編)

なぜ JavaScript や CSS を、concat, minify, compress するのか。
Grunt プラグインを通して考える。

minify(最適化)する

空白やインデント、改行などの不要な部分を取り除いたり、変数名を短い名前に置き換えてファイルサイズを減らす手法。

concat(結合)する

高速化のためすべてのソースファイルを1つに結合する手法。

compress(圧縮)する

送信データの圧縮により、転送するコンテンツの総量を減らす手法。

画像を最適化する

コンテンツ総量に占める画像の割合は大きく、適切に圧縮する効果は大きい。
いろいろな選択肢が考えられるので、フォーマットや手法の比較をしてみた。

レンダリングを最適化する

Sass のような CSSプリプロセッサを利用することにより、効率的なCSSが生成され、ページのレンダリングが速くなる。

補遺