PerformancePaintTiming API(First Paint Timing API)とは

w3c

昨今、「Navigation Timing API」といったクライアント側でのページの処理時間を取得する機能が充実してきております。


W3CのWeb Performance WGでは、Navigation Timing、User Timing、Resource TimingそれぞれLevel2, Level3が改訂作業が行われております。(ドラフト状況)


また、昨年末頃より「PerformancePaintTiming」APIの議論が行われているように感じます。簡単な仕様はgithubのwicg organization以下に公開されております ( https://github.com/WICG/paint-timing )。これは、より多くの情報を取得できるようにする一環で、実際の描画時間が重要度が高いためのようだ。


数年前に、ふろしきさんが「Webページ遷移時間のパフォーマンス「First Paint」を計測する方法」で書かれている通り、window.chrome.loadTimes()より、firstPaintがとれましたが、より現代的な標準APIが検討されております。


PerformancePaintTiming

リポジトリの使い方とサンプルを見るのがわかりやすいかと思います。
PerformanceObserverから、firstPaintエントリより最初の描画タイミングが取得できます。

var observer = new PerformanceObserver(function(list) {
  var perfEntries = list.getEntries();
  for (var i = 0; i < perfEntries.length; i++) {
     // Process entries
     // report back for analytics and monitoring
     // ...
  }
});

// register observer for long task notifications
observer.observe({entryTypes: ["firstPaint"]});



(https://github.com/WICG/paint-timing#examples

  • first-paint: ナビゲーション後のcontaining blockを最初に描画した時間(背景を除く)
  • first-contentful-paint: 最初の、テキスト、画像、キャンバス、SVGを描画した時間

Improving accuracy of FP / FCP

Chromeでは、内部的にFPとFCPの時間を取得しており stable版で情報収集をしている。
https://docs.google.com/document/d/1XVP9jaZT7acQtK5O6vO-mIz31i5iB-pZn1S41_YP6p0/edit#


その中で、さらに細かくどこまでの時間をFP, FCPに含めるべきなのかというレポートを出している。どこまで仕様化できるかはわからないが、今後共WebPerf WGで議論が続けられる模様である。