Performance Observer API

The latest API for monitoring Web Performance. It is slightly more complicated to set up, but the advantage is that it uses the same syntax as other Observer APIs (Resize Observer, Intersection Observer, and Mutation Observer).

The Performance Observer API allows you to set up something similar to an event, which monitors specific configured web performance metrics and triggers a callback function when those results become available in the browser's performance timeline. Within the callback function, you can access this data.

The Performance Observer API is used to monitor, test, or measure performance metrics to improve your application. This API is not limited to performance measurement; it can also be an integral part of your application's code, performing actions based on the measured performance metrics.

The Performance Observer uses the following APIs to track performance: Performance API, Navigation Timing API, Resource Timing API, Paint Timing API, and more. These APIs can also be used directly without the Performance Observer. The Performance Observer provides the added capability of setting a callback function that receives data about the measured performance metrics asynchronously (as soon as they’re available in the browser). The downside is that the Performance Observer is a relatively new API and is not supported in IE browsers, whereas some of the listed APIs work in IE10 (though you can use try-catch syntax). Additionally, the Performance Observer can complicate the code, making it simpler to write without it.

One advantage of the Performance Observer is that performance observer notifications are delivered asynchronously, and the browser can dispatch them during idle time to avoid competing with critical rendering work. This is a shared characteristic of all Observer APIs.

What this API can measure:

• The time (in ms) from the start of page loading to a specific marker in the code you set (mark).
• The time (in ms) between two markers you set in the code (measure).
• The time required to load the entire site (including various loading phases and DOM formation) (navigation).
• The time required to load resources on the page (including sub-phases of loading) (resource).
• The time required to perform the first paint on the page (paint).
• Identify very long background processes (longTask).

Using the Performance Observer

To set up a successful PerformanceObserver instance, three things need to be configured:

• The PerformanceObserver instance itself.
• A callback function – executed when the configured PerformanceObserver is triggered.
• The type of performance metrics you want to monitor (which Performance API you’ll use). Several options are available, and only after this setup does the IntersectionObserver start.

The essence is as follows: create a PerformanceObserver instance that takes a callback function as an argument. This is similar to setting up an event – the callback function is triggered when the performance data you are measuring becomes available. The callback function automatically receives information about the measured performance metrics when executed (these data are asynchronously passed to the callback function when they become available).

Finally, you need to specify which performance metrics the PerformanceObserver instance will monitor (entryType) (which Performance API you will use). It is even possible to set up multiple types of performance metrics (entryType) for a single PerformanceObserver instance.

    // Setting one entryType (type of performance to monitor):
    observer1.observe({ entryTypes: ['mark', 'resource'] });

    // Setting multiple entryTypes (types of performance to monitor):
    observer3.observe({ entryTypes: ['mark', 'resource'] });