概念と使用方法
ウェブアプリケーションを高速に動作させるためには、さまざまなパフォーマンス指標を測定・分析することが重要です。パフォーマンス API は、重要な組み込み指標と、ブラウザーのパフォーマンスタイムラインに自分自身で測定値を追加する機能を提供します。パフォーマンスタイムラインには高精度のタイムスタンプが含まれ、開発者ツールで表示することができます。また、このデータを分析エンドポイントに送信して、パフォーマンス指標を時刻とともに記録することもできます。
それぞれのパフォーマンス指標は単一の PerformanceEntry で表されます。パフォーマンス項目には name, duration, startTime, そして type があります。すべてのパフォーマンス指標は PerformanceEntry インターフェイスを拡張し、さらにそれを修飾しています。
パフォーマンス項目のほとんどは、何もしなくても記録され、Performance.getEntries() または PerformanceObserver からアクセスできます。例えば、 PerformanceEventTiming の項目は、設定された閾値より時間がかかるイベントに対して記録されます。しかし、パフォーマンス API では PerformanceMark や PerformanceMeasure インターフェイスを使用して、自分自身でカスタムイベントを定義したり記録したりすることも可能です。
主となる Performance インターフェイスは Window および Worker グローバルスコーの両方にあり、独自のパフォーマンス項目を追加したり、パフォーマンス項目をクリアしたり、パフォーマンス項目を取得したりすることが可能です。
このインターフェイスでは、さまざまな種類のパフォーマンス項目が記録されるときに、それを待ち受けするために使用することができます。
より概念的な情報については、下記のパフォーマンス API ガイドを参照してください。
リファレンス
パフォーマンス API には、以下のインターフェイスが存在します。
EventCounts-
performance.eventCountsによって返される、イベント種別毎に発送されたイベント数を保持する読み取り専用のマップです。 LargestContentfulPaint-
ビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間を、ページの最初の読み込みを開始した時点から記録して測定します。
LayoutShift-
ページ上の要素の動きに基づいて、ウェブページのレイアウトの安定性に関する調査結果を提供します。
LayoutShiftAttribution-
シフトした要素に関するデバッグ情報を提供します。
NotRestoredReasonDetails-
ナビゲートされたページが、後方/前方キャッシュ (bfcache) を使用できない単一の理由を表します。
NotRestoredReasons-
ナビゲートされたページが、後方/前方キャッシュ (bfcache) を使用できない理由を含むレポートデータを提供します。
Performance-
パフォーマンス測定にアクセスするためのメインインターフェイスです。ウィンドウとワーカーのコンテキストで
Window.performanceまたはWorkerGlobalScope.performanceを使用することで利用することができます。 PerformanceElementTiming-
特定の要素のレンダリングタイムスタンプを測定します。
PerformanceEntry-
単一のパフォーマンス指標をカプセル化したパフォーマンスタイムライン上の項目です。すべてのパフォーマンス指標はこのインターフェイスを継承します。
PerformanceEventTiming-
イベントの遅延時間と Interaction to Next Paint (INP) を測定します。
PerformanceLongAnimationFrameTiming-
レンダリングを専有し、他のタスクの実行を妨げる長時間アニメーションフレーム (LoAF) に関する指標を提供します。
PerformanceLongTaskTiming-
レンダリングを専有し、他のタスクの実行を妨げる長時間のタスクに関する指標を提供します。
PerformanceMark-
パフォーマンスタイムライン上に自分自身で記入するためのカスタムマーカー。
PerformanceMeasure-
2 つのパフォーマンス項目間の時刻をカスタム測定します。
-
文書を読み込むのにかかる時間など、文書内のナビゲーションイベントを測定します。
PerformanceObserver-
パフォーマンスタイムラインに記録される新しいパフォーマンス項目を待ち受けします。
PerformanceObserverEntryList-
パフォーマンスオブザーバーで観測された項目のリスト。
PerformancePaintTiming-
ウェブページ構築時のレンダリング処理を測定します。
PerformanceResourceTiming-
画像、スクリプト、フェッチ呼び出しなどのリソースのリダイレクト開始・終了時刻、フェッチ開始時刻、 DNS ルックアップ開始・終了時刻、レスポンス開始・終了時刻などのネットワーク負荷の指標を測定します。
PerformanceScriptTiming-
長時間アニメーションフレーム (LoAF) の発生原因となる個々のスクリプトに関する指標を提供します。
PerformanceServerTiming-
HTTP の
Server-Timingヘッダーのレスポンスで送られてくるサーバー指標を示します。 TaskAttributionTiming-
タスクの種類と、長時間のタスクを担当するコンテナーを特定します。
VisibilityStateEntry-
ページの可視状態が変化した時点を測定します。例えば、タブがフォアグラウンドからバックグラウンド、またはその逆に切り替わった時点です。
ガイド
以下のガイドは、パフォーマンス API の主要な概念を理解し、その能力の概要を提供するのに役立つでしょう。
- パフォーマンスデータ: パフォーマンスデータの収集、アクセス、作業を行います。
- 高精度タイミング: 高精度な時刻及びモノトニック時計を測定します。
- リソースタイミング: 画像、CSS、JavaScript などの取得したリソースのネットワークタイミングを測定します。
- ナビゲーションタイミング: 文書内のナビゲーションのタイミングを測定します。
- ユーザータイミング: 自分のアプリケーションに合わせたパフォーマンスデータの測定と記録を行います。
- サーバータイミング: サーバー側の指標を収集します。
- 長時間アニメーションフレームタイミング: 長時間アニメーションフレーム (LoAF) とその発生要因に関するメトリクスを収集します。
- bfcache のブロック理由の監視: 現在の文書がバック/フォワードキャッシュ (bfcache) の使用をブロックされた理由を報告します。