ハイパフォーマンスWebサイト

G.W.も後半。ちょっとは勉強しておこう。ということで今読んでいる本はこれ。

作者: Steve Souders,スティーブサウダーズ,武舎広幸,福地太郎,武舎るみ
出版社/メーカー: オライリージャパン
発売日: 2008/04/11
メディア: 大型本
購入: 32人クリック: 676回
この商品を含むブログ (123件) を見る

パフォーマンスチューニングというと何かとサーバーサイドでやることが多い。ビジネスロジックの見直しやDBなど。しかし本書はフロントでのパフォーマンスチューニングのテクニックについて述べているところが新しい。本書では14のテクニックが紹介されています。

HTTPリクエストを減らす
CDNを使う
Expiresヘッダを設定する
コンポーネントをgzipする
スタイルシートは先頭に置く
スクリプトは最後に置く
CSS expressionの使用を控える
javascriptとcssは外部ファイル化する
DNSルックアップを減らす
javascriptを縮小化する
リダイレクトを避ける
スクリプトを重複させない
ETagの設定を変更する
Ajaxをキャッシュ可能にする

どうでしょう。タイトルを見ただけで、読みたくならないですか。例えばスタイルシートは先頭に置いてスクリプトは最後に置くのはなんでだろう？とか。おそらく会社でもここまで指摘してくれる先輩というのはいないのではないでしょうか。いなけりゃ本で勉強して自分がなればいいのだ。ハハ。値段も1800円と技術書としては非常に安い！一家に一冊！

まだまだ読み始めたばっかりだけど、早速「HTTPリクエストを減らす」の章で紹介されていたCSSスプライトなる技を覚えた！これ結構使われているテクニックなんですね。多分知らない方が恥ずかしいんだろうけど・・・。例えばGoogle。つい最近トップページにGMailやYouTubeのアイコンが表示されるようになりました。これがCSSスプライトで実現されています。
例えば「おすすめ」タブには5つのアイコンが表示されていますが、それぞれのアイコン画像を5つ指定しているわけではありません。5つ指定すると5回のHTTPリクエストが必要ですが、HTTPリクエストの回数を減らすためにアイコンが連なった画像を1回だけ取得し、CSSで、1つだけ表示されるようにしています。その連なった画像は以下URLで確認できます。
http://www.google.co.jp/intl/ja/images/jawh_prodiconl3.png

連なった画像からどのように任意の1つを取り出すのか、というのはgoogleのページのソースを読めばすぐ分かります。分かってしまえば、いつも通りふーんって感じです。以下はそれをちょこっとだけいじってスライドさせてみました。実行してもらえば、CSSスプライトの雰囲気が分かってもらえるのではないでしょうか。

<html>
<head>
<style type="text/css">
.iconl {
  height:35px;
  overflow:hidden;
  position:relative;
  width:35px;
}
</style>
</head>
<body>
<div class="iconl" style="border:solid 1px black;">
  <img id="icon" src="http://www.google.co.jp/intl/ja/images/jawh_prodiconl3.png" style="position:absolute; left: 0px;">
</div>

<script type="text/javascript">
(function(){
  var elem = document.getElementById("icon");
  var counter = 0;

  var callback = function() {
    if ( counter < -560 ) return;

    elem.style.left = --counter;
    setTimeout(callback, 0);
  };

  setTimeout(callback, 0);
})();
</script>

</body>
</html>