パフォーマンス API
パフォーマンス API は、ウェブアプリケーションのパフォーマンスを測定するために使用される一連の規格です。
概念と使用方法
ウェブアプリケーションを高速に動作させるためには、さまざまなパフォーマンス指標を測定・分析することが重要です。パフォーマンス API は、重要な組み込み指標と、ブラウザーのパフォーマンスタイムラインに自分自身で測定値を追加する機能を提供します。パフォーマンスタイムラインには高精度のタイムスタンプが含まれ、開発者ツールで表示することができます。また、このデータを分析エンドポイントに送信して、パフォーマンス指標を時刻とともに記録することもできます。
それぞれのパフォーマンス指標は単一の PerformanceEntry
で表されます。パフォーマンス項目には name
, duration
, startTime
, そして type
があります。すべてのパフォーマンス指標は PerformanceEntry
インターフェイスを拡張し、さらにそれを修飾しています。
パフォーマンス項目のほとんどは、何もしなくても記録され、Performance.getEntries()
または PerformanceObserver
からアクセスできます。例えば、 PerformanceEventTiming
(en-US) の項目は、設定された閾値より時間がかかるイベントに対して記録されます。しかし、パフォーマンス API では PerformanceMark
や PerformanceMeasure
インターフェイスを使用して、自分自身でカスタムイベントを定義したり記録したりすることも可能です。
主となる Performance
インターフェイスは self.performance
を使用して各グローバルで使用でき、独自のパフォーマンス項目を追加したり、パフォーマンス項目をクリアしたり、パフォーマンス項目を取得したりすることが可能です。
このインターフェイスでは、さまざまな種類のパフォーマンス項目が記録されるときに、それを待ち受けするために使用することができます。
インターフェイス
EventCounts
(en-US)-
performance.eventCounts
(en-US) によって返される、イベント種別毎に発送されたイベント数を保持する読み取り専用のマップです。 LargestContentfulPaint
(en-US)-
ビューポート内に表示される最大の画像またはテキストブロックのレンダリング時間を、ページの最初の読み込みを開始した時点から記録して測定します。
Performance
-
パフォーマンス測定にアクセスするためのメインインターフェイスです。ウィンドウとワーカーのコンテキストで
self.performance
を使用することで利用することができます。 PerformanceElementTiming
-
特定の要素のレンダリングタイムスタンプを測定します。
PerformanceEntry
-
単一のパフォーマンス指標をカプセル化したパフォーマンスタイムライン上の項目です。すべてのパフォーマンス指標はこのインターフェイスを継承します。
PerformanceEventTiming
(en-US)-
イベントの遅延時間、最初の入力遅延 (FID) を測定します。
PerformanceLongTaskTiming
-
レンダリングを占有し、他のタスクの実行を妨害する長時間のタスクを検出します。
PerformanceMark
-
パフォーマンスタイムライン上に自分自身で記入するためのカスタムマーカー。
PerformanceMeasure
-
2 つのパフォーマンス項目間の時刻をカスタム測定します。
-
文書を読み込むのにかかる時間など、文書内のナビゲーションイベントを測定します。
PerformanceObserver
-
パフォーマンスタイムラインに記録される新しいパフォーマンス項目を待ち受けします。
PerformanceObserverEntryList
-
パフォーマンスオブザーバーで観測された項目のリスト。
PerformancePaintTiming
-
ウェブページ構築時のレンダリング処理を測定します。
PerformanceResourceTiming
-
画像、スクリプト、フェッチ呼び出しなどのリソースのリダイレクト開始・終了時刻、フェッチ開始時刻、 DNS ルックアップ開始・終了時刻、レスポンス開始・終了時刻などのネットワーク負荷の指標を測定します。
PerformanceServerTiming
(en-US)-
HTTP の
Server-Timing
ヘッダーのレスポンスで送られてくるサーバー指標を示します。 TaskAttributionTiming
-
タスクの種類と、長時間のタスクを担当するコンテナーを特定します。