パフォーマンス API

ウェブアプリケーションを高速に動作させるためには、さまざまなパフォーマンス指標を測定・分析することが重要です。パフォーマンス 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

シフトした要素に関するデバッグ情報を提供します。

Performance

パフォーマンス測定にアクセスするためのメインインターフェイスです。ウィンドウとワーカーのコンテキストで Window.performance または WorkerGlobalScope.performance を使用することで利用することができます。

PerformanceElementTiming

特定の要素のレンダリングタイムスタンプを測定します。

PerformanceEntry

単一のパフォーマンス指標をカプセル化したパフォーマンスタイムライン上の項目です。すべてのパフォーマンス指標はこのインターフェイスを継承します。

PerformanceEventTiming

イベントの遅延時間、最初の入力遅延 (FID) を測定します。

PerformanceLongAnimationFrameTiming

レンダリングを専有し、他のタスクの実行を妨げる長時間アニメーションフレーム (LoAF) に関する指標を提供します。

PerformanceLongTaskTiming

レンダリングを専有し、他のタスクの実行を妨げる長時間のタスクに関する指標を提供します。

PerformanceMark

パフォーマンスタイムライン上に自分自身で記入するためのカスタムマーカー。

PerformanceMeasure

2 つのパフォーマンス項目間の時刻をカスタム測定します。

PerformanceNavigationTiming

文書を読み込むのにかかる時間など、文書内のナビゲーションイベントを測定します。

PerformanceObserver

パフォーマンスタイムラインに記録される新しいパフォーマンス項目を待ち受けします。

PerformanceObserverEntryList

パフォーマンスオブザーバーで観測された項目のリスト。

PerformancePaintTiming

ウェブページ構築時のレンダリング処理を測定します。

PerformanceResourceTiming

画像、スクリプト、フェッチ呼び出しなどのリソースのリダイレクト開始・終了時刻、フェッチ開始時刻、 DNS ルックアップ開始・終了時刻、レスポンス開始・終了時刻などのネットワーク負荷の指標を測定します。

PerformanceScriptTiming

長時間アニメーションフレーム (LoAF) の発生原因となる個々のスクリプトに関する指標を提供します。

PerformanceServerTiming

HTTP の Server-Timing ヘッダーのレスポンスで送られてくるサーバー指標を示します。

TaskAttributionTiming

タスクの種類と、長時間のタスクを担当するコンテナーを特定します。

VisibilityStateEntry

ページの可視状態が変化した時点を測定します。例えば、タブがフォアグラウンドからバックグラウンド、またはその逆に切り替わった時点です。

以下のガイドは、パフォーマンス API の主要な概念を理解し、その能力の概要を提供するのに役立つでしょう。

• パフォーマンスデータ: パフォーマンスデータの収集、アクセス、作業を行います。
• 高精度タイミング: 高精度な時刻及びモノトニック時計を測定します。
• リソースタイミング: 画像、CSS、JavaScript などの取得したリソースのネットワークタイミングを測定します。
• ナビゲーションタイミング: 文書内のナビゲーションのタイミングを測定します。
• ユーザータイミング: 自分のアプリケーションに合わせたパフォーマンスデータの測定と記録を行います。
• サーバータイミング: サーバー側の指標を収集します。
• 長時間アニメーションフレームタイミング: 長時間アニメーションフレーム (LoAF) とその発生要因に関するメトリクスを収集します。
• bfcache のブロック理由の監視: 現在の文書がバック/フォワードキャッシュ (bfcache) の使用をブロックされた理由を報告します。

• ウェブパフォーマンス
• 学習: ウェブパフォーマンス