Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sumup-oss/performance-observer
Generic interface for PerformanceObserver API.
https://github.com/sumup-oss/performance-observer
Last synced: about 2 months ago
JSON representation
Generic interface for PerformanceObserver API.
- Host: GitHub
- URL: https://github.com/sumup-oss/performance-observer
- Owner: sumup-oss
- License: apache-2.0
- Created: 2020-03-01T12:30:54.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-19T06:59:15.000Z (3 months ago)
- Last Synced: 2024-07-21T11:04:06.201Z (2 months ago)
- Language: TypeScript
- Homepage: https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
- Size: 2.48 MB
- Stars: 61
- Watchers: 8
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# ⚡️ Performance Observer
[](https://www.npmjs.com/package/@sumup/performance-observer)
[](https://codecov.io/gh/sumup-oss/performance-observer)
[](https://github.com/sumup-oss/performance-observer/blob/master/LICENSE)
> Generic interface for measuring performance metrics. It supports all [web-vitals](https://web.dev/vitals/) and [custom metrics](https://web.dev/custom-metrics/).
> Powered by native browser [PerformanceObserver API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver).
## Table of Contents
- [Motivation](#motivation)
- [Installation](#installation)
- [Install as NPM module](#install-as-npm-module)
- [Load as a script](#load-as-a-script)
- [List of supported metrics](#supported-metrics)
- [Browser support](#browser-support)
- [Usage](#usage)
- [Subscribe to individual metrics](#subscribe-to-individual-metrics)
- [Subscribe to several metrics](#subscribe-to-several-metrics-in-one-batch)
- [Unsubscribe from individual metric](#unsubscribe-from-individual-metric)
- [Unsubscribe from several metrics](#unsubscribe-from-several-metrics)
- [API](#api)
- [Types](#types)
- [Methods](#types)
- [Development](#development)
- [Example project](#example)
- [References](#references)
- [Code of conduct](#code-of-conduct)
- [Maintainers](#maintainers)
- [Contributing](#contributing)
- [About SumUp](#about-sumup)
## Motivation
Optimizing the quality of user experience is important for any application on the web. Modern browsers understand that and provide [PerformanceObserver API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver) interface that can be used by developers to observe browser performance measurements like the speed of rendering of certain elements or responsiveness of user interactions on the page.
Unfortunately due to the early age of the API it lacks standardization and ease of use. It's also quite low-level and for every metric you need to go through the documentation for implementing it separately and be aware of certain quirks and workarounds. For example, different types of metrics have different fields to get the performance value or require implementation of certain calculation formulas to get the meaningful metric result.
This projects aims to simplify the usage of [PerformanceObserver API](https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver) for developers by encapsulating all the complexity, formulas and necessary workarounds. It provides few simple methods that will allow to subscribe to relevant performance metrics and retrieve them in a predictable format in order to send them later to the analytics service of your choice.
## Installation
### Install as NPM module
```
npm install @sumup/performance-observer --save
```
or
```
yarn add @sumup/performance-observer
```
### Load as a script
The easiest and recommended way to use this library is by installing it from npm as it's shown above and make it part of your build process.
However, in some cases, for more precise tracking of certain metrics (e.g. [longtask](#longtask)) you might want to include the script in the `