Widely available すべての主要ブラウザで対応済み。安心して使用可能。

Paint timing

PerformancePaintTiming インターフェイスは、ウェブページ構築中の "paint" ("render" とも呼ばれる) 操作に関するタイミング情報を提供します。「ペイント」とは、レンダリングツリーを画面上のピクセルに変換することです。

この API が提供する重要なペイントの瞬間は 2 つあります。

First paint (FP): 何らかがレンダリングされる時間。最初のペイントのマーキングは任意であり、すべてのユーザーエージェントが報告するわけではないことに注意してください。

First contentful paint (FCP): DOM テキストまたは画像コンテンツの最初のビットがレンダリングされる時間。

3 つ目の重要なペイントの瞬間は、LargestContentfulPaint API によって提供されます。

Largest contentful paint (LCP): ビューポート内で表示可能な最大の画像またはテキストブロックのレンダリング時間。ページの読み込みが開始された時点から記録。

この API が提供するデータは、ユーザーがサイトのコンテンツが表示されるのを待つ時間を最小限に抑えるのに役立ちます。キーペイントの瞬間までの時間を短縮することで、サイトはより反応が良く、パフォーマンスに優れ、ユーザーにとって魅力的なものとなります。

他のパフォーマンス API と同様に、この API は PerformanceEntry を拡張します。

PerformanceEntry PerformancePaintTiming

Observer・パフォーマンス

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`PerformancePaintTiming`	60	79	84	14.1	60	14.5
`first-contentful-paint` First Contentful Paint (FCP) は、ブラウザーが DOM から最初のコンテンツをレンダリングし、ページが実際に読み込み中であるというフィードバックをユーザーに与えるまでの時間です。FCP が終了したということは、「（ナビゲーションが）行われたのか」という問いに答えるものです。	60	79	84	14.1	60	14.5
`first-paint` FirstPaint は Paint Timing API の一部です。ナビゲーションからブラウザーが読み込んだ最初のピクセルを画面にレンダリングします。ナビゲーション前の画面と視覚的に異なるものをレンダリングすることで「それが起きているのか？」という質問に答えます。	60	79			60
`toJSON` PerformancePaintTiming インターフェースの toJSON() メソッドはシリアライゼーションであり、PerformancePaintTiming オブジェクトの JSON 表現を返します。	60	79	84	14.1	60	14.5

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

Paint timing の活用

PerformancePaintTiming インターフェイスは、ウェブページ構築中の "paint" ("render" とも呼ばれる) 操作に関するタイミング情報を提供します。