Perfume.js

The latest in metrics & Real User Measurement

Perfume leverages the latest Performance APIs to collect field data that allows us to understand what real-world users are actually experiencing.

• Navigation Timing
• Navigator Interface
• Resource Timing
• Service Worker Status
• StorageManager interface
• Time to First Byte (TTFB)
• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)
• Total Blocking Time (TBT)
• Navigation Total Blocking Time (NTBT)
• Element Timing

At Coinbase, we use Perfume.js to capture a high-level scoring system that is clear, trusted, and easy to understand.

Summarizing the performance health of an application into a reliable and consistent score helps increase urgency and directs company attention and resources towards addressing each performance opportunity.

Perfume.js vs Web Vitals

Perfume leverages the Web Vitals library to collect all the standardized performance metrics. It explores new metrics like Navigation Total Blocking Time and dimensions like Low-End Devices, Service Worker status to understand your data better.

So don't worry, Perfume.js is a superset of Web Vitals, a bit like Typescript is a superset of Javascript.

Installing and Imports

// Install
npm install perfume.js --save

// Importing library
// Import the generated bundle to use the whole library generated:
import Perfume from 'perfume.js';

// Universal Module Definition:
import Perfume from 'node_modules/perfume.js/perfume.umd.js'; 

Customize

Default Options

Default options provided to Perfume.js constructor.

const options = {
  resourceTiming: false,
  elementTiming: false,
  analyticsTracker: options => {},
  maxMeasureTime: 30000,
};

Contacts

Copyright and licenses

Code and documentation copyright 2022 Leonardo Zizzamia. Code released under the MIT license. Docs released under Creative Commons.