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
- Show paint rectangles--(再)描画が行われた領域をわかりやすく表示する。この領域が小さいほど、描画処理のコストは小さくなる。
- Show composited layer borders--レイヤの境界を表示する。レイヤについてはこちらのページに詳しい
- Show FPS meter--FPSメーターを、常に画面右上に表示する

FPSメーター
Enable continuous page repainting--画面を強制的に再描画し続けるモード。このモードにすると、画面右上に描画の処理時間を表すメーターが現れる。このメーターを表示しながら、CSSプロパティの有効/無効を切り替えたり、要素の表示/非表示を切り替えたりすることで、描画コストを高くしている原因は何かを探ることができるわけだ。
cont-repaint1
こうしたDevToolの機能をフル活用することで、CSSのパフォーマンスチューニングを効率よく行なっていくことができる。
まとめ
ブラウザの技術は非常に進化が早く、現在パフォーマンスチューニングにおいて正解とされていることも、時が経つとセオリーも変化する。CSSセレクタに関する俗説がその良い例だ(CSSセレクタは十分速い!)。また、ブラウザによってもパフォーマンスのボトルネックは変わり得る。そうした前提を踏まえた上で、Paul氏によると現時点では以下のCSSプロパティがコスト高だという。
- position:fixed
- background-attachment:fixed
- border-radiusとbox-shadowの併用
- background-size
- border-radiusとbox-shadowの併用
- @font-face
- CSSグラデーション
- text-align
とはいえ、これらのプロパティなしでウェブページのスタイリングを行うのは、非常に厳しいものがあるだろう。また、これらの描画コストが高いという状況も、将来的には変わり得る。そうした状況でエンジニアができることは、スタイルを出来る限りシンプルに保ち、デザイナーとのコミュニケーションを密に行うことが重要である。
また、以下のような事柄は常に心がけておくと良い。
- requestAnimationFrameやCSSアニメーションは積極的に使用する
- 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の有効/無効を切り替えることで、パフォーマンスへの影響を体感できる。
- 新着記事
- 特集
- ブログ
- 企画特集
-
連載!プロが語るストレージ戦略
-
IDaaSって何?
-
特集:IT最適化への道
-
次の一手はこれだ!
-
講演の見どころを紹介
-
さあ、クラウドで解決しよう。
-
セキュリティの今を知る
-
デジタルを当たり前と言えるか?
-
いまあるデータで身近な業務をDX
-
保育業界のDX(前編)
-
利便性とセキュリティの両立
-
いまさら聞けない「PPAP」
-
保育業界のDX(後編)
-
連載!プロが語るストレージ戦略
-
話題のセキュリティ事故体験ゲーム
-
明日からではもう遅い?!
-
ゼロトラストに不可欠なID管理
-
連載!プロが語るストレージ戦略
-
いままさに社会にとっての転換点
-
請求書がきてからでは遅い
-
データの散在と非常率運用がネック
-
ビッグデータ最前線!
-
モバイルデバイスもターゲットに!
-
内部不正や不注意をどう防ぐ?
-
企業DXのキモはクラウドにあり