WebインスペクタでCPU使用率を把握する

(音楽)

ジョナサン･デーヴィスです SafariとWebKitチームの テクノロジー･エバンジェリストです 今日のテーマは“Webインスペクタで CPU使用率を理解する”

バッテリーの寿命は重要です Webブラウザは最も使用されている アプリケーションですが Webコンテンツは iOSやMac OS Appにも含まれています つまり Webコンテンツは バッテリーの寿命に影響を与えます 電力効率を上げることが重要です SafariとWebKitには 自動省電力機能があります 例えばスロットルタイマーです コンテンツブロッカーの 拡張機能をサポートし 不要なコンテンツを 自動的にブロックします

Safariの省電力機能以外にも デベロッパができることがあります パフォーマンスを上げて 省電力のWebを構築しましょう

幸いにも Webのパフォーマンスの全知識を 省電力化に利用できるのです ページのロード時間を短縮するためには JavaScriptを最適化し CSS動画とトランジションを使用 バッテリーを節約できます

様々な試みをしてきた人にも有効な― Webインスペクタのツールを紹介します 省電力化のための 強力なヒントになるでしょう それはCPU Usage Timelineです Mac OS用のSafari 13の Webインスペクタで追加されました 電力消費量のウインドウで CPU使用率が高い動作を確認できます

今日はCPU Usage Timelineの 使い方を紹介します CPU使用率から問題点を発見し Webベースのプロジェクトでの 省電力対策を説明します タイムラインの使用前に 開発メニューを有効にします

Safariの環境設定を起動し Advancedをクリックして― メニューバーに開発メニューを表示する オプションを有効に

Webページを開き開発メニューから Webインスペクタを開くか ショートカットの Command-Option-Iを使います

Webkit.orgで 省電力化できる場所を探すため CPU Usage Timelineを使います このホームページはシンプルですが バックグラウンドには ロゴの動画があります

Webインスペクタを開いたまま タイムラインタブをクリック

左上にタイムラインのリストがあり 他のものも使えますが デフォルト値は CPU使用率の改善に有効です

記録するには 赤いボタンをクリックするか スペースバーを押します リロードボタンなら 記録と同時に ページの読み込みをキャプチャします

CPU使用率を見るには 有用な測定値を得るため 15秒以上記録してください 記録を進め十分なデータを キャプチャします

タイムラインをズームアウトし 全体を見ます

タイムラインをクリックすると CPU使用率が分かります このページは 電力を効率的に使っています ロード時間は速く― アイドル状態では ページは何もしていません ページを開いたままにでき― Webコンテンツによる バッテリーの消耗が減らせます

メインスレッドでは 興味深い作業が行われます チャートにはJavaScript処理を含む 作業が表示されます ペイント レイアウト それに伴うスタイルの再計算などです 動作の大半がペイントだと分かります グラフの中心はメインスレッドが 作業に要した時間です 約20秒のうちメインスレッドの 作業時間はわずか約100ミリ秒

チャートの下にはCPU使用率の内訳と Webコンテンツ処理に関する 全スレッドを表示 タイムラインをクリックしドラッグして 作業中の時間範囲を選択します

CPU使用率の下に メインスレッドのグラフがあり― 様々な時点のメインスレッドの 作業のカテゴリを示します ここでは赤のレイアウトイベントに ペイント作業が続き― いつ行われたかが分かります

消費電力グラフは情報を集約 選択範囲のCPUコアの 合計平均使用量を基に スコアが表示されます

このグラフは双方向性で 選択した時間範囲によって変わります 開始時の電力消費量は高いですが ページのロード後は中位です 上昇はしていませんが これは問題でしょう しかしタイムラインを ダブルクリックし記録を選択すると 平均的なCPU使用率は低い値です タイムラインをクリックしてドラッグし 記録からタイムスライスを選択すると 変化が分かります

クリックして範囲を選択し アイドル状態になるまでスライドします 消費電力は低下 いいことです アイドル状態では 使っていないコンテンツに 電力を使いたくありません

ロゴの動画のCPU使用率も アイドル状態では低い値です シンプルなCSS動画を 使用しているからです しかし視覚的効果は高いままです Webkit.orgは成功しています 省電力対策を探るには まずロードとアイドル状態を見ます 全ベースをカバーするため 双方向性もキャプチャします

WebKit Feature Statusページで Web機能のWebKitサポートを 最新に保てます フィルタリングと検索を可能にし 双方向性をキャプチャします タイムラインを記録し ページとインタラクトします 下までスクロールしたあと 上までスクロールします

その後 検索し いくつかをクリックします

15秒以上キャプチャしてください 新しいページなので アイドル状態もキャプチャします アイドル時間のキャプチャのために 記録を続けます

いい感じです 記録全体を選択します タイムラインからズームアウトし 全体を見ます

クリックしてCPU使用率を確認します

まずロードからこの領域を探ります

ロード時間が速く 消費電力は抑えられています

双方向性を見ましょう これら全部が起きても 消費電力は中位です しかしタイムラインを見ると スクロール時に 大量のスクリプトを実行しています スクロールは電力を消費するので 余分なCPU作業は避けましょう 必要性を見ます

統計とソースセクションから分かります 記録中のJavaScriptへの エントリは1200以上 AnimationFrameタイマーの 起動が596あり スクロールは647あります タイマーを減らしスクロールを 避けるのが有効ですが コードが必要か 改善できるかを調べます 統計領域で タイマーやイベントをクリックし トリガーしたコードの右側のソースを フィルタリングしてクリック JavaScriptデバッガーのコードに アクセスします

RequestAnimationFrameタイマーが UpdateImagesを呼び出しています 全画像を反復してチェックし 表示されている場合はロードします 遅延ロードされた画像パターンです しかしコードは淡色表示され InViewとLoadImageは呼び出されません

ページを下までスクロールし 上に戻ったとしても ページには画像がないので 理にかなっています 遅延ロードされた画像コードは 起動しません コードに戻ります

画像とイベントハンドラを設定

コードを見てください 通常はイベントハンドラを スクロール用に設定しサイズを変更 そうならないよう 条件付きガードを追加します

試しましょう

修正したタイムラインを キャプチャします タイムラインタブに戻ります 新しい記録を開始

スクロールします

タイムラインにJavaScriptのエントリが 表示されません すべてペイントです 遅延ロードの画像なしで スクロールする間は 余分なJavaScript作業を ガードが防ぎます

省電力となり メインスレッドの作業は スクロール用のペイントのみです 遅延ロードされた画像を使うページが 機能していることを確認します

Lazy Loaderを使用する MotionMarkのログ画像を持つページへ 新しいタイムラインを記録します

MotionMark画像がロードされました スクロールしてCPU測定値を取得し CPUタイムラインから現在位置を確認

タイマーとイベントを 必要なページだけに減らしました 見事です しかし 画像を含むページを スクロールすると スクリプトには多くのエントリが Safariにはソリューションを 進めるAPIがあります RequestAnimationFrameの代わりに Intersection Observerを使えます

Intersection Observerで エレメントがいつ見えるか分かり その時のみ作業します 見えなくなったら作業を停止して 低CPU電力状態に戻ります

Intersection Observerの実装では 別のタイムラインを記録し ソリューションの実行を スクロールで確認します JavaScriptへのエントリは１つだけです スクロール中はペイントをしています

CPU平均使用率はIntersection Observer ソリューションにより 16.3％から9.5％まで低下 細かい改善ですが有効です

省電力の方法は多様です

CPU Usage Timelineで Webコンテンツを調べ インタラクション中や アイドル状態の時に改善します CPU使用量を減らすことで省電力化し バッテリーの消耗を減らします

CSS動画とトランジションは 電力を使わずに 動的なビジュアルを提供

スクロール中は作業を避けて Intersection Observer APIを 使いましょう 魅力的なWebコンテンツであると共に CPU使用率が低いことが求められます WebKit Blogには 他にもヒントが出ています 関連するリソースセクションの リンクをチェックしてください

それらのツールを使い― この動画をヒントにしてください Webコンテンツを効率化し 省電力化でWebを強化しましょう