次の方法で共有

ランタイム パフォーマンスの分析 (チュートリアル)

実行時のパフォーマンス は、読み込みではなく、Web ページの実行時のパフォーマンスです。 次のチュートリアルでは、DevTools パフォーマンス ツールを使用してランタイム パフォーマンス を分析する方法について説明します。

このチュートリアルで学習するスキルは、Web コンテンツの読み込み、対話性、視覚的安定性を分析するのに役立ちます。これは、Core Web Vitals の重要な指標でもあります。 各 Core Web Vitals は、ユーザー エクスペリエンスの個別のファセットを表し、現場で測定可能であり、重要なユーザー中心の結果の実際のエクスペリエンスを反映しています。 これらのコア Web バイタルは 、パフォーマンス ツールで確認できます。

関連項目:

手順 1: InPrivate モードでデモを開き、DevTools を開く

次のチュートリアルでは、"低調なアニメーション" デモ Web ページで DevTools を開き、 パフォーマンス ツールを使用して Web ページでパフォーマンスのボトルネックを見つけます。

  1. リンク [ 低表示アニメーション ] を右クリックし、[ InPrivate] ウィンドウで [リンクを開く] を選択します。

    このデモ Web ページをプロファイリングします。これは、上下に移動するアイコンの数が可変であることがわかります。 デモのソース コードを表示する場合は、「 MicrosoftEdge/Demos > devtools-performance-get-started」を参照してください。

    InPrivate モードでは、ブラウザーがクリーン状態で実行されます。 たとえば、多数の拡張機能がインストールされている場合、それらの拡張機能によってパフォーマンスの測定値にノイズが発生する可能性があります。 詳細については、「 Microsoft Edge で InPrivate を参照する」を参照してください。

  2. デモ Web ページを右クリックし、[ 検査] を選択します。

    DevTools が開きます。

    左側のデモと右側の DevTools

  3. DevTools の右上にある [ DevTools のカスタマイズと制御 ] ([DevTools のカスタマイズと制御] アイコン) ボタンをクリックし、[ Dock の場所] の横にある [ 別のウィンドウにドッキング解除 ] (別のウィンドウ にドッキング解除アイコン) ボタンをクリックします。

手順 2: モバイル CPU をシミュレートするために CPU を調整する

モバイル デバイスの CPU パワーは、デスクトップやノート PC よりもはるかに少なくなります。 Web ページをプロファイリングするときは常に、CPU 調整を使用して、モバイル デバイスでの Web ページのパフォーマンスをシミュレートします。

次のように、デスクトップ マシンの CPU を調整してモバイル CPU をシミュレートします。

  1. DevTools で、 パフォーマンス (パフォーマンス アイコン) ツールを開きます。

  2. [ キャプチャ設定 (キャプチャ設定)] ボタンをクリックします。

    DevTools には、パフォーマンス メトリックのキャプチャに関連する設定ドロップダウン メニューとチェック ボックスが表示されます。

  3. 左上の [CPU 調整 ] ドロップダウン メニューで、推奨されるスローダウン値 ( 4 倍の速度低下 - 推奨) を選択します。

    CPU スロットル

    または、右下の [ 環境設定 ] セクションの [ CPU 調整 ] ドロップダウン メニューで、推奨されるスローダウン値 ( 4 倍の速度低下など ) を選択します。 ドロップダウン メニューの 2 つのインスタンスがリンクされています。

    推奨される調整係数は、マシンに基づいて DevTools によって計算されます。 Web ページが下位のモバイル デバイスでも正常に動作するようにするには、[ CPU 調整 ] ドロップダウンで 6 倍の速度低下など、より遅い速度を選択します。

    DevTools では、CPU が通常よりも低速になるように調整されます。

    調整が有効になっていることを通知するために、パフォーマンス ツールのタブに調整警告アイコン (調整警告アイコン) が表示されます。

  4. [ キャプチャ設定 (キャプチャ設定)] ボタンをクリックします。

    パフォーマンス メトリックのキャプチャに関連する設定ドロップダウン メニューとチェック ボックスは非表示になります。

手順 3: 理想的な数のアイコンで Web ページを埋める

パフォーマンスを記録する前に、最適化されていないコードと最適化されたコードを比較するのに役立つアイコンの数をデモ Web ページに入力します。

最適化されていないコードと最適化されたコードを比較するパフォーマンス記録のペアを作成するには、まず、デモ Web ページでコンピューターに応じて特定の数の移動アイコンを表示する必要があります。 最適化されていない (低速) コードと 最適化 されたコードの選択を切り替えるときに、アニメーションの速度と滑らかさの違いを明確に確認できるように、十分なアイコンが必要です。

デモ Web ページに最適な数のアイコンを入力するには:

  1. 低調なアニメーションのデモ Web ページに切り替えます。

    最適化されていないコードが使用されるように、既定では [ 低速 ] オプション ボタンが最初に選択されています。

  2. 青色のアイコンが非常にゆっくりと不規則に動き始めるまで、[ 要素の追加] ボタンを複数回クリックします。

  3. [ 最適化] オプション ボタンを選択します。

    アイコンはより迅速かつスムーズに移動します。

  4. 最適化されていない (低速) コードと 最適化 されたコードの使用に大きな違いが見つからない場合は、[ 要素の削除 ] ボタンをクリックしてみてください。

    アイコンが多すぎる場合、CPU が最大になり、2 つのバージョンのコードの結果に大きな違いは見られません。

手順 4: 最適化されていないコードのパフォーマンスを記録する

最適化されたバージョンの Web ページ コードを実行すると、青色のアイコンが高速に移動します。 なぜですか? どちらのバージョンのコードでも、同じ時間にアイコンを同じ量の領域に移動する必要があります。

パフォーマンス ツールで記録を取り、最適化されていない (低速) バージョンのコードでパフォーマンスのボトルネックを検出する方法を確認します。

  1. デモ Web ページで、[ 低速 ] オプション ボタンを選択します。

    アイコンは、よりゆっくりと不規則に移動します。 最適化されていないコードが実行され、プロファイリングされます。パフォーマンスの低下を示し、パフォーマンスのボトルネックを見つけるのに役立つ理想的な数のアイコンがあります。

  2. [DevTools] ウィンドウの [パフォーマンス ] ツールで、[ レコード (レコード)] ボタンをクリックします。

    DevTools は、Web ページの実行時にパフォーマンス メトリックをキャプチャします。

    Web ページのプロファイリング

    CPU は引き続き調整されます。 (これらのスクリーンショットには、アクティビティ バーの [パフォーマンス ツール] タブに調整警告アイコン (調整警告アイコン) が表示されます。

  3. 数秒待ってから、 停止 (停止アイコン) アイコンまたは [停止 ] ボタンをクリックします。

    DevTools は記録を停止し、データを処理してから、 結果をパフォーマンス ツールに表示します。

    プロファイルの結果

これらのパフォーマンス結果は圧倒的な量のデータを示しますが、すぐにはもっと意味があります。

手順 5: 最適化されていないコードのパフォーマンスを分析する

Web ページのパフォーマンスを記録したら、Web ページのパフォーマンスを評価し、パフォーマンスの問題の原因を見つけることができます。

  1. パフォーマンス ツールの上部で、CPU グラフを調べます。

    CPU グラフと [概要] パネル

    CPU グラフの色は、パフォーマンス ツールの下部にある [概要] パネルの色に対応します。 CPU グラフは、これらのリージョンが大きな領域を構成していることを示しています。つまり、記録中に CPU が最大にされたということです。 CPU が長時間最大化されるたびに、Web ページのパフォーマンスが良好でないことを示します。

  2. CPU グラフまたは NET グラフにカーソルを合わせます。

    フレームにマウス ポインターを合わせる

    DevTools には、その時点での Web ページのスクリーンショットが表示されます。

  3. マウスを左右に動かして録音を再生します。

    このアクションは スクラブと呼ばれ、パフォーマンス記録の進行状況を手動で分析するのに役立ちます。

手順 6: フレーム レンダリング統計オーバーレイを表示する

もう 1 つの便利なツールは、FPS メーターと呼ばれるフレーム レンダリング統計オーバーレイです。 フレーム レンダリング統計オーバーレイは、Web ページの実行中のフレーム/秒 (FPS) のリアルタイム見積もりを提供します。 フレーム レンダリング統計オーバーレイは、このチュートリアルでは必要ありませんが、役に立つ分析情報を提供する場合があります。

  1. DevTools の右上にある [ DevTools のカスタマイズと制御 ] ([DevTools のカスタマイズと制御] アイコン) ボタンをクリックし、[ クイック ビュー の切り替え] パネルを選択します。

    または、 Esc キー を 1 回または 2 回押します。

    [クイック ビュー] パネルが DevTools の下部に表示されます。

  2. クイック ビュー ツール バーで、[その他のツール] (その他のツール アイコン) ボタンをクリックし、[レンダリング] を選択します。

    [ レンダリング ] ツールが [クイック ビュー ] パネルで開きます。

  3. レンダリング ツールで、[フレーム レンダリング統計] チェック ボックスをオンにします。

    [フレーム レンダリング統計を使用したレンダリング ツール] チェック ボックス

  4. デモ Web ページに切り替えます。

    フレーム レンダリング統計オーバーレイが表示されます。

    フレーム レンダリング統計オーバーレイ

    オーバーレイには、次のセクションがあります。

    • フレーム レート
    • GPU ラスター
    • GPU メモリ

    オーバーレイをオフにします。

  5. [DevTools] ウィンドウに切り替えます。

  6. レンダリング ツールで、[フレーム レンダリング統計] チェック ボックスをオフにします。

  7. DevTools の右上にある [ DevTools のカスタマイズと制御 ] ([DevTools のカスタマイズと制御] アイコン) ボタンをクリックし、[ クイック ビュー の切り替え] パネルを選択します。

    または、Esc キーを押 します。

    クイック ビュー パネルは非表示です。

関連項目:

手順 7: パフォーマンスのボトルネックを見つける

アニメーションのパフォーマンスが良好でないことを確認したら、次の手順として"理由" という質問に答えます。

  1. パフォーマンス ツールの下部にある [概要] タブを選択します。

    [概要] タブ

    イベントが選択されていない場合、[ 概要 ] タブにアクティビティの内訳が表示されます。 Web ページはレンダリングにほとんどの時間を費やしました。 パフォーマンスは作業を減らす技術であるため、目的はレンダリング作業に費やす時間を短縮することです。

  2. パフォーマンス ツールで、[メイン] 行をクリックして展開します。

    DevTools は、時間の経過に伴ってメイン スレッドのアクティビティの炎のグラフを表示します。

    Main セクション

    • x 軸は、時間の経過に伴う記録を表します。 各バーはイベントを表します。 バーが広いと、イベントに時間がかかったことを意味します。

    • y 軸は呼び出し履歴を表します。 イベントが互いに積み重ねられている場合は、上位のイベントが低いイベントの原因であることを意味します。

    記録には多くのデータがあります。

  3. ツール バーの下の [ 概要 ] 領域で、水平方向にクリックしてドラッグして、記録の一部を拡大します。

    セクションを拡大する

    [概要] 領域には、CPU グラフと NET グラフ (右側に示されています) が含まれています。

    [ メイン ] セクション ([ 概要] の下) と [ 概要 ] タブには、記録の選択した部分の情報のみが表示されます。

    選択した領域を変更するもう 1 つの方法は、[ メイン ] セクションにフォーカスを置き、背景またはイベントをクリックして、次のように押します。

    • W をクリックして拡大するか、 S して縮小します。
    • A をクリックして選択範囲を左に移動するか、 D して選択を右に移動します。

  4. アニメーション フレーム発生イベントをクリックします。

    イベントの右上に赤い三角形が表示されると、イベントに関連する問題が発生する可能性があるという警告が表示されます。 Animation Frame Fired イベントは、requestAnimationFrame() コールバックが実行されるたびに発生します。

    [ 概要] パネルには、そのイベントに関する情報が表示されます。

    アニメーション フレーム発生イベントの詳細

  5. [ 表示 ] リンクをクリックします。

    DevTools では、 アニメーション フレーム発生 イベントを開始したイベントが強調表示されます。

  6. [app.js:125] リンクをクリックします。

    ソース ツールには 、関連するソース コード行が表示されます。

  7. マウス ホイールまたはトラックパッドを使用して、 アニメーション フレーム発生 イベントとその子イベントを拡大します。

    または、 W キーを押します。

    アニメーションの 1 つのフレームがレンダリングされたときに発生するイベントを確認できるようになりました。 update 関数が呼び出され、updateSlow 関数が呼び出されます。これにより、多くの再計算スタイルとレイアウト イベントがトリガーされます。

    Animation Frame Fired イベントとその子イベント

  8. 紫色の Layout イベントのいずれかをクリックします。

    DevTools は、[ 概要 ] パネルでイベントの詳細を提供します。 "強制リフロー" (再レイアウト) に関する警告があります。

  9. [概要] パネルで、[レイアウトの強制] の [app.js:104] リンクをクリックします。

    DevTools では、ソース ツールでレイアウトを強制したコード行に移動 します 。

    強制レイアウトの原因となったコード行

最適化されていないコードの問題は、各アニメーション フレームで各アイコンのスタイルを変更し、Web ページ上の各アイコンの位置を照会することです。 スタイルが変更されたため、各アイコンの位置が変更されたかどうかはブラウザーで認識されないため、新しい位置を計算するには、アイコンを再レイアウトする必要があります。

関連項目:

手順 8: 最適化されたコードのパフォーマンスを記録する

最適化 されていない コード のパフォーマンスを上記で記録しました。

最適化されたコード パフォーマンスを次のように記録します。

  1. デモ Web ページで [ 最適化済み ] をクリックして、最適化されたコードを有効にします。

  2. [DevTools] ウィンドウの [パフォーマンス ] ツールで、[ レコード (レコード)] ボタンをクリックします。

    DevTools は、Web ページの実行時にパフォーマンス メトリックをキャプチャします。

  3. 数秒待ってから、[停止] アイコン ( [停止 ] アイコン) または [ 停止 ] ボタンをクリックします。

    DevTools は記録を停止し、データを処理し、その結果を パフォーマンス ツールに表示します。

手順 9: 最適化されたコードのパフォーマンスを分析する

  • 先ほど学習したワークフローとツールを使用して、 上記の「手順 5: 最適化されていないコードのパフォーマンスを分析する」のように、パフォーマンスの結果を分析します。

    改善されたフレームレートから 、Main セクションの炎グラフのイベントの減少まで、アプリの最適化されたバージョンははるかに少ない作業を行い、パフォーマンスが向上します。

手順 10: 最適化されていないコードを分析する

最適化されていないバージョンのアプリから JavaScript の次のスニペットを比較します。

// Read the current position.
const currentPos = element.offsetTop;
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - SPEED : currentPos + SPEED;

// If the new position is out of bounds, reset it.
if (nextPos < 0) {
  nextPos = 0;
} else if (nextPos > canvas.offsetHeight) {
  nextPos = canvas.offsetHeight;
}

// Set the new position on the element.
element.style.top = `${nextPos}px`;

// Switch the direction if needed.
if (element.offsetTop === 0) {
  element.dataset.dir = 'down';
} else if (element.offsetTop === canvas.offsetHeight) {
  element.dataset.dir = 'up';
}

上記のコード スニペットは、Web ページ上の青いアイコンごとに、ブラウザー レンダリング ループのすべてのフレームで実行されます。 element変数は、1 つの青いアイコンを参照します。

この最適化されていないバージョンでは、アイコンの現在の位置に設定された nextPos 変数を作成し、そこで距離を追加します。 アイコンの現在の位置は、 element.offsetTopを使用して読み取られます。

アイコンがまだ Web ページの境界内にあることを確認した後、要素のインライン スタイルを設定する element.style.top を使用して新しい位置を設定します。

最後に、もう一度 element.offsetTop 読んで、アイコンの方向を調整します。

手順 11: 最適化されたコードを分析する

最適化されたコードでは、さまざまな一連のアクションを使用して、作業を減らします。 最適化されたバージョンのアプリの JavaScript の同じスニペットを次に示します。

// Read the current position.
const currentPos = parseFloat(element.style.transform.match(/[0-9.]+/)[0]);
// Read the direction.
const direction = element.dataset.dir;
// Calculate the next position.
let nextPos = direction === 'up' ? currentPos - (SPEED * 100 / canvasHeight) : currentPos + (SPEED * 100 / canvasHeight);

// If the new position is out of bounds, reset it, and switch the direction.
if (nextPos < 0) {
  nextPos = 0;
  element.dataset.dir = 'down';
} else if (nextPos > 100) {
  nextPos = 100;
  element.dataset.dir = 'up';
}

// Set the new position on the element.
element.style.transform = `translateY(${nextPos}vh)`;

最適化されたバージョンでは、まず、element.offsetTopを使用するのではなく、element.style.transformを読み取ってnextPos変数の値を設定します。 要素のインライン スタイルを使用すると、読み取り element.offsetTop ブラウザー エンジンが Web ページ上のどこにあるかを強制的に把握し、エンジンがスタイルとレイアウトを再計算する必要があるため、より高速です。

その後、アイコンの方向を調整しますが、今回は最適化されていないバージョンで行ったように element.offsetTop をもう一度読み取りません。

最後に、アイコンの新しい位置を設定しますが、今回はelement.style.topではなくelement.style.transformを使用します。 css transform プロパティは、Web ページのレイアウトを再計算しなくてもブラウザーレンダリング エンジンによって適用できるため、element.style.transformの使用が高速です。 transform プロパティを使用する場合、ブラウザーは各アイコンを個々のレイヤーと見なし、最終的なイメージを再合成することで、これらのレイヤーを正しい位置に表示します。

関連項目:

手順 12: DevTools 設定をリセットする

  1. ドッキングされていない DevTools ウィンドウに切り替えます。

  2. パフォーマンス ツールで、キャプチャ設定 (キャプチャ設定) ボタンをクリックします。

    DevTools には、パフォーマンス メトリックのキャプチャに関連する設定ドロップダウン メニューとチェック ボックスが表示されます。

  3. 左上の [CPU 調整 ] ドロップダウン メニューで、[ 調整なし] を選択します。

    DevTools は CPU の調整を停止します。 パフォーマンス ツールの タブから警告アイコンが削除されます。

  4. DevTools の右上にある [ DevTools のカスタマイズと制御 ] ([DevTools のカスタマイズと制御] アイコン) ボタンをクリックし、[ Dock の場所] の横にある [ Dock to right (Dock toright icon)] ボタンをクリックします。

次のステップ

パフォーマンス ツールに慣れるためには、Web ページのプロファイリングと結果の分析を練習します。

結果について質問がある場合は、 アクティビティ バーで [ ヘルプ ] (アクティビティ バーの [ヘルプ] アイコン) >Feedback を選択します。 または、 Alt + Shift + I (Windows、Linux) または Option + Shift + I (macOS) を押します。

または、 MicrosoftEdge/DevTools リポジトリに問題を報告します。

フィードバックには、可能であれば、再現可能な Web ページへのスクリーンショットまたはリンクを含めます。

ランタイム のパフォーマンスを向上させるには、さまざまな方法があります。 この記事では、 パフォーマンス ツールの焦点を絞ったツアーを提供するために、特定のアニメーションのボトルネックに焦点を当てていますが、発生する可能性があるボトルネックの 1 つに過ぎません。

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、ケイス・バスクによって作成されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。

  • Last updated on