CSSやJavaScriptファイルを圧縮する「YUI compressor」の使い方を説明します。

「YUI compressor」を使って、
CSSやJavaScriptファイルを圧縮し通信量を削減すると、
Webページの表示を速くすることができます。

また、私の経験則ですが、
古めのInternetExplorer(6,7あたり)では、CSSファイルのサイズを圧縮することで、
(通信とは関係ない部分で)レンダリングの速度が上がるようです。

YUI compressorとは

YUIcompressorとは、CSSやJavaScriptファイルを圧縮するツールです。
CSSやJavaScriptを圧縮することで、
Webページの表示を速くする事が出来ます。
圧縮は改行・スペース・タブ等を取り除く処理を行って行うので、
圧縮によってページの表示・挙動が変化することはありません。

インストール

  1. YUIcompressorのサイトにアクセスします。
     http://developer.yahoo.com/yui/compressor/

  2. 以下の通りリンクをたどり、YUIcompressorをダウンロードします。
     →QuickLinks: Download
     →yuiconpressor-2.4.8.jar
     対象ファイル: yuicompressor-2.4.8.jar

  3. 取り出したファイルを任意のディレクトリに格納します。
     例えば、C:\Program Files\yuicompressor\yuicompressor-2.4.8.jar

使い方

  1. スタート→全てのプログラム→アクセサリ→コマンドプロンプトを選び、
     コマンドプロンプトを起動します。

  2. コマンドプロンプトに「cd 」と入力し、
     圧縮したいCSS/JavaScriptファイルがあるディレクトリをコマンドプロンプトにドロップ、
     Enterキーを押下して、ディレクトリを移動します。

例えば「C:\MyProject\myhtml\docs\css」に移動する場合、
 > cd C:\MyProject\myhtml\docs\css

  1. 以下のコマンドを入力して、css/javascriptを圧縮します。
     > java -jar <圧縮元ファイル名> <圧縮先ファイル名>

例えば、
 yuicompressor-2.4.8.jarのパス: C:\Program Files\yuicompressor\yuicompressor-2.4.8.jar
 圧縮元ファイル名: index.css
 圧縮先ファイル名: index-min.css
の場合は、
 > java -jar "C:\Program Files\yuicompressor\yuicompressor-2.4.8.jar" index.css index-min.css