CSS: Using every declaration just once

セレクタをまとめてCSSファイルを小さくする小ネタ。比較的楽に適用できますが、虚しい技法に感じるのはぼくだけでしょうか。

Improving website performance with Page Speed

FirefoxプラグインのPage Speedの紹介記事です。同種のツールのYflow(Yahoo!版)が意外に使えなかったので、後出しのPage Speedも無視していましたが、記事の中の「使われていないCSSルールの抽出」が便利そうなので使ってみました。使われていないCSSのルールを表示できた時は一瞬感動したのですが、よく考えると、特定の画面で使われていないCSSルールがわかったところで、そのCSSルールを削除できるわけではありません(CSSファイルを複数の画面で共有している前提です)。

遅いCSSルールの指摘もしてくれますが、単に長いセレクタを抽出したのと変わらない結果になりました。そもそもやっていることが6年前(参考 http://dev.ariel-networks.com/Members/inoue/css-perf)と何ひとつ変化がありません。JavaScriptの世界は6年間で激変していますが、CSSの世界の変わらなさ(知らないだけ?)にも驚きます。w3cのサイト(http://www.w3.org/Style/CSS/current-work.html)を見ても、CSSがどこに向かっているのかまったく不明です。

と言うわけでYflow同様、結局、使えないツール認定になりました。ただし、下記の Web Performance Best Practices は目を通す価値があると思います。

• http://code.google.com/speed/page-speed/docs/rules_intro.html

Reducing the file size of HTML documents

HTML4は(XHTMLと違って)省略可能な閉じタグがあるのでHTMLサイズを減らすために省略できる...世も末なり。

Properly including stylesheets and scripts

Yflow関連で既に有名になっていますが、CSSおよびJavaScriptをHTML内からどの順序で指定すると速いか、という話です。Page Speedの説明(下記)の方がわかりやすいかもしれません。

• http://code.google.com/speed/page-speed/docs/rtt.html#PutStylesBeforeScripts

表面的な結論だけ書くと、外部CSS指定を外部JavaScript指定より先に書け、になります。なぜと問われれば外部JavaScriptの読み込みは並行読み込みをせず、後続する外部CSS読み込みすらも待たせるから、ということです。似たような動作でインラインのJavaScriptコードは後続する外部ファイルの読み込みを待たせます。このためインラインのJavaScriptファイルをなるべく後に書け、という指針が生まれます。

すべて、現状のWebブラウザの実装の都合にあわせたハックですが。

Minimizing browser reflow

アリエルに(局所的)reflowブームをもたらした記事です。

reflowとは簡単に言えばHTML(内部的にはDOMツリー)の描画の再計算のことです。CSSでDOM要素のどのスタイルを変更するとreflowが発生して、かつそのreflowがどれだけ遅いかを表にしています。少し便利な気もする半面、Google Chrome速い、と言いたいだけではないかという疑惑も感じる表です。

重いDOM操作(スタイル変更含む)をreflowに影響せずに実行するため、display:noneの状態でDOM操作したり、position:absolute(or fixed)指定のDOM要素を操作しろ、という指針が得られます。一番有効な指針は、こういうことを考慮したJavaScriptライブラリを使え、です。