HTML5 Boilerplateの開発者でGoogleのエンジニア、ポール・アイリッシュに聞くCSS高速化テクニック

　Adobe Systemsがロサンゼルスで5月に初旬に開催した「Adobe MAX 2013」において、HTML5 Boilerplateの開発者として知られるPaul Irish氏の講演「Mobile CSS Performance」を聴講した。その内容をベースにしながら、CSSを高速化するためのさまざまなテクニックを紹介する。

　Paul Irish氏は、HTML5 BoilerplateやModernizrなどの開発者として世界的に著名なGoogleのエンジニア。その彼が直接CSSのパフォーマンスを語るとあって、セッションは大変な人気であった。

HTML5 Boilerplateの開発者として有名なPaul Irish氏

　一般的にウェブページの高速化、特にモバイルにおいてはCSSを高速化することよりもネットワークのパフォーマンスを最適化する方が効果が高い。そのため、まずはPageSpeedやYSlowなどを効果的に使用し、HTTPリクエスト数を減らす、ダウンロードされるリソースのサイズを減らすなどの施策を行うことが重要だ。

　その上でウェブページのレンダリング処理を高速化する必要がある場合、まずはブラウザがレンダリングの際に行う様々な処理を理解する必要がある。まず、HTMLをパースしてDOMツリーを、CSSをパースしてCSSOM（CSSオブジェクトモデル）を構築する。それらの結果から、画面に描画するオブジェクトのツリー構造（Render Tree）を構築した後それらをレイアウトし、そして画面への描画処理を行う。

rendering-process

　こうした一連の処理におけるCSSのパフォーマンスを考える際に重要なのは、現在のブラウザにおいてCSSセレクタの評価処理は十分に速いということだ。CSSのパフォーマンスチューニングというと、CSSセレクタの記述方法が必ず話題として挙げられるが、現在のブラウザにおいては十分に高速化されているため、それほど大きな効果は期待できない。

「CSSセレクタは速い」と、これ以上ないほど強調

　では実際にパフォーマンス上問題となるのはどの処理なのだろうか。以下のスライドはCSSに関わる処理の大まかなコストを示したものだ。（C）とあるのは、処理コストが安い（Cheap）という意味のC。「$」が多いほど処理コストが高い。つまり、レイアウトや描画処理のコストが高いということだ。つまり、CSSのチューニングで目指すべきは、レイアウトや描画処理のコストをいかにして低くするか、というものになる。

costs

フレームレートを意識したチューニング

　現在のモバイル端末やラップトップ、ディスプレイで一般的なリフレッシュレートは60Hzであることから、60fpsを目標とする。 60fpsを目指すとするならば、各フレームにかけられる最長の時間は16ms（1000ms / 60)。この16msの間に、JavaScriptの実行やレイアウト処理、描画処理を終わらせることを目標とする。中でも、最もコストの高い描画（Paint）処理には注意が必要だ。また、ウェブページ上でユーザーが最も頻繁に行う操作であり、かつ大幅な画面更新を伴う処理として、スクロール処理のパフォーマンスには特に注意を払う必要がある。

60fpsを目指すなら、1フレームは16msとなる。

　こうした目標の達成に有効なのが、Google Chromeの開発者ツールである。特に開発者ツールは常に改善が続けられているため、Canaryビルド（一般的に言うナイトリービルド）を利用するべきだとPaul氏は言う。

Chrome開発者ツールを使用したレンダリング処理のモニタリング

　開発者ツールの中で、レンダリング処理のパフォーマンスをモニタリングするのに使用するのはタイムラインビューだ。開発者ツールを表示し、「Timeline」と書かれたタブをクリックすると利用できる。

timeline-view

　このビューでは、レンダリングにかかったトータルの処理時間とその内訳を確認することができる。このビューを起動した状態でウェブページを動かしてみて、パフォーマンスのボトルネックになっている部分を見つけ出すことができる。

　さまざまなサイトでタイムラインビューを確認してみると、確かに画面への描画処理（Paint。Timelineビューにおける緑色の表示）が最もコスト高であるようだ、ということが確認できる。

　その他、CSSセレクタの評価コストについては、プロファイルビューで確認できる。開発者ツールを表示し「Profile」と書かれたタブをクリックして、「Collect CSS Selector Profile」を選択する。

　「CSSセレクタは、パフォーマンスのボトルネックにならない」というのは、Paul氏が繰り返し語っていたこと。それでもなお気になるという場合は、このツールを利用するといいだろう。

　ほかにも、現在のGoogle Chrome Canary（バージョン29）では、開発者ツールで以下のような設定を利用することができる。

rendering-options

FPSメーター

Enable continuous page repainting--画面を強制的に再描画し続けるモード。このモードにすると、画面右上に描画の処理時間を表すメーターが現れる。このメーターを表示しながら、CSSプロパティの有効／無効を切り替えたり、要素の表示／非表示を切り替えたりすることで、描画コストを高くしている原因は何かを探ることができるわけだ。

上のページでは、各要素のbox-shadowとborder-radiusを無効にすることで、描画コストを大幅に減らせる。

　こうしたDevToolの機能をフル活用することで、CSSのパフォーマンスチューニングを効率よく行なっていくことができる。

まとめ

　ブラウザの技術は非常に進化が早く、現在パフォーマンスチューニングにおいて正解とされていることも、時が経つとセオリーも変化する。CSSセレクタに関する俗説がその良い例だ（CSSセレクタは十分速い！）。また、ブラウザによってもパフォーマンスのボトルネックは変わり得る。そうした前提を踏まえた上で、Paul氏によると現時点では以下のCSSプロパティがコスト高だという。

---

　とはいえ、これらのプロパティなしでウェブページのスタイリングを行うのは、非常に厳しいものがあるだろう。また、これらの描画コストが高いという状況も、将来的には変わり得る。そうした状況でエンジニアができることは、スタイルを出来る限りシンプルに保ち、デザイナーとのコミュニケーションを密に行うことが重要である。

　また、以下のような事柄は常に心がけておくと良い。

CSSパフォーマンスを良好に保つために、あなたにできること

　最後に、本セッションで参照されていたリンクを以下にまとめておく。

パフォーマンスに関する有用なリソース

・@ChromiumDev
・Google Chrome DevelopersのGoogle+ページ
・html5rocks.comのパフォーマンスに関する記事
jankfree.org ・パフォーマンスに関する良記事を集めたリンク集

デモ

・Spreadというデモこのデモを、「Show Paint Rectangle」オプションを有効にして、画面描画が必要最小限となっていることを示していた。
・CSS Transformを使用したページ高速化ハック

・背景画像が固定されているページ。「background-attachment: fixed」がパフォーマンスに及ぼす悪影響をデモしていた。

・box-shadowとborder-radiusを併用。

　Chrome開発者ツールで「Enable continuous page repainting」オプションを有効にした状態で、box-shadowとborder-radiusの有効／無効を切り替えることで、パフォーマンスへの影響を体感できる。