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

白石俊平(オープンウェブ・テクノロジー代表)
2013-05-17 17:20:00
  • このエントリーをはてなブックマークに追加

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

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

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


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

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


rendering-process
rendering-process

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


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

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


costs
costs

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

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


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

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

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

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


timeline-view
timeline-view

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

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

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




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

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


rendering-options
rendering-options

  • Show paint rectangles--(再)描画が行われた領域をわかりやすく表示する。この領域が小さいほど、描画処理のコストは小さくなる。
  • Show composited layer borders--レイヤの境界を表示する。レイヤについてはこちらのページに詳しい

  • Show FPS meter--FPSメーターを、常に画面右上に表示する

FPSメーター
FPSメーター

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

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

 こうした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パフォーマンスを良好に保つために、あなたにできること
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の有効/無効を切り替えることで、パフォーマンスへの影響を体感できる。

  • 新着記事
  • 特集
  • ブログ
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]