目次


Web アプリケーションを高速化する

CSS コードと JavaScript コードのロード時のパフォーマンスを向上させ、使用帯域幅を削減する

Comments

この記事では、CSS ファイルと JavaScript ファイルのホワイト・スペースを最適化することでパフォーマンスを高める方法について説明します。CSS ファイルと JavaScript ファイルは、コミュニティーから入手可能なツールを使って容易に最適化できるリソースとして最も一般的なものです。ただし、先に進む前に重要な点として注意しておきますが、CSS ファイルと JavaScript ファイルを圧縮する方法は Web アプリケーションを高速化するための数ある手法のうちのごく一部にすぎません。HTML や画像など、他のリソースを最適化するための他の手法については、「参考文献」を参照してください。

この記事を最大限に活用するためには、以下のツールを用意する必要があります。

  • テキスト・エディター
  • Java™ Runtime Environment バージョン 1.4 またはそれ以上 (「参考文献」を参照)

問題: ホワイト・スペース

CSS ファイルまたは JavaScript ファイルを扱う場合、ホワイト・スペースは通常は便利なものです。ホワイト・スペースに含まれるものとしては、インデントするためのインデント文字、読みやすくするためにスペースを空けるための要素、内容が異なる部分を視覚的に切り離すために挿入される追加の行などがあります。ホワイト・スペースによって、ファイルは読みやすく、保守しやすくなります。ここで、リスト 2 の CSS ファイルを見てみましょう。この CSS ファイルにはホワイト・スペース (そしてコメント) が適宜含まれているため、この CSS コードの目的を容易に理解することができます。

この段階でファイルを小さくすることは、ホワイト・スペースの問題に対する長期的ソリューションとして現実的ではありません。このファイルは将来変更しなければならない可能性が非常に高いからです。この段階でホワイト・スペースとコメントを完全に削除すると、CSS コードも JavaScript コードも読みにくくなります。

ホワイト・スペースが増えることによる問題は、ファイル・サイズが大きくなることです。空白行、インデント、そして括弧の間のスペースといったものが 1 つ増えるごとに、ファイルには最低でも 1 文字余分に追加されますが、これらの文字は CSS コードまたは JavaScript コードを正しく構文解析する上では必要ありません。始めはスペースを 1 つや 2 つ追加しても、たいしたことはないように思えるかもしれませんが、実際にはこうした箇所が山ほど増えることで膨大な量になってくるのです。

余分なホワイト・スペースの合計が 5KB になるファイルを考えてみてください。このファイルが含まれる Web サイトが 1 日当たり 1,000 アクセスある場合には、この 5KB を節約すれば、ひと月で約 146MB (概算として、(5K * 1000 * 30) / 1024) 節約できることになります。これが、アクセス数を比較的控え目に見積もった 1 つのファイルでしかないことを考えると、累積されるホワイト・スペースの量はかなりなものになる可能性があることがわかります。

さらに、ユーザーはこのファイルのダウンロードが完了するのを待たなければなりません。この Web サイトを訪れるユーザーの多くは、最初にサイトを訪れた際に CSS ファイルまたは JavaScript ファイルをキャッシュしているかもしれませんが、それでも、そのサイトを最初に訪れたときのパフォーマンスが低くなります。CSS ファイルと JavaScript ファイルのサイズをそれぞれ 1KB ずつ削減するだけでも、ブラウザーにダウンロードされるデータを数キロバイト削減することができます。

ソリューション: 圧縮

Web アプリケーションを高速化するための明らかなソリューションは、CSS ファイルと JavaScript ファイルからコメントやホワイト・スペースのような余分な要素を単純に削除することです。それによって問題は解決され、リソースが小さくなることによるメリットを得られるようになります。しかし、開発中にコメントやホワイト・スペースをファイルから削除する方法は現実的ではありません。それよりも優れたソリューションは、Web サイトのリソースを「ステージング」し、最適化してから公開することです。

ホワイト・スペース文字を削除するカスタム・スクリプトを作成することが当然のソリューションのように最初は思えるかもしれませんが、CSS ファイルにも JavaScript ファイルにも、重要なホワイト・スペースが含まれている場合があります。従って、ホワイト・スペースを削除してファイルを圧縮するためのツールは、それぞれの言語でホワイト・スペースが重要な意味を持つ機能を認識できるようなインテリジェントなものでなければなりません。

幸いなことに、CSS ファイルや JavaScript ファイルなどのリソースの圧縮に関し、テスト済みのツールをコミュニティーから入手することができます。そうしたツールの 1 つが、Yahoo!® Developer Network から入手可能なツールである、YUI Compressor です (「参考文献」のリンクを参照)。

YUI Compressor

YUI Compressor は Java 言語で作成されたプログラムであり、BSD (Berkeley Software Distribution) ライセンスの下で使用が許可されています。YUI Compressor によって CSS コードと JavaScript コードを縮小化 (圧縮) することができるため、リソースが小さくなることによるメリットを生かすことができ、独自にツールを作成する必要がありません。

YUI Compressor をダウンロードしたら、アクセスしやすい場所にファイルを解凍します。このアーカイブ・ファイルには、完全なソースと、YUI Compressor をビルドするための Apache Ant スクリプト (build.xml) が含まれています。その一方で、ファイルのビルドをしたくない人のために、build ディレクトリーの中には yuicompressor-{バージョン番号}.jar があります (図 1)。

図 1. アーカイブ・ファイルの内容
アーカイブ・ファイルの内容が表示されており、フォルダーとして build、doc、lib、src が表示されています。yuicompressor.jar は build ディレクトリーの中にあります。
アーカイブ・ファイルの内容が表示されており、フォルダーとして build、doc、lib、src が表示されています。yuicompressor.jar は build ディレクトリーの中にあります。

YUI Compressor 用の JAR ファイルは自己完結しています。そのため、この JAR ファイルを別のプロジェクトにコピーして以下のコマンドを入力すれば、この JAR ファイルを実行することができます。

java -jar yuicompressor-2.4.2.jar --help

ファイルをダウンロードする代わりに、リスト 1 に示す XML を使用し、Apache Maven の pom.xml ファイルまたは Apache の IVY ファイルに YUI Compressor を追加することもできます。

リスト 1. YUI Compressor を Maven または IVY に追加する
<dependency>
    <groupId>com.yahoo.platform.yui</groupId>
    <artifactId>yuicompressor</artifactId>
    <version>2.3.6</version>
</dependency>

yuicompressor.jar ファイルに -h 引数を渡すと、YUI Compressor の基本的な使い方が表示されます。

CSS を圧縮する

リスト 2 は開発者にとって保守しやすい、最適な CSS の記述方法の例を示しています。保守を容易にするためにコメントがあり、またホワイト・スペースを使って書式設定されています。

リスト 2. 保守する上で最適に記述された CSS ファイル
/* The main body for the page. */
body
{
    font-family : Tahoma,Geneva,sans-serif;
    background-color : #e2e2e2;
    margin : 0 0 0 0;
    padding : 0 0 0 0;
}

/* The header and header elements */
#header, #content, #footer
{
    padding 0;
    margin 0;
    width : 100%;
    min-width : 600px;
}

#header a
{
    text-decoration : none;
    border : none;
}

#header
{
    background : #fff url('images/lb-h.jpg') repeat-x top;
    height : 115px;
}

#header img.logo
{
    position : absolute;
    border : none;
    margin-top : 10px;
    margin-left : 50px;
    z-index : 1000;
}

/* Top banner... */
#banner
{
    margin : 0;
    padding : 0;
    background-color : #fff;
    border-bottom : 1px solid #bebebe;
    height : 265px;
    text-align : center;
}

/* This is the main content */
#content
{
    background : #fff url('images/lb-g.jpg') repeat-x top;
    min-height : 450px;
    display : inline-block;
    clear : both;
}

#footer
{
    border-top : 3px solid #bebebe;
    clear : both;
    min-height : 100px;
    font-size : smaller;
}

#followicons
{
    margin-left : 50px;
}

CSS ファイルを圧縮するためには、以下のコマンドを実行します。

java -jar yuicompressor-2.4.2.jar -o sample.min.css sample.css

このファイルを圧縮すると、出力はリスト 3 のようになります。このリストでは、読みやすくなるように改行を入れて行の幅を調整していますが、実際の YUI Compressor の出力には改行はありません。リスト 3 として表示されているものは、実際には 1 行です。

リスト 3. 圧縮した後の CSS ファイル
body{font-family:Tahoma,Geneva,sans-serif;background-color:#e2e2e2;margin:0;padding:0;}
#header,#content,#footer{padding 0;margin 0;width:100%;min-width:600px;}#header a{
text-decoration:none;border:none;}#header{background:#fff url('images/lb-h.jpg') repeat-x
top;height:115px;}#header img.logo{position:absolute;border:none;margin-top:10px;
margin-left:50px;z-index:1000;}#banner{margin:0;padding:0;background-color:#fff;
border-bottom:1px solid #bebebe;height:265px;text-align:center;}#content{background:#fff
url('images/lb-g.jpg') repeat-x top;min-height:450px;display:inline-block;clear:both;}
#footer{border-top:3px solid #bebebe;clear:both;min-height:100px;font-size:smaller;}
#followicons{margin-left:50px;}

YUI Compressor はファイル・サイズを小さくするために、単純にホワイト・スペースとコメントを削除するだけではなく、その他いくつかの最適化も CSS コードに対して実行します。では、CSS コードを小さくするために、どのようなことが行われたのでしょう。

  • ホワイト・スペースが削除されています。必須ではないホワイト・スペース (インデント、空白行、要素や括弧の間のスペースなど) は削除されています。CSS が正しく機能する上で必要なホワイト・スペース (セレクターの中の要素間のスペースなど) はそのまま残されています (リスト 4)。
    リスト 4. 不必要なホワイト・スペースを削除する
    /* Before */
    #header a
    {
        text-decoration : none;
        border : none;
    }
    
    /* After */
    #header a{text-decoration:none;border:none;}
  • コメントが削除されています。必ず含める必要のあるコメント (企業の著作権に関する注意書きなど) が CSS ファイルの中にある場合には、コメントの中に感嘆符 (!) を入れ、そのコメントを保持するように YUI Compressor に指示します (リスト 5)。
    リスト 5. 必要以外のコメントを削除する
    /* Before */
    /* This is the main content */
    #content
    {
        background : #fff url('images/lb-g.jpg') repeat-x top;
        min-height : 450px;
        display : inline-block;
        clear : both;
    }
    
    /* After */
    #content{background:#fff url('images/lb-g.jpg') repeat-x top;min-height:450px;
    display:inline-block;clear:both;}
  • 空の宣言が削除されています。YUI Compressor は、CSS が正しく機能するために必要なもの以外は、空の宣言をCSS ファイルから削除します (リスト 6)。
    リスト 6. 空の宣言を削除する
    /* Before */
    #followicons
    {
        margin-left : 50px;
    }
    
    #followicons a
    {
    }
    
    /* After */
    #followicons{margin-left:50px;}
  • その他にも最適化が実行されています。これらの最適化には、10 進数の前にあるゼロの削除、ゼロ値の簡略化、16 進数の値の簡略化などがあります (リスト 7)。
    リスト 7. その他の最適化を実行する
    /* Before */
    body
    {
        font-family : Tahoma,Geneva,sans-serif;
        background-color : #ffee22;
        margin : 0 0 0 0;
        padding : 0 0 0 0;
    }
    /* After */
    body{font-family:Tahoma,Geneva,sans-serif;background-color:#fe2;margin:0;padding:0;}

YUI Compressor による CSS コードの最適化が積み重なることで、CSS ファイルは非常に小さなものになります。

JavaScript コードを圧縮する

YUI Compressor を使用すると JavaScript コードも圧縮することができます。リスト 8 の JavaScript ファイルにはコメントや余分な書式設定が含まれています。

リスト 8. 保守しやすいように書式設定された JavaScript ファイル
/*
 * Creates a cookie on the system with the given name,
 * value, and for the given number of days.
 */
function createCookie(name, value, days) {

    if (days != null)
    {
        var date = new Date();
        date.setTime(date.getTime() + (days*24*60*60*1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else
    {
        var expires = "";
    }

    document.cookie = name + "=" + value + expires + "; path=/";

}

この JavaScript ファイルに対して YUI Compressor を実行するためには、以下のコマンドを実行します。

java -jar yuicompressor-2.4.2.jar -o functions.min.js functions.js

YUI Compressor によって最適化されたファイルは、リスト 9 のようになります。

リスト 9. 圧縮された JavaScript ファイル
function createCookie(c,d,e){if(e!=null){var b=new Date();b.setTime(b.getTime()+(e*24*60*
60*1000));var a="; expires="+b.toGMTString()}else{var a=""}document.cookie=c+"="+d+a+
"; path=/"};

YUI Compressor は Mozilla Rhino プロジェクト (「参考文献」を参照) のコードをカスタマイズして使用することで、JavaScript ファイルをトークン化します。Rhino は JavaScript コードを実行するための Java 実装であり、Java アプリケーションで JavaScript コードを実行できるようにすることにより、Java アプリケーションの拡張ポイントとして機能するように設計されています。

YUI Compressor では、JavaScript の実行を可能にするようにするライブラリーを使って JavaScript ファイルがトークン化されているため、JavaScript ファイルは安全に JavaScript コードにコンパイルされ、最初からその JavaScript コードを作成した場合と同じように実行されます。その他のユーティリティーとして、コードを縮小化するために正規表現を使用して「検索および置換」を行うユーティリティーなどは、使用される正規表現が十分に高度なものでないと、JavaScript コードが動作しない可能性があります。

JavaScript ファイルには、以下の最適化が実行されます。

  • ホワイト・スペースが削除されます。改行を含め、必須ではないホワイト・スペースはすべて JavaScript コードから削除されます。
  • コメントが削除されます。JavaScript ファイルのコメントは、/*! で始まる C 言語スタイルのコメントを除き、削除されます。企業の著作権やその他の情報をファイルに残す必要がある場合には、/*! を使用することで、それらの内容を必ずコメントの中に含めるようにします。
  • メソッド・スコープの変数がリネームされます。YUI Compressor コマンドで --nomunge オプションを使う場合を除き、YUI Compressor は JavaScript 関数の中にある変数の名前を自動的に短縮します。(YUI Compressor は、関数の外で宣言された変数は他の場所で使われる可能性があるとみなし、そのままにします)。JavaScript 言語での変数名は最低 1 文字あればよいため、変数名の短縮によっても JavaScript ファイルの中の文字数を大幅に減らすことができます。変数を置換すると JavaScript コードが多少難読化されたものになりますが、圧縮されたコードを変更する必要はないため、問題はないはずです。
  • セミコロンが削除されます。CSS を圧縮する場合と同様、不必要なセミコロン (;) はすべて、JavaScript コードから削除されます。
  • その他のオプション。行が長くなりすぎないようにファイルを分割する上で、--line-break オプションが重要になる場合があります。(YUI Compressor はファイルを最適化する際に、出力の中の改行を削除します。)

効果を確認する

圧縮の効果を確認するためには、いくつかのツールを使うことができます。なかでも Google® Chrome の「デベロッパー ツール」と Mozilla® Firefox の「Firebug」プラグインは、Web ブラウザーに直接組み込まれているため、別途プロファイリング・ツールを使用するよりも手軽に使用することができます。この 2 つはどちらも、ダウンロードされたリソースと、それらのファイル・サイズ、さらにはダウンロードに要した時間を表示することができます。

図 2 は Chrome のデベロッパー ツールでページを解析している例です。(これらのツールを利用するためには、Chrome ブラウザーで「ツール」 > 「デベロッパー ツール」の順にクリックします。)

図 2. Chrome ブラウザーのデベロッパー ツール
分析中のページのスクリーン・ショット
分析中のページのスクリーン・ショット

図 3 は同じページを Firefox の Firebug プラグインで分析している様子を示しています。

図 3. Firebug プラグイン
Firebug プラグインを使って分析中のページのスクリーン・ショット
Firebug プラグインを使って分析中のページのスクリーン・ショット

自動化手法 (次のセクションで説明します) を使用する場合には、古いファイルを使用する URL と、圧縮されたファイルを含む別の URL とを手軽に使用することができます (例えばhttp://localhost/orighttp://localhsot/minified など)。これらのツールを使用すると、Web アプリケーションの基本的なプロファイリングを行うことができ、CSS ファイルと JavaScript ファイルを圧縮することによる違いを知ることができます。最初は小さな数字に見えるかもしれませんが、そうした数字を軽視する前に少し計算を行って、最適化による長期的なメリットを導き出すことが重要であることを忘れないでください。

自動化と統合

圧縮プロセスを自動化するには、プロジェクトの中でファイルをステージングする段階とテストを実行する段階との間のステップとして、圧縮プロセスを追加します。リスト 10 の Ant ファイルを見ると、Ant を使って圧縮プロセスを自動化する方法がわかります。

リスト10. Ant を使って圧縮を自動化する
<?xml version="1.0" encoding="utf-8" ?>
<project name="my-web-site" default="usage" basedir=".">

    <property name="source.dir" value="${basedir}/application" />
    <property name="staging.dir" value="${basedir}/staging" />

    <macrodef name="yuicompress">
        <attribute name="filename" />
        <sequential>
            <java jar="${basedir}/tools/yuicompressor-2.4.2.jar" fork="true">
                <arg value="${source.dir}/styles/@{filename}" />
                <arg value="--type" />
                <arg value="css" />
                <arg value="-o" />
                <arg value="${staging.dir}/styles/@{filename}" />
            </java>
        </sequential>
    </macrodef>

    <target name="prepare-deploy">
        <echo level="info" message="Preparing files for deployment..." />

        <!-- minify the CSS -->
        <yuicompress filename="main.css"/>
    </target>

    <!-- The rest of the build script... -->

</project>

シェル・スクリプトや Windows PowerShell™ スクリプト、またはバッチ・ファイルを使用して圧縮プロセスを自動化することもできます。

適切にファイルをステージングできたら、ステージングされたコードに対し、必要に応じてテストを実行する必要があります。カスタムの JavaScript コードの機能を検証できるユニット・テストがない場合には、そうしたテストの作成を検討する必要があります。Web アプリケーションの UI にテストを導入する方法については、「参考文献」のリンクを参照してください。

また、Eclipse などの IDE と YUI Compressor を統合することもできます。統合すると、ビルド動作によって圧縮ファイルが自動的に生成されます。Eclipse と直接統合することによる比較的大きな欠点として、Eclipse にビルダーを追加しても、ビルダーによってリスト 10 の Ant スクリプトのようなスクリプトを呼び出すことで複数のファイルを圧縮するのでなければ、1 つのビルダーが最適化できるのは 1 つのファイルのみになります。

プロジェクト用として Eclipse に YUI Compressor を追加するためには、そのプロジェクトを Eclipse の中で選択し、「Project (プロジェクト)」 > 「Properties (プロパティー)」の順にクリックし、新しいビルダーをプロジェクトに追加します。それを終えた後、以下のステップを実行します。

  1. プロパティーの一覧から「Builders (ビルダー)」を選択し、「New (新規)」をクリックして新しいビルダーを追加します (図 4)。
    図 4. YUI Compressor をビルダーとして Eclipse に追加する
    プロジェクトにビルダーを追加する画面のスクリーン・ショット
    プロジェクトにビルダーを追加する画面のスクリーン・ショット
  2. 「Program (プログラム)」を選択し、「OK」をクリックします (図 5)。
    図 5. プログラムを実行するビルダーを追加する
    作成対象の外部ツールのタイプを選択する画面のスクリーン・ショット。選択肢として、「Ant Builder (Ant ビルダー)」、「Grails Tools (Grails ツール)」、「Program (プログラム)」が表示されています。
    作成対象の外部ツールのタイプを選択する画面のスクリーン・ショット。選択肢として、「Ant Builder (Ant ビルダー)」、「Grails Tools (Grails ツール)」、「Program (プログラム)」が表示されています。
  3. 起動構成の名前として「Compress (圧縮)」と入力します。
  4. Java フォルダーへのパスを入力します (/usr/bin/java など)。
  5. Variables (変数)」をクリックして ${project_loc} を追加し、プロジェクトが置かれる場所を作業ディレクトリーとして使用します。
  6. yuicompressor-{バージョン}.jar ファイルの名前を含む、コマンドの引数を追加します。図 6 の例では、JAR ファイルはプロジェクトの tools ディレクトリーに含まれていました。
    図 6. ツールのパラメーターを追加する
    「Edit launch configuration properties (起動構成プロパティーの編集)」画面のスクリーン・ショットとして「Main (メイン)」タブが表示されています。テキスト・フィールドとして、「Location (ロケーション)」、「Working directory (作業ディレクトリー)」、「Arguments (引数)」が表示されています。
    「Edit launch configuration properties (起動構成プロパティーの編集)」画面のスクリーン・ショットとして「Main (メイン)」タブが表示されています。テキスト・フィールドとして、「Location (ロケーション)」、「Working directory (作業ディレクトリー)」、「Arguments (引数)」が表示されています。
  7. Refresh (リフレッシュ)」タブをクリックし、続いて「Refresh resources upon completion (完了時にリソースをリフレッシュ)」を選択します。更新が必要なプロジェクトは、リソースを含むプロジェクトのみです。

Ant スクリプトをビルドして圧縮を実行する場合には、プロジェクトにビルダーを追加し、同様の方法でその Ant スクリプトを呼び出します。Ant ビルダーを Eclipse 環境に統合する方法の例については「参考文献」のリンクを参照してください。

まとめ

YUI Compressor は、CSS リソースと JavaScript リソースを縮小化することによって最適化を行うツールの 1 つです。リソースを縮小化することで、サイトで使用される帯域幅を抑えられ、サイトを訪れた際のロード時間が短縮されるというメリットがあります。1 つのファイルを取ってみると、縮小化による効果は小さなものに思えるかもしれませんが、頻繁に使用されるサイトでは、その積み重ねによって非常に大きな効果が得られることになります。

ステージング・ステップに YUI Compressor を追加すると、ファイルの開発や保守に影響を与えずに CSS ファイルと JavaScript ファイルを最適化することができます。CSS ファイルと JavaScript ファイルを圧縮する方法は、リソースを最適化して Web アプリケーションの動作を高速化する作業全体のなかの一部にすぎません。


ダウンロード可能なリソース


関連トピック


コメント

コメントを登録するにはサインインあるいは登録してください。

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=60
Zone=Web development
ArticleID=591199
ArticleTitle=Web アプリケーションを高速化する
publish-date=10262010