パフォーマンス向上のためのテクニック
リクエスト数を減らす
ページのロード処理で一番ボトルネックになりやすいのはネットワーク通信です。ページから読み込む外部CSSや外部JavaScriptのファイル数に比例してリクエスト数は多くなり、ページのロードが完了するまでにかかる時間も長くなります。
分割しておく必要のないJavaScriptやCSSファイルを1つのファイルに結合したり、後述するように画像をCSSスプライト化することでリクエスト数を減らすことができます。
JavaScriptやCSSを外部ファイル化する
リクエスト数を減らしたほうがよいとはいえ、JavaScriptやCSSはHTMLに埋め込むよりも外部ファイルにしておくほうが望ましいです。HTMLは比較的頻繁にコンテンツが更新されるので、更新のたびにページ全体を新しく読み込む必要があります。比較的更新頻度の低いJavaScriptやCSSは、HTMLが更新されても新しく読み込み直す必要はない場合が多く、外部ファイル化しておけば以前ブラウザに読み込まれた時のキャッシュを使うことができます。HTMLにJavaScriptやCSSを埋め込んでしまうと、そのようなキャッシュの使い方はできなくなります。
Webサイトを最適化した状態の一例として、HTMLファイル1つ、JavaScriptを結合したファイル1つ、CSSを結合したファイル1つ、画像をCSSスプライト用に結合したファイル1つ、という合計4つのファイルで構成することができます。この場合、更新されたファイルだけを読み込み直せば残りの3ファイルについてはキャッシュを利用できます。
CSSスプライト
CSSスプライトは、複数の細かな画像をまとめて一つの大きな画像を作り、それをCSSで分割して表示する手法です。複数の画像を1ファイルにまとめることでリクエスト数を減らせるためページのロードを高速化できます。ブラウザ側でCSSを使って画像を部分的に切り取って表示することにより、異なる画像ファイルを個々に表示するのと同じ見た目を実現できます。
CSSスプライトによるもう一つのメリットとして、マウスオーバー時の画像を事前にロードできるという点があります。マウスオーバー時に表示する画像をマウスオーバーしてから読み込むと、画像を新たにダウンロードする必要があるため表示が変わるまでにタイムラグが生じます。この現象を回避するにはJavaScriptで事前にロードしておく手法もありますが、CSSスプライトを使えばそのようなテクニックは必要ありません。ボタンの通常時の画像とマウスオーバー時の画像をひとまとめにしてCSSスプライトで表示すれば、タイムラグを生じさせることなく画像を切り替えられます。
注意点としては、極端に縦横サイズが大きい画像を作らないようにしてください。スプライト化した画像の一辺が数千ピクセルを超えるほどになると、その画像を表示するのにブラウザがメモリを極めて多く消費するようになります。したがって、元となる画像自体がある程度の縦横サイズのあるものならば、わざわざスプライトを作成するメリットはあまりありません。アイコンやボタンなど、お互いに関連した小さな画像を一枚のスプライトにまとめると高い効果が得られます。
1つの画像を変更するたびに画像を合成し直す必要があるためメンテナンスのコストが増えますが、Compassというツールを使うと画像やCSSの作成を自動化できます。また、Web上でCSSスプライトを作成できる無料のサービスもあります。
パーツのロードを遅らせる
ページ本体に直接関係のない補助的なコンテンツをAjaxで後から部分的にロードするようにすると、最初のコンテンツが描画されるまでの時間を短縮できます。
ページのメインコンテンツはページが最初に描画された時点で表示されているのがベストですが、サイドバーなどはユーザーがコンテンツを読んでいる間に読み込みを開始してもさほど差し支えない場合があります。ユーザーの体感速度を上げるには、最初にロードすべき部分と、遅れてロードしてもよい部分とにコンテンツを分けて、遅れてロードしてもよい部分はAjaxで後から部分的に読み込むようにします。ただし、このような構成を取るとプログラムが複雑になり、またAjaxでロードされるコンテンツは検索エンジンから認識されにくいといったデメリットもあるので総合的に判断してください。
画像のサイズを削減する
PNGやJPEGの画像は、ファイルに含まれる不要なコンテンツを削除することで見た目を劣化させずにファイルサイズを削減できます。
Macを含むUNIX環境で使用できるコマンドラインツール
MacやLinuxを含むUNIXライクなOSではコマンドラインで最適化処理を行うことができます。それ以外のプラットフォームで実行する方法については後述します。
PNGの最適化
PNGファイルを最適化するにはpngcrushというツールを使います。
インストール
ここからpngcrushの最新のソースコードをダウンロードします。ターミナルを開き、ファイルをダウンロードしたディレクトリに移動します。次のコマンドを実行してコンパイルします。
$ tar zxvf pngcrush-1.7.27.tar.gz $ cd pngcrush-1.7.27 $ make
makeコマンドが完了するとpngcrushという実行ファイルができるので、/usr/local/bin/などPATHが通っているディレクトリにコピーします。
pngcrushの使い方
before.pngというファイルを最適化してafter.pngを出力するには次のようにコマンドを実行します。
$ pngcrush -rem alla -reduce -brute before.png after.png
たくさんのファイルをまとめて処理したい場合、カレントディレクトリのすべての*.pngファイルを最適化して上書きするには次のコマンドを実行します。
$ for i in *.png; do tmp="${i%.png}-crush.png"; pngcrush -rem alla -reduce -brute "$i" "$tmp" && /bin/mv "$tmp" "$i"; done
JPEGの最適化
JPEGファイルを最適化するにはjpegtranというツールを使います。
インストール
サイトからソースコードをダウンロードします。ダウンロードするファイル名は jpegsrc.v8d.tar.gz か、なければ同様の最新バージョンのものを選んでください。
ターミナルを開き、ファイルをダウンロードしたディレクトリに移動します。次のコマンドを実行してコンパイルとインストールを行います。
$ tar zxvf jpegsrc.v8d.tar.gz $ cd jpeg-8d $ ./configure $ make $ make install （適切な権限で実行する）
jpegtranの使い方
before.jpgというファイルを最適化してafter.jpgを出力するには次のようにコマンドを実行します。
$ jpegtran -copy none -optimize -outfile after.jpg before.jpg
たくさんのファイルをまとめて処理したい場合、カレントディレクトリのすべての*.jpgファイルを最適化して上書きするには次のコマンドを実行します。
$ for i in *.jpg; do jpegtran -copy none -optimize -outfile "$i" "$i"; done
その他のツール
PNGやJPEG画像の最適化ツールとして、Mac向けにImageOptimというGUIのフリーソフトウェアがあります。また、どのOSでも使えるオンラインの無料ツールとしてはSmush.itがあります。
