perfume.js

Perfume.js v0.3.0

Perfume is a tiny JavaScript library for measuring Short/Long Script, FCP (First Contentful Paint), CFM (Component First Paint), TTI (Time to Interactive), annotating them to the DevTools timeline and reporting the results to Google Analytics.

Installing

npm (https://www.npmjs.com/package/perfume.js):

npm install perfume.js --save

Importing library

You can import the generated bundle to use the whole library generated by this starter:

import Perfume from 'perfume.js';

Additionally, you can import the transpiled modules from dist/es in case you have a modular library:

import Perfume from 'node_modules/perfume.js/dist/es/perfume';

Universal Module Definition:

import Perfume from 'node_modules/perfume.js/perfume.umd.js';

Start measuring

First Contentful Paint (FCP)

These metric mark the point, immediately after navigation, when the browser renders pixels to the screen. This is important to the user because it answers the question: is it happening?

FP marks the point when the browser renders the first bit of content from the DOM, which may be text, an image, SVG, or even a element.

const perfume = new Perfume();
perfume.firstPaint(); 
// ⚡️ Perfume.js: firstPaint 601 ms

Annotate metrics in the DevTools

Performance.mark (User Timing API) is used to create an application-defined peformance entry in the browser's performance entry buffer.

perfume.start('fibonacci');
fibonacci(400);
perfume.end('fibonacci', true); 
// ⚡️ Perfume.js: fibonacci 0.14 ms

Component First Paint (CFP)

These metric mark the point, immediately after creating a new component, when the browser renders pixels to the screen.

perfume.start('togglePopover');
$(element).popover('toggle');
perfume.endPaint('togglePopover', true); 
// ⚡️ Perfume.js: togglePopover 10.54 ms

Custom Logging

Save the duration and print it out exactly the way you want it.

perfume.start('fibonacci');
fibonacci(400);
const duration = this.perfume.end('fibonacci');
perfume.log('Custom logging', duration); 
// ⚡️ Perfume.js: Custom logging 0.14 ms

Google Analytics

To enable Perfume to send your measures to Google Analytics User timing, set the option enable:true and a custom user timing variable timingVar:"name".

const perfume = new Perfume();
perfume.googleAnalytics.enable = true;
perfume.googleAnalytics.timingVar = "userId";

Develop

• npm t: Run test suite
• npm start: Run npm run build in watch mode
• npm run test:watch: Run test suite in interactive watch mode
• npm run test:prod: Run linting and generate coverage
• npm run build: Generate bundles and typings
• npm run lint: Lints code
• npm run commit: Commit using conventional commit style (husky will tell you to use it if you haven't :wink:)

Credits

Made with ☕️ by @zizzamia and I want to thank some friends and projects for the work they did:

• Appmetrics.js for inspiring me to start writing this library and giving me some of the base ideas for the class architecture;
• Popper.js for having inspired me to write my first library in typescript;
• The Contributors for their much appreciated Pull Requests and bug reports;
• you for the star you'll give this project 😉 and for supporting me by giving my project a try 😄

Copyright and license

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

Changelog

0.3.0 (2018-1-3)

Features

• endPaint: Added endPaint() method #13