ハイパフォーマンスWebサイト
G.W.も後半。ちょっとは勉強しておこう。ということで今読んでいる本はこれ。
ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール
- 作者: 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>