プログラマ的京都生活

2008年05月04日

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

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

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

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

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

まだまだ読み始めたばっかりだけど、早速「HTTPリクエストを減らす」の章で紹介されていたCSSスプライトなる技を覚えた!これ結構使われているテクニックなんですね。多分知らない方が恥ずかしいんだろうけど・・・。例えばGoogle。つい最近トップページにGMailYouTubeアイコンが表示されるようになりました。これが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>

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証