メモログ

CSSセレクタを効率的な記述にする

Page Speedの評価の一つにUse efficient CSS selectorsという項目があり、そこで効率的な CSS セレクタを使用するという話が挙げられています。

ブラウザではセレクタの規則を右から左にフィルターしていくそうなのですが(「div img a」なら a タグを見つけて、先祖に img があるもので絞り込んで、さらにその先祖に div であるもので絞り込む )、このフィルターの処理がパフォーマンスを悪化させるらしいのです。だからパフォーマンス的には子孫セレクタの指定はできるだけ避けた方がよくて(子供セレクタの方がましらしい)、ID のみとか class のみとかできるだけシンプルな方が良い、という話。

ブラウザの内部処理を考えれば、当たり前と言えば当たり前のように感じますが、CSS の書き方でパフォーマンスが劣化するという意識したことがなかったのでなかなか興味深かったです。私はどちらかというとスタイルの宣言の予期せぬ競合を避けるために余分に詳細度を上げている方だったのですが、今回はかなりシンプルに変更してみました。<li>タグのそれぞれに class 属性挿入していくの面倒くさいなあとか思いつつも、今回は class 属性でリストを特定できるように全部入れてみました。サイトの構築のスピードとか class 属性の記述漏れなどを考えると、<li>タグは親の<ul>タグに class 属性つけて「.list < li」みたいに指定するのは許容範囲なのかなあとは個人的には思いますけど。

そして、実際のところ、CSS の記述の仕方を変えたことによるパフォーマンスの向上はあまり感じられないわけですが。まあとにかく、大きなサイトでトラフィックもあり CSS の量も多いという場合には一考の余地はあるのではないのかなと思います。

私について

Yutaka Yamaguchi
東京在住。TypeScript, Node.js, Reactなどフロンエンドが主力。Perlも書く。SwiftやRubyも過去には使ってた。過去のTOEIC 860くらい。