This is where he blogs about web design, front-end development, web performance, and other things web-related.

HTTPリクエストの回数を削減するために利用できるテクニックのひとつにData URIsがある (RFC 2397: The "data" URL scheme)。これはデータをbase64でエンコードしてHTMLやCSSに直接埋め込むもの。ひとつのファイルにデータを含めることができるため、その分HTTPリクエストの回数を削減できる。ただし、IE6およびIE7では対応していないほか、base64にエンコーディングするため圧縮しない状態ではサイズが膨れ上がるという欠点もある。

このData URIsの活用について、Rob Flaherty氏が自身のブログにおいて興味深い記事を公開している。記事は何回かに分かれており、Data URIsを利用しようとした最初のきっかけから、実際にベンチマークを実施した結果が想定していた結果と違っていたこと、コメントに寄せられた意見から計測時には考えていなかった要因が影響するケースがあることなどが順次まとめられている。高速化テクニックの適用事例として参考になる。

• CSS data URIs and Resource Packages
• Convert CSS images to data URIs automatically with CSSEmbed
• CSS Images and Data URIs
• A Look at How Browsers Download and Render CSS Background Images
• Data URIs for CSS Images: More Tests, More Questions
• Latency and Bandwidth Effects on data URIs in CSS

Rob Flaherty氏ははじめ、Data URIsを適用することで高速化が実現できると考えていたという。CSSEmbedを使ってCSSと複数の画像をひとつのファイルにまとめ、さらに圧縮して利用する。結果的にサイズは微増するものの、HTTPリクエスト回数を大幅に削減できるため、結果として高速化するだろうと考えたわけだ。しかし結果はこれとは異なり、それほど大きな改善は計測できなかったという。

この結果に対してコメントには、実際に効果が得られるというコメントがあり、レイテンシが大きい状況では効果が見込めることが明かになる。さらにブログのなかで、ブラウザの並列ダウンロードが影響すること、画像のサイズや組み合わせも影響すること、CSSをヘッダとフッタに分けることで改善が見込めることなどが時系列で書き込まれている。古いブログから読んでいくと、どういった疑問が生まれ、どういった結果が観測されたのかがわかる。なお、さらに今後もData URIsに関する情報をブログを掲載する意向のようで、今後の展開も興味深い。

Rob Flaherty氏が使ったCSSEmbedはNicholas C. Zakas氏が開発しているツール。Nicholas C. Zakas氏はYahoo!でWebデベロッパ/フロントエンドエンジニアを務めるとともに、"Professional JavaScript for Web Developers"、"Professional Ajax"などの書籍の著者であり、NCZOnlineにおいてJavaScriptパフォーマンスに関する記事やJavaScriptに関連するブラウザの動作などの記事を公開している。

• 優れたソフトウェア開発者になる6つの方法
• JavaScriptコールスタックサイズ、ブラウザ比較
• JavaScript変数読み書きのパフォーマンス比較、高速化テクニック
• Speed up your JavaScriptシリーズ全4回、ブラウザには止めさせない