Performance Observer Example

This is a very simple example of how to use the PerformanceObserver Web API to get various peformance measurements for the current page.

See the source code of this page for how this works.

Your browser

The available types of performance entries vary for each browser type.

On this browser, PerformanceObserver.supportedEntryTypes returns
["element","event","first-input","largest-contentful-paint","layout-shift","long-animation-frame","longtask","mark","measure","navigation","paint","resource","visibility-state"]

Observed performance values

See browser console for more details.

Events will be recorded as they happen, so far 5 events have been recorded.

{
  "name": "https://opensource.adobe.com/web-platform-zoo/examples/performance/observer/",
  "entryType": "navigation",
  "startTime": 0,
  "duration": 1694.7000000178814
}

{
  "name": "first-paint",
  "entryType": "paint",
  "startTime": 1702.4000000059605,
  "duration": 0
}

{
  "name": "first-contentful-paint",
  "entryType": "paint",
  "startTime": 1702.4000000059605,
  "duration": 0
}

{
  "name": "",
  "entryType": "largest-contentful-paint",
  "startTime": 1702.4000000059605,
  "duration": 0
}

{
  "name": "",
  "entryType": "largest-contentful-paint",
  "startTime": 1714.800000011921,
  "duration": 0
}