サイト高速化のための JavaScript と CSS 圧縮スクリプト

　サイトパフォーマンス計測ツールの PageSpeed や YSlow を使うと、JavaScript や CSS を 1 つにして圧縮しろしろ、怒られ？ます。圧縮するには、Eclipse プラグインや GUI ツールなどもありますが、ant のコマンドでお手軽にしたい場合はこんなのでいけます。呼び出している yuicompressor は Yahoo! の Java 製圧縮ライブラリーです。

<?xml version="1.0" encoding="UTF-8"?>
<project default="build">

  <target name="build">

    <!-- JavaScript 連結 -->
    <concat destfile="httpdocs/all.js" encoding="UTF-8" fixlastline="yes" eol="lf">
      <filelist dir="httpdocs" files="jquery-1.4.2.js"/>
      <filelist dir="httpdocs/foo" files="bar.js"/>
      <filelist dir="httpdocs" files="common.js"/>
    </concat>

    <!-- JavaScript yui 圧縮、gzip 圧縮 -->
    <antcall target="yui.gzip"><param name="src" value="httpdocs/all.js"/></antcall>

    <!-- CSS 連結 -->
    <concat destfile="httpdocs/all.css" encoding="UTF-8" fixlastline="yes" eol="lf">
      <filelist dir="httpdocs" files="hoge.css"/>
      <filelist dir="httpdocs" files="fuga.css"/>
      <filelist dir="httpdocs" files="common.css"/>
    </concat>

    <!-- CSS yui 圧縮、gzip 圧縮 -->
    <antcall target="yui.gzip"><param name="src" value="httpdocs/all.css"/></antcall>

  </target>

  <target name="yui.gzip">

    <exec executable="java.exe" dir=".">
      <arg value="-jar"/>
      <arg value="yuicompressor-2.4.2.jar"/>
      <arg value="--charset"/>
      <arg value="UTF-8"/>
      <arg value="-o"/>
      <arg value="${src}.min"/>
      <arg value="${src}"/>
    </exec>

    <gzip src="${src}.min" destfile="${src}.gz" />
    <delete file="${src}.min" />

  </target>

</project>

　上記で、all.js.gz と all.css.gz が出来上がります。で、HTML ソースには all.js や all.css とそのまま書きたいので、.htaccess に下記みたいなのを書いとけば、gz 付きのファイルを見に行ってくれます。

#--------------------------------------
# GZIP Compression
#--------------------------------------
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME} !\.gz$
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz [L]

<FilesMatch "\.html\.gz$">
    ForceType text/html
    AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.js\.gz$">
    ForceType application/x-javascript
    AddEncoding x-gzip .gz
</FilesMatch>

<FilesMatch "\.css\.gz$">
    ForceType text/css
    AddEncoding x-gzip .gz
</FilesMatch>

で、実際のところ、パフォーマンスアップに強力に効くのはキャッシュなので、以下のような設定を .htaccess に追加しておくと吉です。

#--------------------------------------
# Expires Settings
#--------------------------------------
ExpiresActive on
ExpiresDefault "access plus 1 month"

#--------------------------------------
# ETags None
#--------------------------------------
FileETag None

　JavaScript などの内容を変更してリリースするときは、キャッシュを見てしまわないように
src="all.js?v20100426"
のようにバージョンを付けると、ブラウザが再取得してくれます。