new takyam();

Qiitaぽい話はQiitaに書いていくことにする気がする http://qiita.com/takyam

ブラウザのレンダリングスピードはちゃんとベンチしようねって話

Gone In 60 Frames Per Second: A Pinterest Paint Performance Case Study
http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/

冒頭から引用

Today we’ll discuss how to improve the paint performance of your websites and Web apps. This is an area that we Web developers have only recently started looking at more closely, and it’s important because it could have an impact on your user engagement and user experience.
( あなたのWEBサイトやWEBアプリケーションの描画パフォーマンスをどのように向上させれば良いか考察してみます。我々WEB開発者がよくみてみると、ユーザーエンゲージメントやユーザーエクスペリエンスに影響を与える可能性があるので、非常に重要な領域のお話です)
※訳違ったらすみません(´・ω・`)

JSのパフォーマンスは気にする事あっても、各画像のレンダリング速度まできにした事は無かったのでちょっと気になった。
もう8年くらい前に、WEBサイトの背景画像を1pxで作っちゃってそれをリピートすれば軽いじゃん!と思ったら、たしかにファイルサイズは小さいけど描画で死んだのはいい思い出。

英語得意じゃないので半分も読めてないのだけど、60FPSと30FPSとでは、エンゲージメント(コンバージョン的なの??)の確率が結構違うらしい。
FacebookとかPinterestみたいに大量の情報があるようなサイトだと、まぁなんとなくわかる気はする。

Googleの開発チームはレンダリングスピードが遅いページを「jank」って言うらしい。

とはいえ普段そんなにきにした事なかったのでどういうふうにDebugしたら良いのか知らなかったのですが、とりあえずChromeのCanaryBuild使っとけよな感じっぽい。

f:id:takyam1213:20130611234122j:plain

chrome canary
https://www.google.com/intl/en/chrome/browser/canary.html

FirefoxのNightlyBuildみたいなイメージかしら。不安定なDev版だけど最新の機能が使えるよ、的な。

で、canaryでDeveloperToolsを開いて設定からモニョモニョすると、FPSが見れると。

f:id:takyam1213:20130611234407j:plain

DeveloperToolのGeneralタブの「Rendering」項目の中に「Show FPS meter」があるので、ソレをオンにすると、上の画像の右上にある黒背景の赤い線&文字のFPSレートが見れたりする。

あとは同じ設定箇所の「Show paint rectangles」をオンにすれば、上記画像の右側に赤い枠で囲まれた四角が2つ表示されてますが、そんな感じで描画エリアが見れるようになったりする。

f:id:takyam1213:20130611235148j:plain

あとはDeveloperツールのTimelineタブで、かなり細かい粒でそれぞれの処理速度を見る事ができたりする。

そんななんやかんやでいろいろちゃんとしようね的な事が書いてあるっぽいのだけど、まだ読み切れてないので最後の部分だけ訳してみる。

FINDING THE PROBLEM

  • Make sure you’re in “Incognito” mode. Extensions and apps can skew the figures that are reported when profiling performance.
    • 「匿名」モードにしてください(シークレットウィンドウとかかな)。エクステンションやアプリはプロファイリングパフォーマンスのレポート結果をゆがめます。
  • Open the page and the Developer Tools.
    • ページとDeveloperツールを開いてください。
  • In the timeline, record and interact with your page.
    • タイムラインタブを開いて、あなたのページを記録します。
  • Check for frames that go over budget (i.e. over 60 FPS).
    • 予算(想定?)フレームレートを超えるフレームを確認します。(たとえば60FPS以上)
  • If you’re close to budget, then you’re likely way over the budget on mobile.
    • 予算に近い場合、たぶんモバイルだと予算オーバーしてると思います。
  • Check the cause of the jank. Long paint? CSS layout? JavaScript?
    • 「jank」な理由を確認します。描画に時間がかかってる?CSSレイアウト?JavaScript?

FIXING THE PROBLEM

  • Go to “Settings” and enable “Continuous Page Repainting.”
    • 「設定」に移動して「Continuous Page Repainting」を有効にします。
  • In the “Elements” panel, hide anything non-essential using the hide (H) shortcut.
    • 「Elements」パネルで、関係なさそうな要素を隠します(Hキーショートカットで隠せるよ!)
  • Walk through the DOM tree, hiding elements and checking the FPS in the timeline.
    • DOMツリーを走査して、要素を隠したらタイムラインでFPSをチェックするを繰り返す。
  • See which element(s) are causing long paints.
    • 長い描画の原因となっている要素を見つけます。
  • Uncheck styles that could affect paint time, and track the FPS.
    • 描画時間に影響を与えているスタイルシートのチェックボックスをオフにして、FPSをチェックします。
    • たぶんElementsタブの右側のCSSのチェックボックスをオフってく、的な意味
  • Continue until you’ve located the elements and styles responsible for the slow-down.
    • あとは、FPSが低下している原因となる要素やスタイルを見つけるまで繰り返します

とまぁこんな感じで、かなり地味な作業をしましょうねって事みたいです。
FPSのチェックの方法がいまいちようわからんですがw

流石にこのレベル感までガッツリチューニングを求められる機会はあんまりなさそうなので、
普段から適当に気にしながらやっていこうかなーって感じですかね。

WEBページの体感速度をあげるための引き出しは多くもちたいものです。